qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-09-20 11:16:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Update layout styles and add clear search button

Browse Source
This commit is contained in:
pheralb 2024-08-22 23:32:34 +01:00
parent 91b2ac31ec
commit 2d6641abdb
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/+layout.svelte
View File

@ -39,10 +39,10 @@
<aside
class={cn(
'z-50 w-full overflow-y-auto overflow-x-hidden',
'dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-56 md:pb-10',
'dark:border-neutral-800 md:fixed md:left-0 md:w-56 md:pb-0 md:h-[calc(100vh-63px)]',
'bg-white dark:bg-neutral-900',
'backdrop-blur-md opacity-95',
'border-r border-neutral-200 dark:border-neutral-800'
'border-b md:border-r border-neutral-200 dark:border-neutral-800'
)}
>
<div class="md:px-3 md:py-6">

18
src/routes/+page.svelte
View File

@ -18,7 +18,7 @@
const searchParam = queryParam('search');
// Icons:
import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon, TrashIcon } from 'lucide-svelte';
import { buttonStyles } from '@/ui/styles';
let sorted: boolean = false;
@ -104,10 +104,22 @@
/>
<Container>
<div class="flex items-center justify-end mb-4">
<div class={cn('flex items-center mb-4 justify-end', searchTerm.length > 0 && 'justify-between')}>
{#if searchTerm.length > 0}
<button
class={cn(
'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
filteredSvgs.length === 0 && 'hidden'
)}
on:click={() => clearSearch()}
>
<TrashIcon size={16} strokeWidth={2} class="mr-1" />
<span>Clear results</span>
</button>
{/if}
<button
class={cn(
'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
filteredSvgs.length === 0 && 'hidden'
)}
on:click={() => sort()}