forked from
pds.ls/pdsls
atmosphere explorer
hide bottom bar when no labels
+54
-52
+54
-52
src/views/labels.tsx
+54
-52
src/views/labels.tsx
···
281
281
</Show>
282
282
</div>
283
283
284
-
<div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
285
-
<div
286
-
class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
287
-
onClick={(e) => {
288
-
const input = e.currentTarget.querySelector("input");
289
-
if (e.target !== input) input?.focus();
290
-
}}
291
-
>
292
-
<span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400" />
293
-
<input
294
-
ref={filterInputRef}
295
-
type="text"
296
-
spellcheck={false}
297
-
autocapitalize="off"
298
-
autocomplete="off"
299
-
class="grow py-2 select-none placeholder:text-sm focus:outline-none"
300
-
placeholder="Filter labels... (* for partial, -exclude)"
301
-
value={filter()}
302
-
onInput={(e) => setFilter(e.currentTarget.value)}
303
-
/>
304
-
<Show when={canHover && !filter()}>
305
-
<kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
306
-
/
307
-
</kbd>
308
-
</Show>
309
-
</div>
310
-
311
-
<div class="flex min-h-7.5 w-full max-w-lg items-center justify-between">
312
-
<div class="w-20" />
313
-
314
-
<div>
315
-
<Show when={filter()}>
316
-
<span>{filteredLabels().length}</span>
317
-
<span>/</span>
284
+
<Show when={labels().length > 1}>
285
+
<div class="dark:bg-dark-500 fixed bottom-0 z-10 flex w-full flex-col items-center gap-2 border-t border-neutral-200 bg-neutral-100 px-3 pt-3 pb-6 dark:border-neutral-700">
286
+
<div
287
+
class="dark:bg-dark-200 flex w-full max-w-lg cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 dark:border-neutral-700"
288
+
onClick={(e) => {
289
+
const input = e.currentTarget.querySelector("input");
290
+
if (e.target !== input) input?.focus();
291
+
}}
292
+
>
293
+
<span class="iconify lucide--filter text-neutral-500 dark:text-neutral-400" />
294
+
<input
295
+
ref={filterInputRef}
296
+
type="text"
297
+
spellcheck={false}
298
+
autocapitalize="off"
299
+
autocomplete="off"
300
+
class="grow py-2 select-none placeholder:text-sm focus:outline-none"
301
+
placeholder="Filter labels... (* for partial, -exclude)"
302
+
value={filter()}
303
+
onInput={(e) => setFilter(e.currentTarget.value)}
304
+
/>
305
+
<Show when={canHover && !filter()}>
306
+
<kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-xs text-neutral-400 select-none dark:border-neutral-600 dark:bg-neutral-700">
307
+
/
308
+
</kbd>
318
309
</Show>
319
-
<span>{labels().length} labels</span>
320
310
</div>
321
311
322
-
<div class="flex w-20 items-center justify-end">
323
-
<Show when={cursor()}>
324
-
<Button
325
-
onClick={handleLoadMore}
326
-
disabled={loading()}
327
-
classList={{ "w-20 h-7.5 justify-center": true }}
328
-
>
329
-
<Show
330
-
when={!loading()}
331
-
fallback={
332
-
<span class="iconify lucide--loader-circle animate-spin text-base" />
333
-
}
312
+
<div class="flex min-h-7.5 w-full max-w-lg items-center justify-between">
313
+
<div class="w-20" />
314
+
315
+
<div>
316
+
<Show when={filter()}>
317
+
<span>{filteredLabels().length}</span>
318
+
<span>/</span>
319
+
</Show>
320
+
<span>{labels().length} labels</span>
321
+
</div>
322
+
323
+
<div class="flex w-20 items-center justify-end">
324
+
<Show when={cursor()}>
325
+
<Button
326
+
onClick={handleLoadMore}
327
+
disabled={loading()}
328
+
classList={{ "w-20 h-7.5 justify-center": true }}
334
329
>
335
-
Load more
336
-
</Show>
337
-
</Button>
338
-
</Show>
330
+
<Show
331
+
when={!loading()}
332
+
fallback={
333
+
<span class="iconify lucide--loader-circle animate-spin text-base" />
334
+
}
335
+
>
336
+
Load more
337
+
</Show>
338
+
</Button>
339
+
</Show>
340
+
</div>
339
341
</div>
340
342
</div>
341
-
</div>
343
+
</Show>
342
344
</Show>
343
345
</div>
344
346
</>