mirror of
https://github.com/zaphar/kitchen.git
synced 2025-07-21 19:29:49 -04:00
ui: more layout tweaks
This commit is contained in:
parent
a104ef5f47
commit
94e1987f09
@ -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,
|
||||
|
@ -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" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -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));
|
||||
})
|
||||
}
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
@ -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))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user