style updates
This commit is contained in:
+16
-16
@@ -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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+8
-1
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%2355715d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 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; }
|
||||
|
||||
Reference in New Issue
Block a user