xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
Update +page.svelte
author
Morgan Williams
date
(May 8, 2025, 4:21 AM +0200)
commit
989431e1
989431e1681b02596edd24f416ca858a5b0232b7
parent
19164ead
19164eadbba59b8ad0ae5db17cd422fbfb8f5c9c
+18
-65
+18
-65
src/routes/languages/+page.svelte
+18
-65
src/routes/languages/+page.svelte
···
86
86
87
87
<ul class="languages-list">
88
88
{#each [...filteredLanguages].filter(lang => lang.selected) as lang (lang.code)}
89
-
<li class="language-item selected" animate:flip={{ duration: flipDuration, easing: t => t*t*(3-2*t) }}>
90
-
<button class="add-btn"
91
-
onclick={() => lang.selected
92
-
? userStore.removeLanguage(lang.code)
93
-
: userStore.addLanguage(lang.code)
94
-
}>
95
-
<span class="add-btn-label-wrap">
96
-
{#if lang.selected}
97
-
<span class="add-btn-label" in:fade out:fade>Remove</span>
98
-
{:else}
99
-
<span class="add-btn-label" in:fade out:fade>Add</span>
100
-
{/if}
101
-
</span>
102
-
</button>
89
+
<li class="language-item selected" role="button" tabindex="0"
90
+
onclick={() => userStore.removeLanguage(lang.code)}
91
+
onkeydown={e => (e.key === 'Enter' || e.key === ' ') && userStore.removeLanguage(lang.code)}
92
+
aria-label={`Remove ${lang.name}`}
93
+
>
94
+
<span class="lang-action">–</span>
103
95
<span class="lang-speakers">{formatSpeakers(lang.speakers)}</span>
104
96
<span class="lang-label">{lang.name}</span>
105
97
{#if lang.nativeName && lang.nativeName !== lang.name}
···
113
105
{/if}
114
106
115
107
{#each [...filteredLanguages].filter(lang => !lang.selected) as lang (lang.code)}
116
-
<li class="language-item" animate:flip={{ duration: flipDuration, easing: t => t*t*(3-2*t) }}>
117
-
<button class="add-btn"
118
-
onclick={() => lang.selected
119
-
? userStore.removeLanguage(lang.code)
120
-
: userStore.addLanguage(lang.code)
121
-
}>
122
-
<span class="add-btn-label-wrap">
123
-
{#if lang.selected}
124
-
<span class="add-btn-label" in:fade out:fade>Remove</span>
125
-
{:else}
126
-
<span class="add-btn-label" in:fade out:fade>Add</span>
127
-
{/if}
128
-
</span>
129
-
</button>
108
+
<li class="language-item" role="button" tabindex="0"
109
+
onclick={() => userStore.addLanguage(lang.code)}
110
+
onkeydown={e => (e.key === 'Enter' || e.key === ' ') && userStore.addLanguage(lang.code)}
111
+
aria-label={`Add ${lang.name}`}
112
+
>
113
+
<span class="lang-action">+</span>
130
114
<span class="lang-speakers">{formatSpeakers(lang.speakers)}</span>
131
115
<span class="lang-label">{lang.name}</span>
132
116
{#if lang.nativeName && lang.nativeName !== lang.name}
···
152
136
margin-bottom: 0.1em;
153
137
font-size: 1em;
154
138
min-height: 32px;
155
-
transition: background 0.12s;
139
+
transition: background 0.12s, box-shadow 0.12s;
156
140
will-change: transform, opacity;
141
+
cursor: pointer;
142
+
outline: none;
157
143
}
158
-
.language-item:hover {
144
+
.language-item:hover, .language-item:focus {
159
145
background: #f6f8fa;
146
+
box-shadow: 0 0 0 2px #6366f1;
160
147
}
161
-
.add-btn {
162
-
min-width: 70px;
163
-
padding: 0.15em 0.7em;
164
-
border-radius: 999px;
165
-
border: none;
166
-
background: #f3f4f6;
167
-
color: #222;
168
-
font-weight: 500;
169
-
cursor: pointer;
170
-
font-size: 0.97em;
171
-
transition: background 0.12s;
172
-
margin-right: 0.3em;
173
-
height: 28px;
174
-
}
175
-
.add-btn:active {
176
-
background: #e0e7ff;
177
-
color: #3730a3;
178
-
}
148
+
179
149
.lang-label {
180
150
font-weight: 600;
181
151
margin-left: 0.3em;
···
192
162
text-align: right;
193
163
margin-left: 0.2em;
194
164
margin-right: 0.2em;
195
-
}
196
-
.add-btn-label-wrap {
197
-
position: relative;
198
-
display: inline-block;
199
-
width: 60px; /* or whatever fits both labels */
200
-
height: 1.5em;
201
-
text-align: center;
202
-
vertical-align: middle;
203
-
}
204
-
.add-btn-label {
205
-
position: absolute;
206
-
left: 0; top: 0; right: 0; bottom: 0;
207
-
display: flex;
208
-
align-items: center;
209
-
justify-content: center;
210
-
width: 100%;
211
-
height: 100%;
212
165
}
213
166
.lang-label {
214
167
font-weight: 600;