feat(web) styling server stats page (#866)

This commit is contained in:
Alex
2022-10-25 21:41:46 -05:00
committed by GitHub
parent b713fb5650
commit 95ebf815eb
8 changed files with 82 additions and 35 deletions

View File

@@ -11,23 +11,25 @@
const dispatch = createEventDispatcher();
</script>
<div class="flex border p-6 rounded-2xl bg-white">
<div class="flex border-b pb-5">
<div class="w-[70%]">
<h1 class="font-medium text-immich-primary">{title}</h1>
<p class="text-sm mt-1 font-medium">{subtitle}</p>
<h1 class="text-immich-primary text-sm">{title.toUpperCase()}</h1>
<p class="text-sm mt-1">{subtitle}</p>
<p class="text-sm">
<slot />
</p>
<table class="text-left w-full mt-4">
<table class="text-left w-full mt-5">
<!-- table header -->
<thead class="border rounded-md mb-2 bg-gray-50 flex text-immich-primary w-full h-12">
<thead
class="border rounded-md mb-2 bg-immich-primary/10 flex text-immich-primary w-full h-12"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/3 font-medium text-sm">Status</th>
<th class="text-center w-1/3 font-medium text-sm">Active</th>
<th class="text-center w-1/3 font-medium text-sm">Waiting</th>
</tr>
</thead>
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border bg-white">
<tr class="text-center flex place-items-center w-full h-[40px]">
<td class="text-sm px-2 w-1/3 text-ellipsis">{jobStatus ? 'Active' : 'Idle'}</td>
<td class="text-sm px-2 w-1/3 text-ellipsis">{activeJobCount}</td>
@@ -39,7 +41,7 @@
<div class="w-[30%] flex place-items-center place-content-end">
<button
on:click={() => dispatch('click')}
class="border px-6 py-3 text-sm bg-gray-50 font-medium rounded-2xl hover:bg-immich-primary/10 transition-all hover:cursor-pointer disabled:cursor-not-allowed"
class="px-6 py-3 text-sm bg-immich-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg"
disabled={jobStatus}
>
{#if jobStatus}