From 94e1987f09f83aa2bcc502f2732623f03ba5cf81 Mon Sep 17 00:00:00 2001 From: Jeremy Wall Date: Sat, 23 Dec 2023 14:28:18 -0600 Subject: [PATCH] ui: more layout tweaks --- web/src/components/categories.rs | 2 +- web/src/components/plan_list.rs | 23 ++++++++----------- web/src/components/shopping_list.rs | 8 +++---- web/src/components/tabs.rs | 6 ++--- web/src/routing/mod.rs | 6 ++--- web/static/app.css | 34 +++++++++++++++++++++++++++++ 6 files changed, 53 insertions(+), 26 deletions(-) diff --git a/web/src/components/categories.rs b/web/src/components/categories.rs index f792067..06aa8db 100644 --- a/web/src/components/categories.rs +++ b/web/src/components/categories.rs @@ -49,7 +49,7 @@ fn CategoryRow<'ctx, G: Html>(cx: Scope<'ctx>, props: CategoryRowProps<'ctx>) -> }); view! {cx, tr() { - td() { + td(class="margin-bot-1 border-bottom") { (ingredient_clone) br() Indexed( iterable=recipes, diff --git a/web/src/components/plan_list.rs b/web/src/components/plan_list.rs index 1e44bca..a083cbc 100644 --- a/web/src/components/plan_list.rs +++ b/web/src/components/plan_list.rs @@ -1,4 +1,3 @@ -use chrono::NaiveDate; // Copyright 2023 Jeremy Wall (Jeremy@marzhilsltudios.com) // // Licensed under the Apache License, Version 2.0 (the "License"); @@ -13,6 +12,7 @@ use chrono::NaiveDate; // See the License for the specific language governing permissions and // limitations under the License. use sycamore::prelude::*; +use chrono::NaiveDate; use crate::app_state::{Message, StateHandler}; use tracing::instrument; @@ -23,30 +23,25 @@ pub struct PlanListProps<'ctx> { list: &'ctx ReadSignal>, } -// TODO(jwall): We also need a "new plan button" #[instrument(skip_all, fields(dates=?props.list))] #[component] pub fn PlanList<'ctx, G: Html>(cx: Scope<'ctx>, props: PlanListProps<'ctx>) -> View { let PlanListProps { sh, list } = props; view! {cx, div() { - table() { + div(class="column-flex") { Indexed( iterable=list, view=move |cx, date| { let date_display = format!("{}", date); view!{cx, - tr() { - td() { - button(class="outline", on:click=move |_| { - sh.dispatch(cx, Message::SelectPlanDate(date, None)) - }) { (date_display) } - } - td() { - button(class="destructive", on:click=move |_| { - sh.dispatch(cx, Message::DeletePlan(date, None)) - }) { "Delete Plan" } - } + div(class="row-flex margin-bot-half") { + button(class="outline margin-right-1", on:click=move |_| { + sh.dispatch(cx, Message::SelectPlanDate(date, None)) + }) { (date_display) } + button(class="destructive", on:click=move |_| { + sh.dispatch(cx, Message::DeletePlan(date, None)) + }) { "Delete Plan" } } } }, diff --git a/web/src/components/shopping_list.rs b/web/src/components/shopping_list.rs index b59cb71..b0ea1e8 100644 --- a/web/src/components/shopping_list.rs +++ b/web/src/components/shopping_list.rs @@ -109,12 +109,12 @@ fn make_ingredients_rows<'ctx, G: Html>( view! {cx, tr { td { - input(bind:value=amt_signal, type="text", on:change=move |_| { + input(bind:value=amt_signal, class="width-5", type="text", on:change=move |_| { sh.dispatch(cx, Message::UpdateAmt(k_clone.clone(), amt_signal.get_untracked().as_ref().clone())); }) } td { - input(type="button", class="no-print destructive", value="X", on:click={ + input(type="button", class="fit-content no-print destructive", value="X", on:click={ move |_| { sh.dispatch(cx, Message::AddFilteredIngredient(k.clone())); }}) @@ -143,14 +143,14 @@ fn make_extras_rows<'ctx, G: Html>(cx: Scope<'ctx>, sh: StateHandler<'ctx>) -> V view! {cx, tr { td { - input(bind:value=amt_signal, type="text", on:change=move |_| { + input(bind:value=amt_signal, class="width-5", type="text", on:change=move |_| { sh.dispatch(cx, Message::UpdateExtra(idx, amt_signal.get_untracked().as_ref().clone(), name_signal.get_untracked().as_ref().clone())); }) } td { - input(type="button", class="no-print destructive", value="X", on:click=move |_| { + input(type="button", class="fit-content no-print destructive", value="X", on:click=move |_| { sh.dispatch(cx, Message::RemoveExtra(idx)); }) } diff --git a/web/src/components/tabs.rs b/web/src/components/tabs.rs index e327b3c..6b38811 100644 --- a/web/src/components/tabs.rs +++ b/web/src/components/tabs.rs @@ -47,12 +47,12 @@ pub fn TabbedView<'a, G: Html>(cx: Scope<'a>, state: TabState<'a, G>) -> View .collect(), ); view! {cx, - nav(class="menu-bg expand-height menu-font") { - ul(class="tabs pad-left no-list") { + nav(class="menu-bg menu-font-2 flex-item-shrink") { + ul(class="tabs pad-left no-list row-flex align-center") { (menu) } } - main(class="content-font") { + main(class="flex-item-grow content-font") { (children) } } diff --git a/web/src/routing/mod.rs b/web/src/routing/mod.rs index 1bd2033..cef073d 100644 --- a/web/src/routing/mod.rs +++ b/web/src/routing/mod.rs @@ -136,11 +136,9 @@ pub fn Handler<'ctx, G: Html>(cx: Scope<'ctx>, props: HandlerProps<'ctx>) -> Vie integration=HistoryIntegration::new(), view=move |cx: Scope, route: &ReadSignal| { view!{cx, - div { + div(class="column-flex") { Header(sh) - div(class="app row-flex flex-item-grow expand-height align-stretch") { - (route_switch(route.get().as_ref(), cx, sh)) - } + (route_switch(route.get().as_ref(), cx, sh)) } } }, diff --git a/web/static/app.css b/web/static/app.css index 5d81b9a..f31b032 100644 --- a/web/static/app.css +++ b/web/static/app.css @@ -133,12 +133,46 @@ a { list-style-type: none; } +.fit-content { + width: fit-content; +} + +.width-10 { + width: 10em; +} + +.width-5 { + width: 5em; +} + +.border-bottom { + border-bottom-style: solid; + border-bottom-color: var(--tab-border-color); + border-bottom-width: var(--tab-border-width); +} + +.margin-bot-1 { + margin-bottom: 1em; +} + +.margin-bot-half { + margin-bottom: .5em; +} + +.margin-right-1 { + margin-right: 1em; +} + /** Typography classes **/ .menu-font { font-size: var(--menu-font-size); } +.menu-font-2 { + font-size: calc(var(--menu-font-size) / 1.5); +} + .content-font { font-size: 1.5em; }