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

🛠️ Design improvements.

Browse Source
This commit is contained in:
pheralb 2023-03-15 13:54:56 +00:00
parent 25b1e4b21a
commit f03d9db2f4
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/routes/+layout.svelte
View File

@ -9,38 +9,39 @@
.filter((category, index, array) => array.indexOf(category) === index); .filter((category, index, array) => array.indexOf(category) === index);
// Icons: // Icons:
import Heart from 'phosphor-svelte/lib/Heart';
import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight'; import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
// Toaster: // Toaster:
import { Toaster } from 'svelte-french-toast'; import { Toaster } from 'svelte-french-toast';
</script> </script>
<main class="bg-dark font-sans text-mini text-white min-h-screen"> <main class="min-h-screen bg-dark font-sans text-mini text-white">
<nav class="fixed top-0 left-0 z-50 h-full pb-10 overflow-x-hidden overflow-y-auto w-60"> <nav class="fixed top-0 left-0 z-50 h-full w-60 overflow-y-auto overflow-x-hidden pb-10">
<div class="px-6 py-6 items-center"> <div class="items-center px-6 py-6">
<div class="border-b border-neutral-700/40 pb-3 mb-3"> <div class="mb-3 border-b border-neutral-700/40 pb-3">
<a href="/"> <a href="/">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<h3 class="text-xl font-medium">svgl</h3> <h3 class="text-xl font-medium">svgl</h3>
<p class="text-neutral-500">v3.0.0</p> <p class="text-neutral-500">v3.0.0</p>
</div> </div>
</a> </a>
<p class="mt-2 text-neutral-400 font-medium">✨ Optimized SVGs logos</p> <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs logos</p>
</div> </div>
<div class="pb-3 mb-3 border-b border-neutral-700/40 flex flex-col space-y-1"> <div class="mb-3 flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
{#each categories as category} {#each categories as category}
<a <a
href={`/category/${category.toLowerCase()}`} href={`/category/${category.toLowerCase()}`}
class="flex w-full items-center p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
>{category}</a >{category}</a
> >
{/each} {/each}
</div> </div>
<div class="flex flex-col space-y-1"> <div class="flex flex-col space-y-1 border-b border-neutral-700/40 pb-3">
<a <a
href="https://github.com/pheralb/svgl#-getting-started" href="https://github.com/pheralb/svgl#-getting-started"
target="_blank" target="_blank"
class="flex w-full items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
> >
<span>Submit logo</span> <span>Submit logo</span>
<ArrowUpRight size={16} /> <ArrowUpRight size={16} />
@ -48,12 +49,23 @@
<a <a
href="https://github.com/pheralb/svgl#-getting-started" href="https://github.com/pheralb/svgl#-getting-started"
target="_blank" target="_blank"
class="flex w-full items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex w-full items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
> >
<span>Repository</span> <span>Repository</span>
<ArrowUpRight size={16} /> <ArrowUpRight size={16} />
</a> </a>
</div> </div>
<a
href="https://twitter.com/pheralb_"
target="_blank"
class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
>
<Heart color="#991b1b" size={18} />
<div class="flex items-center space-x-1">
<p class="text-muted text-sm">Created by pheralb</p>
<ArrowUpRight size={12} />
</div>
</a>
</div> </div>
</nav> </nav>
<div class="ml-60 py-6"> <div class="ml-60 py-6">

24
src/routes/+page.svelte
View File

@ -54,7 +54,9 @@
let filteredSvgs: iSVG[] = []; let filteredSvgs: iSVG[] = [];
if (search.length === 0) { if (search.length === 0) {
filteredSvgs = allSvgs; filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => {
return b.id - a.id;
});
} }
const searchSvgs = () => { const searchSvgs = () => {
@ -71,17 +73,17 @@
bind:value={search} bind:value={search}
on:input={searchSvgs} on:input={searchSvgs}
placeholder="Search..." placeholder="Search..."
class="w-full p-3 rounded-md bg-neutral-700/10 border border-neutral-800 placeholder-neutral-500" class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
/> />
<div class="grid grid-cols-6 gap-4 mt-4"> <div class="mt-4 grid grid-cols-6 gap-4">
{#each filteredSvgs as svg} {#each filteredSvgs as svg}
<div <div
class="p-4 flex flex-col items-center justify-center bg-neutral-700/10 border border-neutral-800 rounded-md" class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
> >
<img src={svg.route} alt={svg.title} class="h-10 mb-4 mt-2" /> <img src={svg.route} alt={svg.title} class="mb-4 mt-2 h-10" />
<div class="flex flex-col items-center justify-center mb-3"> <div class="mb-3 flex flex-col items-center justify-center">
<p class="font-medium truncate text-[15px]">{svg.title}</p> <p class="truncate text-[15px] font-medium">{svg.title}</p>
<span class="text-neutral-500 lowercase text-sm">{svg.category}</span> <span class="text-sm lowercase text-neutral-500">{svg.category}</span>
</div> </div>
<div class="flex items-center space-x-1"> <div class="flex items-center space-x-1">
<button <button
@ -89,7 +91,7 @@
on:click={() => { on:click={() => {
copyToClipboard(svg.route); copyToClipboard(svg.route);
}} }}
class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
> >
<Copy size={17} /> <Copy size={17} />
</button> </button>
@ -98,7 +100,7 @@
on:click={() => { on:click={() => {
downloadSvg(svg.route); downloadSvg(svg.route);
}} }}
class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
> >
<DownloadSimple size={17} /> <DownloadSimple size={17} />
</button> </button>
@ -106,7 +108,7 @@
href={svg.url} href={svg.url}
title="Website" title="Website"
target="_blank" target="_blank"
class="flex items-center space-x-2 p-2 hover:bg-neutral-700/40 rounded-md duration-100 transition-all" class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
> >
<ArrowUpRight size={17} /> <ArrowUpRight size={17} />
</a> </a>