better grid

This commit is contained in:
Scott Chacon 2023-02-24 11:50:11 +01:00
parent b266ed58dc
commit 4c63a0df2d

View File

@ -177,21 +177,54 @@
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-6">
{#each $projects as project}
<div
class="flex flex-col space-x-2 bg-zinc-700 p-4 rounded-lg"
>
<a
class="hover:text-zinc-200 text-zinc-300 text-lg"
href="/projects/{project.id}/"
>{project.title}</a
<div class="h-full max-h-screen overflow-auto">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4"
>
{#each $projects as project}
<div
class="flex flex-col justify-between space-y-1 bg-zinc-700 rounded-lg shadow"
>
<div class="text-zinc-300 font-mono">
{project.path}
<div class="px-4 py-4 flex-grow-0">
<a
class="hover:text-zinc-200 text-zinc-300 text-lg"
href="/projects/{project.id}/"
>{project.title}</a
>
<div class="text-zinc-500 font-mono">
{project.path}
</div>
</div>
<div
class="flex-grow-0 text-zinc-500 font-mono border-t border-zinc-600 bg-zinc-600 rounded-b-lg px-3 py-1"
>
{#if project.api}
<div
class="flex flex-row items-center space-x-2 "
>
<div
class="w-2 h-2 bg-green-700 rounded-full"
/>
<div class="text-zinc-400">
syncing
</div>
</div>
{:else}
<div
class="flex flex-row items-center space-x-2 "
>
<div
class="w-2 h-2 bg-gray-400 rounded-full"
/>
<div class="text-zinc-400">
offline
</div>
</div>
{/if}
</div>
</div>
</div>
{/each}
{/each}
</div>
</div>
</div>
</div>