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, 3:53 AM +0200)
commit
19164ead
19164eadbba59b8ad0ae5db17cd422fbfb8f5c9c
parent
b7a8dcf4
b7a8dcf42a7297908bf751c36790c531aaa0153f
+7
-10
+7
-10
src/routes/languages/+page.svelte
+7
-10
src/routes/languages/+page.svelte
···
56
56
return [...exact, ...starts, ...partial];
57
57
});
58
58
59
+
let flipDuration = $derived.by(() => Math.max(80, Math.min(320, 600 / filteredLanguages.length)));
60
+
59
61
function formatSpeakers(n) {
60
62
if (!n) return '';
61
63
return (n / 1000).toFixed(0) + 'M';
···
84
86
85
87
<ul class="languages-list">
86
88
{#each [...filteredLanguages].filter(lang => lang.selected) as lang (lang.code)}
87
-
<li class="language-item selected" animate:flip>
89
+
<li class="language-item selected" animate:flip={{ duration: flipDuration, easing: t => t*t*(3-2*t) }}>
88
90
<button class="add-btn"
89
91
onclick={() => lang.selected
90
92
? userStore.removeLanguage(lang.code)
···
111
113
{/if}
112
114
113
115
{#each [...filteredLanguages].filter(lang => !lang.selected) as lang (lang.code)}
114
-
<li class="language-item" animate:flip>
116
+
<li class="language-item" animate:flip={{ duration: flipDuration, easing: t => t*t*(3-2*t) }}>
115
117
<button class="add-btn"
116
118
onclick={() => lang.selected
117
119
? userStore.removeLanguage(lang.code)
···
151
153
font-size: 1em;
152
154
min-height: 32px;
153
155
transition: background 0.12s;
156
+
will-change: transform, opacity;
154
157
}
155
158
.language-item:hover {
156
159
background: #f6f8fa;
···
226
229
display: flex;
227
230
align-items: center;
228
231
max-width: 420px;
229
-
margin: 2.5rem auto 1.5rem auto;
232
+
margin: .7rem auto .5rem auto;
230
233
padding: 0 0.5rem;
231
234
border-bottom: 2px solid #e5e7eb;
232
235
background: none;
233
236
}
234
-
.search-icon {
235
-
font-size: 1.2em;
236
-
color: #bdbdbd;
237
-
margin-right: 0.5em;
238
-
user-select: none;
239
-
}
240
237
.language-filter-input {
241
238
flex: 1;
242
239
border: none;
243
240
outline: none;
244
241
background: none;
245
242
font-size: 1.15em;
246
-
padding: 0.7em 0 0.7em 0;
243
+
padding: 0em 0 0em 0;
247
244
color: #222;
248
245
transition: box-shadow 0.15s, border-color 0.15s;
249
246
}