ui: more layout tweaks

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,

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,32 +23,27 @@ pub struct PlanListProps<'ctx> {
     list: &'ctx ReadSignal<Vec<NaiveDate>>,
 }
 
-// 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<G> {
     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() {
+                            div(class="row-flex margin-bot-half") {
-                                td() {
+                                button(class="outline margin-right-1", on:click=move |_| {
-                                    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" }
                             }
                         }
-                        }
                     },
                 )
             }

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));
                             })
                         }

web/src/components/tabs.rs

@@ -47,12 +47,12 @@ pub fn TabbedView<'a, G: Html>(cx: Scope<'a>, state: TabState<'a, G>) -> View<G>
             .collect(),
     );
     view! {cx,
-        nav(class="menu-bg expand-height menu-font") {
+        nav(class="menu-bg menu-font-2 flex-item-shrink") {
-            ul(class="tabs pad-left no-list") {
+            ul(class="tabs pad-left no-list row-flex align-center") {
                 (menu)
             }
         }
-        main(class="content-font") {
+        main(class="flex-item-grow content-font") {
             (children)
         }
     }

web/src/routing/mod.rs

@@ -136,13 +136,11 @@ pub fn Handler<'ctx, G: Html>(cx: Scope<'ctx>, props: HandlerProps<'ctx>) -> Vie
             integration=HistoryIntegration::new(),
             view=move |cx: Scope, route: &ReadSignal<Routes>| {
                 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))
                   }
                 }
-                }
             },
         )
     }

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;
 }