From fdbf40adac614d3dcfb401eee532088f90f16c21 Mon Sep 17 00:00:00 2001 From: Simon Bernier St-Pierre Date: Mon, 3 Aug 2026 14:58:10 -0400 Subject: [PATCH] style updates --- src/views.rs | 32 ++++++++++++++++---------------- static/style.css | 9 ++++++++- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/views.rs b/src/views.rs index 21b1c06..6571b0d 100644 --- a/src/views.rs +++ b/src/views.rs @@ -390,7 +390,7 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token: } @else { div class="markdown" { (render_markdown(&meal.description)) } } - h2 class="category-heading" { "Ingredients" } + hr class="ingredients-divider" {} @if meal.ingredients.is_empty() { p class="muted" { "No ingredients yet." } } @else { @@ -408,14 +408,14 @@ pub fn meal_page(user: &User, meal: &Meal, categories: &[Category], csrf_token: input type="hidden" name="csrf" value=(csrf_token); label { "Name" } input id="ingredient-name" name="name" type="text" maxlength="120" required; - label { "Quantity" } - input id="ingredient-quantity" name="quantity" type="text" maxlength="40"; - label { "Note" } - input id="ingredient-note" name="note" type="text" maxlength="120"; label { "Category" } select id="ingredient-category" name="category_id" { (category_options(categories, None)) } + label { "Quantity" } + input id="ingredient-quantity" name="quantity" type="text" maxlength="40"; + label { "Note" } + input id="ingredient-note" name="note" type="text" maxlength="120"; button id="add-ingredient-button" class="button button-primary" type="submit" { "Add ingredient" } } } @@ -457,19 +457,19 @@ fn ingredient_row( input type="hidden" name="csrf" value=(csrf_token); label { "Name" } input id=(format!("ingredient-edit-name-{}", ingredient.id)) name="name" value=(ingredient.name) maxlength="120" required; - label { "Quantity" } - input id=(format!("ingredient-edit-quantity-{}", ingredient.id)) name="quantity" value=(ingredient.quantity) maxlength="40"; - label { "Note" } - input id=(format!("ingredient-edit-note-{}", ingredient.id)) name="note" value=(ingredient.note) maxlength="120"; label { "Category" } select id=(format!("ingredient-edit-category-{}", ingredient.id)) name="category_id" { (category_options(categories, ingredient.category_id)) } + label { "Quantity" } + input id=(format!("ingredient-edit-quantity-{}", ingredient.id)) name="quantity" value=(ingredient.quantity) maxlength="40"; + label { "Note" } + input id=(format!("ingredient-edit-note-{}", ingredient.id)) name="note" value=(ingredient.note) maxlength="120"; button id=(format!("ingredient-edit-save-{}", ingredient.id)) class="button button-primary" type="submit" { "Save" } } form method="post" action=(format!("/meals/{}/ingredients/{}/delete", meal_id, ingredient.id)) { input type="hidden" name="csrf" value=(csrf_token); - button id=(format!("ingredient-edit-delete-{}", ingredient.id)) class="danger-link" type="submit" { "Remove" } + button id=(format!("ingredient-edit-delete-{}", ingredient.id)) class="button button-danger" type="submit" { "Remove" } } } } @@ -638,10 +638,10 @@ fn list_content( input type="hidden" name="csrf" value=(csrf_token); label class="sr-only" for="item-name" { "Item name" } input id="item-name" name="name" type="text" maxlength="120" placeholder="Add an item..." autocomplete="off" required; - input id="item-quantity" name="quantity" type="text" maxlength="40" placeholder="Qty" aria-label="Quantity"; select id="item-category" name="category_id" aria-label="Category" { (category_options(categories, None)) } + input id="item-quantity" name="quantity" type="text" maxlength="40" placeholder="Qty" aria-label="Quantity"; button id="add-item-button" class="button button-primary add-button" type="submit" { "+ Add" } } (list_items_fragment(list, items, categories, csrf_token, false)) @@ -767,14 +767,14 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str) -> Markup { input type="hidden" name="csrf" value=(csrf_token); label { "Name" } input id=(format!("item-edit-name-{}", item.id)) name="name" value=(item.name) maxlength="120" required; - label { "Quantity" } - input id=(format!("item-edit-quantity-{}", item.id)) name="quantity" value=(item.quantity) maxlength="40"; - label { "Note" } - input id=(format!("item-edit-note-{}", item.id)) name="note" value=(item.note) maxlength="120"; label { "Category" } select id=(format!("item-edit-category-{}", item.id)) name="category_id" { (category_options(categories, item.category_id)) } + label { "Quantity" } + input id=(format!("item-edit-quantity-{}", item.id)) name="quantity" value=(item.quantity) maxlength="40"; + label { "Note" } + input id=(format!("item-edit-note-{}", item.id)) name="note" value=(item.note) maxlength="120"; button id=(format!("item-edit-save-{}", item.id)) class="button button-primary" type="submit" { "Save" } } form @@ -783,7 +783,7 @@ fn item_row(item: &Item, categories: &[Category], csrf_token: &str) -> Markup { hx-swap="outerHTML" { input type="hidden" name="csrf" value=(csrf_token); - button id=(format!("item-edit-delete-{}", item.id)) class="danger-link" type="submit" { "Remove item" } + button id=(format!("item-edit-delete-{}", item.id)) class="button button-danger" type="submit" { "Remove item" } } } } diff --git a/static/style.css b/static/style.css index b8ae00e..7aea178 100644 --- a/static/style.css +++ b/static/style.css @@ -75,6 +75,10 @@ h3 { margin-bottom: 6px; font-size: 1rem; } .stack label { color: var(--muted); font-size: .82rem; font-weight: 700; } input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; } input:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); } +select { width: 100%; min-height: 46px; padding: 10px 34px 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; font: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; } +select:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); } +select option { color: var(--ink); background: #fff; } +select option:checked { color: var(--deep-sage); font-weight: 700; } textarea { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: none; color: var(--ink); background: #fff; font: inherit; resize: vertical; } textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 0; border-radius: 12px; cursor: pointer; text-decoration: none; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } @@ -127,7 +131,7 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, .list-heading { display: flex; justify-content: space-between; margin-bottom: 25px; } .list-heading h1 { max-width: 100%; margin-bottom: 5px; overflow-wrap: anywhere; font-size: clamp(1.45rem, 2.8vw, 2.05rem); } .list-meta { margin: 0; color: var(--muted); font-size: .85rem; } -.add-item-form { display: grid; grid-template-columns: minmax(0, 1fr) 90px 145px auto; gap: 8px; margin-bottom: 19px; } +.add-item-form { display: grid; grid-template-columns: minmax(0, 1fr) 145px 90px auto; gap: 8px; margin-bottom: 19px; } .add-item-form input { min-height: 50px; } .add-item-form select { min-height: 50px; } .add-button { min-height: 50px; } @@ -135,6 +139,7 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, .item-list { display: grid; gap: 6px; } .category-group + .category-group { margin-top: 18px; } .category-heading { margin: 0 7px 4px; color: var(--deep-sage); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } +.ingredients-divider { margin: 26px 0 18px; border: 0; border-top: 1px solid var(--line); } .item-row { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 9px 7px 9px 10px; border-bottom: 1px solid #edf0e6; } .item-row:last-child { border-bottom: 0; } .check-form { flex: 0 0 auto; } @@ -208,6 +213,8 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, .edit-form { margin-bottom: 12px; } .edit-form input { min-height: 38px; padding: 7px 10px; font-size: .85rem; } .danger-link { padding: 0; border: 0; color: var(--coral); background: none; cursor: pointer; font-size: .8rem; font-weight: 800; } +.button-danger { width: 100%; color: var(--coral); background: #fbeae4; } +.button-danger:hover { background: #f7ddd4; } .empty-items { padding: 34px 10px 18px; color: var(--muted); text-align: center; } .empty-items-icon { display: block; margin-bottom: 7px; color: var(--yellow); font-size: 1.7rem; } .empty-items p { margin-bottom: 2px; color: var(--ink); font-weight: 800; }