diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 154 |
1 files changed, 22 insertions, 132 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3dcd3bc..2392790 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,4 @@ <script lang="ts"> - import '../app.css'; import { enhance } from '$app/forms'; let { data, form } = $props(); @@ -19,6 +18,7 @@ <form class="add-bar" method="POST" action="?/add" use:enhance> <input + class="form-input" type="text" name="name" bind:value={name} @@ -26,7 +26,9 @@ autocomplete="off" /> <button type="submit" aria-label="Ajouter">+</button> - <button type="submit" formaction="?/addAndEdit" aria-label="Modifier">→</button> + <button type="submit" formaction="?/addAndEdit" aria-label="Modifier" + >→</button + > </form> {#if form?.error} @@ -41,20 +43,26 @@ <h3 class="category-name">{cat}</h3> <ul class="item-list"> {#each items as item (item.id)} - <li class="catalog-item"> - <button name="id" value={item.id} type="submit"> + <li class="item-row item-row--fixed"> + <button + class="item-btn item-btn--grow" + name="id" + value={item.id} + type="submit" + aria-pressed={item.checked} + > <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} - {#if item.bestRef.qualityScore != null} - ({item.bestRef.qualityScore}/100) - {/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> @@ -77,22 +85,9 @@ z-index: 10; } - input { + .add-bar input { flex: 1; - padding: 0.75rem 1rem; - border: 1.5px solid var(--border); - border-radius: 0.75rem; - font-size: 1rem; - font-family: inherit; 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 { @@ -136,116 +131,11 @@ } .error { - 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.375rem; - } - - .item-list li button { - width: 100%; - 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); - } - - .item-list li button:hover { - background: #fff8f5; - box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); - transform: translateY(-1px); - } - - .catalog-item { - display: flex; - gap: 0.5rem; - align-items: center; - height: 2.75rem; - } - - .catalog-item button:first-child { - flex-grow: 1; - width: auto; - display: flex; - align-items: center; - height: 100%; - } - - .item-text { - display: flex; - flex-direction: column; - text-align: left; - line-height: 1.2; - gap: 0.0625rem; - overflow: hidden; - } - - .best-ref { - font-size: 0.75rem; - color: var(--text-secondary); - font-weight: 400; - } - - .ref-link { - 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); - } - - .ref-link:hover { - background: #fff8f5; - color: var(--accent); - box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1); - transform: translateY(-1px); } .empty { - 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: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--accent); - margin: 1.25rem 0 0.5rem; - padding-left: 0.5rem; - border-left: 3px solid var(--accent); } </style> |