diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-07-27 20:40:10 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-07-27 20:40:10 +0200 |
| commit | 3a7f9e40edb58b206d99a5d2e38ba34621227155 (patch) | |
| tree | 4f140de6ef25bc25176b2f0c8d24c91a9ba28cc5 /src/routes/+page.svelte | |
| parent | e075698891d653330b5d5d0f80c2c3495aee6262 (diff) | |
feat: show best reference (by quality score) on each item in list view
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 43 |
1 files changed, 37 insertions, 6 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 64c8410..1a70f47 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -59,7 +59,17 @@ {#each items as item (item.id)} <li class="catalog-item"> <button name="id" value={item.id} type="submit"> - {item.name} + <span class="item-text"> + {item.name} + {#if item.bestRef} + <span class="best-ref" + >{item.bestRef.brand} + {#if item.bestRef.price && item.bestRef.unit} + {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + </span> + {/if} + </span> </button> <a class="ref-link" href="/grocery/{item.id}">→</a> </li> @@ -83,7 +93,17 @@ {#each items as item (item.id)} <li class="catalog-item"> <button name="id" value={item.id} type="submit"> - {item.name} + <span class="item-text"> + {item.name} + {#if item.bestRef} + <span class="best-ref" + >{item.bestRef.brand} + {#if item.bestRef.price && item.bestRef.unit} + {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + </span> + {/if} + </span> </button> <a class="ref-link" href="/grocery/{item.id}">→</a> </li> @@ -156,7 +176,7 @@ .item-list li button { width: 100%; text-align: left; - height: 2rem; + height: 2.5rem; padding: 0 0.75rem; border: 1px solid #e0e0e0; border-radius: 0.5rem; @@ -174,7 +194,7 @@ .catalog-item { display: flex; gap: 0.25rem; - height: 2rem; + height: 2.5rem; } .catalog-item button:first-child { @@ -184,9 +204,20 @@ align-items: center; } + .item-text { + display: flex; + flex-direction: column; + text-align: left; + line-height: 1.2; + } + + .best-ref { + font-size: 0.625rem; + color: #999; + } + .ref-link { - width: 2rem; - aspect-ratio: 1; + width: 2.5rem; display: flex; align-items: center; justify-content: center; |