ui changes and cs prices
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s
This commit is contained in:
@@ -3,6 +3,8 @@
|
||||
import { resolve } from '$app/paths';
|
||||
import ProgressBar from '$lib/components/ProgressBar.svelte';
|
||||
import ListPictureDropzone from '$lib/components/ListPictureDropzone.svelte';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
import type { SubmitFunction } from '@sveltejs/kit';
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
@@ -53,12 +55,7 @@
|
||||
class="absolute top-full right-0 z-10 mt-3 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
|
||||
>
|
||||
<label class="block"
|
||||
>name<input
|
||||
name="name"
|
||||
required
|
||||
maxlength="200"
|
||||
class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
|
||||
/></label
|
||||
>name<Input name="name" required maxlength={200} class="mt-2" /></label
|
||||
>
|
||||
<label class="block"
|
||||
>type<select
|
||||
@@ -69,11 +66,7 @@
|
||||
></label
|
||||
>
|
||||
<ListPictureDropzone label="List picture (optional)" />
|
||||
<button
|
||||
disabled={uploading}
|
||||
class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
|
||||
>create list</button
|
||||
>
|
||||
<Button type="submit" disabled={uploading}>create list</Button>
|
||||
</form>
|
||||
</details>{/if}
|
||||
</div>
|
||||
@@ -84,37 +77,38 @@
|
||||
<li class="border-t border-[var(--site-border)]">
|
||||
<a
|
||||
href={resolve('/lists/[slug]', { slug: list.slug })}
|
||||
class="block py-5 hover:text-[var(--site-muted)]"
|
||||
class={list.isProgress
|
||||
? 'grid grid-cols-[minmax(0,1fr)_8rem_auto] items-center gap-3 py-5 hover:text-[var(--site-muted)]'
|
||||
: 'flex items-center justify-between gap-3 py-5 hover:text-[var(--site-muted)]'}
|
||||
>
|
||||
<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
|
||||
<span class="flex items-center gap-3">
|
||||
{#if list.pictureUrl}<img
|
||||
src={list.pictureUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
width="48"
|
||||
height="48"
|
||||
class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
|
||||
/>{/if}
|
||||
<span class="text-lg font-medium">{list.name}</span>
|
||||
</span>
|
||||
<span class="text-base text-[var(--site-muted)]">
|
||||
{#if list.isProgress && data.user}
|
||||
{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}
|
||||
{:else}
|
||||
{list.total}
|
||||
{list.total === 1 ? 'item' : 'items'}{list.isProgress ? ' · progress' : ''}
|
||||
{/if}
|
||||
</span>
|
||||
<span class="flex min-w-0 items-center gap-3">
|
||||
{#if list.pictureUrl}<img
|
||||
src={list.pictureUrl}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
width="48"
|
||||
height="48"
|
||||
class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
|
||||
/>{/if}
|
||||
<span class="truncate text-lg font-medium">{list.name}</span>
|
||||
</span>
|
||||
{#if list.isProgress}<span class="mt-3 block"
|
||||
{#if list.isProgress}
|
||||
<span class="block w-32"
|
||||
><ProgressBar
|
||||
value={list.checked}
|
||||
max={list.total}
|
||||
label={`Progress on ${list.name}`}
|
||||
small
|
||||
/></span
|
||||
>{/if}
|
||||
>
|
||||
{/if}
|
||||
<span class="min-w-16 whitespace-nowrap text-right text-base text-[var(--site-muted)]">
|
||||
{#if list.isProgress && data.user}
|
||||
{list.total ? Math.round((list.checked / list.total) * 100) : 0}%
|
||||
{:else}
|
||||
{list.total} {list.total === 1 ? 'item' : 'items'}
|
||||
{/if}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{:else}
|
||||
|
||||
Reference in New Issue
Block a user