diff options
Diffstat (limited to 'src/lib/components/GroceryRow.svelte')
| -rw-r--r-- | src/lib/components/GroceryRow.svelte | 71 |
1 files changed, 64 insertions, 7 deletions
diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte index 3305afa..9a88e90 100644 --- a/src/lib/components/GroceryRow.svelte +++ b/src/lib/components/GroceryRow.svelte @@ -1,5 +1,6 @@ <script lang="ts"> import BestRef from '$lib/components/BestRef.svelte'; + import Row from '$lib/components/Row.svelte'; import type { EnrichedGrocery } from '$lib/server/services/groceries'; let { @@ -17,29 +18,29 @@ } = $props(); </script> -<li class="item-row item-row--fixed"> +<Row variant="plain" style="height: 2.75rem;"> {#if selectable} - <input type="checkbox" class="item-check" {checked} onchange={oncheck} /> + <input type="checkbox" class="check" {checked} onchange={oncheck} /> {/if} <button - class="item-btn item-btn--grow" + class="toggle" name="id" value={item.id} type="submit" aria-pressed={item.checked} > - <span class="item-text"> + <span class="label"> <span class:checked={item.checked}>{item.name}</span> {#if item.bestRef} <BestRef ref={item.bestRef} /> {/if} </span> </button> - <a class="ref-link" href="/grocery/{item.id}?from={from}">→</a> -</li> + <a class="open" href="/grocery/{item.id}?from={from}">→</a> +</Row> <style> - .item-check { + .check { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); @@ -52,4 +53,60 @@ color: var(--text-secondary); font-weight: 400; } + + .toggle { + flex-grow: 1; + width: auto; + text-align: left; + padding: 0 0.875rem; + height: 100%; + border: none; + border-radius: 0.75rem; + background: var(--surface); + font-size: 1rem; + font-weight: 500; + display: flex; + align-items: center; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); + } + + .toggle:hover { + background: var(--surface-hover); + box-shadow: 0 2px 6px var(--shadow-accent); + transform: translateY(-1px); + } + + .label { + display: flex; + flex-direction: column; + text-align: left; + line-height: 1.2; + gap: 0.0625rem; + overflow: hidden; + } + + .open { + width: 2.75rem; + flex-shrink: 0; + height: 2.75rem; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.75rem; + background: var(--surface); + color: var(--text-secondary); + text-decoration: none; + font-size: 1rem; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); + } + + .open:hover { + background: var(--surface-hover); + color: var(--accent); + box-shadow: 0 2px 6px var(--shadow-accent); + transform: translateY(-1px); + } </style> |