Hugging Face's logo

Spaces:
huggingface-projects
/
wordalle
Runtime error

App Files Community
14
radames commited on
Commit
69aaf93
·
1 Parent(s): 3eba9d0

better keyboard layout

Browse files
Files changed (1) hide show
  1. frontend/src/lib/Keyboard.svelte +20 -5
frontend/src/lib/Keyboard.svelte CHANGED
@@ -7,18 +7,21 @@
7
 
8
  const rows = [
9
  'qwertyuiop'.split(''),
10
- [...'asdfghjkl'.split(''), 'Backspace'],
11
- [...'zxcvbnm'.split(''), 'Enter']
12
  ];
13
  </script>
14
 
15
  <div class="my-3 mx-auto select-none max-w-md">
16
  {#each rows as row, i}
17
  <div class="row">
 
 
 
18
  {#each row as key}
19
- <!-- svelte-ignore missing-declaration -->
20
  <button
21
- class="{letterStates[key]} {key.length > 1 && 'big'}"
 
22
  on:click={() => dispatch('keyup', key)}
23
  >
24
  {#if key === 'Backspace'}
@@ -33,6 +36,9 @@
33
  {/if}
34
  </button>
35
  {/each}
 
 
 
36
  </div>
37
  {/each}
38
  </div>
@@ -42,9 +48,18 @@
42
  @apply flex w-full mt-0 mb-2 mx-auto touch-manipulation;
43
  }
44
  button {
45
- @apply flex font-bold m-0 mr-1 p-0 min-h-[30px] min-w-[30px] border-0
46
  rounded-sm justify-center items-center uppercase cursor-pointer
47
  transition-all duration-200 ease-in-out flex-1 select-none
48
  bg-[#d3d6da] text-[#1a1a1b] hover:scale-105;
49
  }
 
 
 
 
 
 
 
 
 
50
  </style>
 
7
 
8
  const rows = [
9
  'qwertyuiop'.split(''),
10
+ [...'asdfghjkl'.split('')],
11
+ ['Enter', ...'zxcvbnm'.split(''), 'Backspace']
12
  ];
13
  </script>
14
 
15
  <div class="my-3 mx-auto select-none max-w-md">
16
  {#each rows as row, i}
17
  <div class="row">
18
+ {#if i === 1}
19
+ <div class="spacer" />
20
+ {/if}
21
  {#each row as key}
 
22
  <button
23
+ class="{letterStates[key] === undefined ? '' : letterStates[key]} {key.length > 1 &&
24
+ 'big'}"
25
  on:click={() => dispatch('keyup', key)}
26
  >
27
  {#if key === 'Backspace'}
 
36
  {/if}
37
  </button>
38
  {/each}
39
+ {#if i === 1}
40
+ <div class="spacer" />
41
+ {/if}
42
  </div>
43
  {/each}
44
  </div>
 
48
  @apply flex w-full mt-0 mb-2 mx-auto touch-manipulation;
49
  }
50
  button {
51
+ @apply flex font-bold text-xs m-0 mr-1 p-0 min-h-[58px] border-0
52
  rounded-sm justify-center items-center uppercase cursor-pointer
53
  transition-all duration-200 ease-in-out flex-1 select-none
54
  bg-[#d3d6da] text-[#1a1a1b] hover:scale-105;
55
  }
56
+ button.big {
57
+ flex: 1.5;
58
+ }
59
+ button:last-of-type {
60
+ margin: 0;
61
+ }
62
+ .spacer {
63
+ flex: 0.5;
64
+ }
65
  </style>