diff options
Diffstat (limited to 'src/routes/groceries/catalog/+page.svelte')
| -rw-r--r-- | src/routes/groceries/catalog/+page.svelte | 49 |
1 files changed, 8 insertions, 41 deletions
diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte index 59e2018..2b92a35 100644 --- a/src/routes/groceries/catalog/+page.svelte +++ b/src/routes/groceries/catalog/+page.svelte @@ -1,7 +1,7 @@ <script lang="ts"> import { enhance } from '$app/forms'; import { SvelteSet } from 'svelte/reactivity'; - import BestRef from '$lib/components/BestRef.svelte'; + import GroceryRow from '$lib/components/GroceryRow.svelte'; import { groupByCategory } from '$lib/shared/group-by-category'; let { data, form } = $props(); @@ -79,32 +79,13 @@ <h3 class="category-name">{cat}</h3> <ul class="item-list"> {#each items as item (item.id)} - <li class="item-row item-row--fixed"> - <input - type="checkbox" - class="item-check" - checked={selectedIds.has(item.id)} - onchange={() => toggleId(item.id)} - /> - <button - class="item-btn item-btn--grow" - name="id" - value={item.id} - type="submit" - aria-pressed={item.checked} - > - <span class="item-text"> - <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=/groceries/catalog">→</a - > - </li> + <GroceryRow + {item} + from="/groceries/catalog" + selectable + checked={selectedIds.has(item.id)} + oncheck={() => toggleId(item.id)} + /> {/each} </ul> {/each} @@ -150,20 +131,6 @@ box-shadow: none; } - .item-check { - width: 1.25rem; - height: 1.25rem; - accent-color: var(--accent); - cursor: pointer; - flex-shrink: 0; - } - - .checked { - text-decoration: line-through; - color: var(--text-secondary); - font-weight: 400; - } - .error { margin-bottom: 1rem; } |