Design improvements.

This commit is contained in:
pheralb 2023-03-19 16:44:15 +00:00
parent 892a672c28
commit c63ebcd8c7
5 changed files with 36 additions and 14 deletions

View File

@ -1,3 +1,3 @@
<div class="container mx-auto pt-4"> <div class="container mx-auto px-6 pt-4 md:px-0">
<slot /> <slot />
</div> </div>

View File

@ -0,0 +1,3 @@
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-6">
<slot />
</div>

View File

@ -21,7 +21,9 @@
</script> </script>
<main class="min-h-screen bg-dark font-sans text-mini text-white"> <main class="min-h-screen bg-dark font-sans text-mini text-white">
<nav class="fixed top-0 left-0 z-50 h-full w-60 overflow-y-auto overflow-x-hidden pb-10"> <nav
class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-800 md:pb-10 md:fixed md:top-0 md:left-0 md:h-full md:w-60 md:border-none"
>
<div class="items-center px-6 py-6"> <div class="items-center px-6 py-6">
<div class="mb-3 border-b border-neutral-700/40 pb-3"> <div class="mb-3 border-b border-neutral-700/40 pb-3">
<a href="/"> <a href="/">
@ -32,16 +34,23 @@
</a> </a>
<p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs logos</p> <p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs logos</p>
</div> </div>
<div class="mb-3 flex flex-col space-y-1 border-b border-neutral-700/40 pb-3"> <div
class="flex items-center space-y-1 overflow-y-auto border-b border-neutral-700/40 pb-3 md:mb-3 md:flex-col md:overflow-y-visible"
>
{#each categories as category} {#each categories as category}
<a <a
href={`/directory/${category.toLowerCase()}`} href={`/directory/${category.toLowerCase()}`}
class="flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40" class={`flex w-full items-center rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40
${
data.pathname === `/directory/${category.toLowerCase()}` ? 'bg-neutral-700/30' : ''
}`}
data-sveltekit-preload-data>{category}</a data-sveltekit-preload-data>{category}</a
> >
{/each} {/each}
</div> </div>
<div class="flex flex-col space-y-1 border-b border-neutral-700/40 pb-3"> <div
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-700/40 pb-3 md:mt-0 md:flex-col md:space-y-1"
>
<a <a
href="https://github.com/pheralb/svgl#-getting-started" href="https://github.com/pheralb/svgl#-getting-started"
target="_blank" target="_blank"
@ -72,7 +81,7 @@
</a> </a>
</div> </div>
</nav> </nav>
<div class="ml-60 py-6"> <div class="py-2 md:ml-60 md:py-6">
<Transition pathname={data.pathname}> <Transition pathname={data.pathname}>
<slot /> <slot />
</Transition> </Transition>

View File

@ -9,9 +9,10 @@
import Search from '@/components/search.svelte'; import Search from '@/components/search.svelte';
import Container from '@/components/container.svelte'; import Container from '@/components/container.svelte';
import SvgCard from '@/components/svgCard.svelte'; import SvgCard from '@/components/svgCard.svelte';
import Grid from '@/components/grid.svelte';
// Search: // Search:
let searchTerm = ""; let searchTerm = '';
let filteredSvgs: iSVG[] = []; let filteredSvgs: iSVG[] = [];
if (searchTerm.length === 0) { if (searchTerm.length === 0) {
@ -29,10 +30,14 @@
</script> </script>
<Container> <Container>
<Search bind:searchTerm on:input={searchSvgs} /> <Search
<div class="mt-4 grid grid-cols-6 gap-4"> bind:searchTerm
on:input={searchSvgs}
placeholder={`Search ${filteredSvgs.length} logos...`}
/>
<Grid>
{#each filteredSvgs as svg} {#each filteredSvgs as svg}
<SvgCard svgInfo={svg} /> <SvgCard svgInfo={svg} />
{/each} {/each}
</div> </Grid>
</Container> </Container>

View File

@ -6,6 +6,7 @@
// Components: // Components:
import Container from '@/components/container.svelte'; import Container from '@/components/container.svelte';
import Grid from '@/components/grid.svelte';
import Search from '@/components/search.svelte'; import Search from '@/components/search.svelte';
import SvgCard from '@/components/svgCard.svelte'; import SvgCard from '@/components/svgCard.svelte';
@ -17,7 +18,7 @@
filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => { filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => {
return b.id - a.id; return b.id - a.id;
}); });
} }
const searchSvgs = () => { const searchSvgs = () => {
return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => { return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
@ -28,10 +29,14 @@
</script> </script>
<Container> <Container>
<Search bind:searchTerm on:input={searchSvgs} /> <Search
<div class="mt-4 grid grid-cols-6 gap-4"> bind:searchTerm
on:input={searchSvgs}
placeholder={`Search ${filteredSvgs.length} logos...`}
/>
<Grid>
{#each filteredSvgs as svg} {#each filteredSvgs as svg}
<SvgCard svgInfo={svg} /> <SvgCard svgInfo={svg} />
{/each} {/each}
</div> </Grid>
</Container> </Container>