diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 158 |
1 files changed, 108 insertions, 50 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b0398af..3dcd3bc 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,7 +10,7 @@ function groupByCategory(items: typeof listItems) { const groups: Record<string, typeof listItems> = {}; for (const item of items) { - const key = item.categoryName ?? 'Uncategorized'; + const key = item.categoryName ?? 'Non catégorisé'; (groups[key] ??= []).push(item); } return Object.entries(groups); @@ -22,11 +22,11 @@ type="text" name="name" bind:value={name} - placeholder="Add an item..." + placeholder="Ajouter un article..." autocomplete="off" /> - <button type="submit">Add</button> - <button type="submit" formaction="?/addAndEdit">Edit</button> + <button type="submit" aria-label="Ajouter">+</button> + <button type="submit" formaction="?/addAndEdit" aria-label="Modifier">→</button> </form> {#if form?.error} @@ -34,7 +34,7 @@ {/if} {#if listItems.length === 0} - <p class="empty">Nothing to buy</p> + <p class="empty">Rien à acheter</p> {:else} <form method="POST" action="?/toggle" use:enhance> {#each groupByCategory(listItems) as [cat, items] (cat)} @@ -46,12 +46,15 @@ <span class="item-text"> {item.name} {#if item.bestRef} - <span class="best-ref" - >{item.bestRef.reference} - {#if item.bestRef.price && item.bestRef.unit} - {item.bestRef.price.toFixed(2)} {item.bestRef.unit} - {/if} - </span> + <span class="best-ref" + >{item.bestRef.reference} + {#if item.bestRef.price && item.bestRef.unit} + {item.bestRef.price.toFixed(2)} {item.bestRef.unit} + {/if} + {#if item.bestRef.qualityScore != null} + ({item.bestRef.qualityScore}/100) + {/if} + </span> {/if} </span> </button> @@ -67,77 +70,114 @@ .add-bar { display: flex; gap: 0.5rem; - padding: 0.5rem 1rem 0.5rem; + padding: 0.75rem 0; position: sticky; - top: 3rem; - background: #fafafa; + top: 3.1rem; + background: var(--bg); z-index: 10; } input { flex: 1; - padding: 0.75rem; - border: 1px solid #ccc; - border-radius: 0.5rem; + padding: 0.75rem 1rem; + border: 1.5px solid var(--border); + border-radius: 0.75rem; font-size: 1rem; font-family: inherit; - background: #fff; + background: var(--surface); min-width: 0; + transition: border-color 0.2s, box-shadow 0.2s; + } + + input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15); } .add-bar button { - padding: 0.75rem 1rem; + width: 3rem; + height: 3rem; + flex-shrink: 0; + padding: 0; border: none; - border-radius: 0.5rem; - font-size: 1rem; + border-radius: 0.75rem; + font-size: 1.25rem; + font-weight: 500; font-family: inherit; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; } .add-bar button[type='submit']:not([formaction]) { - background: #333; + background: var(--accent); color: #fff; + box-shadow: 0 1px 2px var(--shadow); + } + + .add-bar button[type='submit']:not([formaction]):hover { + background: var(--accent-hover); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2); } .add-bar button[formaction] { - background: #e0e0e0; - color: #333; + background: var(--surface); + color: var(--text-secondary); + border: 1.5px solid var(--border); + } + + .add-bar button[formaction]:hover { + border-color: var(--accent); + color: var(--text); } .error { - color: #d00; + color: var(--danger); + font-size: 0.875rem; margin-bottom: 1rem; + padding: 0.5rem 0.75rem; + background: rgba(217, 83, 79, 0.08); + border-radius: 0.5rem; } .item-list { list-style: none; display: flex; flex-direction: column; - gap: 0.25rem; + gap: 0.375rem; } .item-list li button { width: 100%; text-align: left; - height: 2.5rem; - padding: 0 0.75rem; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; + 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: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .item-list li button:hover { - background: #f5f5f5; + background: #fff8f5; + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .catalog-item { display: flex; - gap: 0.25rem; - height: 2.5rem; + gap: 0.5rem; + align-items: center; + height: 2.75rem; } .catalog-item button:first-child { @@ -145,6 +185,7 @@ width: auto; display: flex; align-items: center; + height: 100%; } .item-text { @@ -152,42 +193,59 @@ flex-direction: column; text-align: left; line-height: 1.2; + gap: 0.0625rem; + overflow: hidden; } .best-ref { - font-size: 0.625rem; - color: #999; + font-size: 0.75rem; + color: var(--text-secondary); + font-weight: 400; } .ref-link { - width: 2.5rem; + width: 2.75rem; + flex-shrink: 0; + height: 2.75rem; + aspect-ratio: 1; display: flex; align-items: center; justify-content: center; - border: 1px solid #e0e0e0; - border-radius: 0.5rem; - background: #fff; - color: #333; + border-radius: 0.75rem; + background: var(--surface); + color: var(--text-secondary); text-decoration: none; font-size: 1rem; - transition: background 0.15s; + transition: all 0.2s ease; + box-shadow: 0 1px 2px var(--shadow); } .ref-link:hover { - background: #f5f5f5; + background: #fff8f5; + color: var(--accent); + box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); + transform: translateY(-1px); } .empty { - color: #999; - font-size: 0.875rem; - margin-top: 0.5rem; + color: var(--text-secondary); + font-size: 0.9375rem; + margin-top: 1rem; + text-align: center; + padding: 2rem; + background: var(--surface); + border-radius: 0.75rem; + box-shadow: 0 1px 2px var(--shadow); } .category-name { font-size: 0.75rem; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - color: #999; - margin: 1rem 0 0.25rem; + letter-spacing: 0.08em; + color: var(--accent); + margin: 1.25rem 0 0.5rem; + padding-left: 0.5rem; + border-left: 3px solid var(--accent); } </style> |