zaphar/kitchen
1
0
Fork 0
mirror of https://github.com/zaphar/kitchen.git synced 2025-07-25 20:09:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui: more layout tweaks

Browse Source
This commit is contained in:
Jeremy Wall 2023-12-23 14:28:18 -06:00
parent a104ef5f47
commit 94e1987f09
6 changed files with 53 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/categories.rs
View File

@ -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,

23
web/src/components/plan_list.rs
View File

@ -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<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() {
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" }
}
}
},

8
web/src/components/shopping_list.rs
View File

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

6
web/src/components/tabs.rs
View File

@ -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") {
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)
}
}

6
web/src/routing/mod.rs
View File

@ -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<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))
}
(route_switch(route.get().as_ref(), cx, sh))
}
}
},

34
web/static/app.css
View File

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