zaphar/kitchen
1
0
Fork 0
mirror of https://github.com/zaphar/kitchen.git synced 2025-07-22 19:40:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

A bunch of css/ui changes

Browse Source 
Smaller css, more semantic html, more consistent button placement.

fixes #8
This commit is contained in:
Jeremy Wall 2022-03-23 20:26:58 -04:00
parent fbd4aeb59c
commit e3039fb34c
11 changed files with 59 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/index.html
View File

@ -19,7 +19,7 @@
<head> <head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" name="viewport" <meta content="text/html;charset=utf-8" http-equiv="Content-Type" name="viewport"
content="width=device-width, initial-scale=1.0" charset="UTF-8"> content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link data-trunk rel="inline" type="css" href="static/bootstrap.3.4.1.min.css"> <link data-trunk rel="inline" type="css" href="static/pico.min.css">
<link data-trunk rel="inline" type="css" , href="static/app.css"> <link data-trunk rel="inline" type="css" , href="static/app.css">
</head> </head>

22
web/src/components/recipe_list.rs
View File

@ -22,16 +22,18 @@ pub fn recipe_list() -> View<G> {
let menu_list = create_memo(move || app_service.get_menu_list()); let menu_list = create_memo(move || app_service.get_menu_list());
view! { view! {
h1 { "Recipe List" } h1 { "Recipe List" }
Indexed(IndexedProps{ div() {
iterable: menu_list, Indexed(IndexedProps{
template: |(idx, _count)| { iterable: menu_list,
console_log!("Rendering recipe index: {}", idx); template: |(idx, _count)| {
let idx = Signal::new(idx); console_log!("Rendering recipe index: {}", idx);
view ! { let idx = Signal::new(idx);
Recipe(idx.handle()) view ! {
hr() Recipe(idx.handle())
hr()
}
} }
} })
}) }
} }
} }

4
web/src/components/recipe_selection.rs
View File

@ -32,13 +32,13 @@ pub fn recipe_selection(props: RecipeCheckBoxProps) -> View<G> {
let id_cloned_2 = id_as_str.clone(); let id_cloned_2 = id_as_str.clone();
let count = Signal::new(format!("{}", app_service.get_recipe_count_by_index(i))); let count = Signal::new(format!("{}", app_service.get_recipe_count_by_index(i)));
view! { view! {
div(class="form-group col-md-1") { div() {
label(for=id_cloned_2) { (props.title.get()) }
input(type="number", class="item-count-sel", min="0", bind:value=count.clone(), name=format!("recipe_id:{}", i), value=id_as_str.clone(), on:change=move |_| { input(type="number", class="item-count-sel", min="0", bind:value=count.clone(), name=format!("recipe_id:{}", i), value=id_as_str.clone(), on:change=move |_| {
let mut app_service = app_service.clone(); let mut app_service = app_service.clone();
console_log!("setting recipe id: {} to count: {}", i, *count.get()); console_log!("setting recipe id: {} to count: {}", i, *count.get());
app_service.set_recipe_count_by_index(i, count.get().parse().unwrap()); app_service.set_recipe_count_by_index(i, count.get().parse().unwrap());
}) })
label(for=id_cloned_2) { (props.title.get()) }
} }
} }
} }

4
web/src/components/recipe_selector.rs
View File

@ -39,11 +39,11 @@ pub fn recipe_selector() -> View<G> {
})); }));
})); }));
view! { view! {
fieldset(class="recipe_selector no-print container no-left-mgn pad-top") { fieldset(class="recipe_selector no-print") {
(View::new_fragment( (View::new_fragment(
rows.get().iter().cloned().map(|r| { rows.get().iter().cloned().map(|r| {
view ! { view ! {
div(class="row") {Indexed(IndexedProps{ div(class="grid") {Indexed(IndexedProps{
iterable: r.handle(), iterable: r.handle(),
template: |(i, recipe)| { template: |(i, recipe)| {
view! { view! {

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

@ -40,7 +40,7 @@ pub fn shopping_list() -> View<G> {
cloned!((table_view, ingredients, filtered_keys, modified_amts) => move || { cloned!((table_view, ingredients, filtered_keys, modified_amts) => move || {
if ingredients.get().len() > 0 { if ingredients.get().len() > 0 {
let t = view ! { let t = view ! {
table(class="pad-top shopping-list page-breaker table table-striped table-condensed table-responsive") { table(class="pad-top shopping-list page-breaker container-fluid", role="grid") {
tr { tr {
th { " Quantity " } th { " Quantity " }
th { " Ingredient " } th { " Ingredient " }
@ -57,12 +57,15 @@ pub fn shopping_list() -> View<G> {
let names = rs.iter().fold(String::new(), |acc, s| format!("{}{},", acc, s)).trim_end_matches(",").to_owned(); let names = rs.iter().fold(String::new(), |acc, s| format!("{}{},", acc, s)).trim_end_matches(",").to_owned();
view! { view! {
tr { tr {
td { input(bind:value=amt.clone(), class="ingredient-count-sel", type="text") } td {
td {input(type="button", class="no-print", value="X", on:click=cloned!((filtered_keys) => move |_| { input(bind:value=amt.clone(), type="text")
let mut keyset = (*filtered_keys.get()).clone(); input(type="button", class="no-print destructive", value="X", on:click=cloned!((filtered_keys) => move |_| {
keyset.insert(k.clone()); let mut keyset = (*filtered_keys.get()).clone();
filtered_keys.set(keyset); keyset.insert(k.clone());
})) " " (name) " " (form) "" } filtered_keys.set(keyset);
}))
}
td { (name) " " (form) }
td { (names) } td { (names) }
} }
} }
@ -79,12 +82,12 @@ pub fn shopping_list() -> View<G> {
// TODO(jwall): Sort by categories and names. // TODO(jwall): Sort by categories and names.
view! { view! {
h1 { "Shopping List " } h1 { "Shopping List " }
(table_view.get().as_ref().clone())
input(type="button", value="Reset", class="no-print", on:click=cloned!((ingredients_map, filtered_keys, app_service, modified_amts) => move |_| { input(type="button", value="Reset", class="no-print", on:click=cloned!((ingredients_map, filtered_keys, app_service, modified_amts) => move |_| {
ingredients_map.set(app_service.get_shopping_list()); ingredients_map.set(app_service.get_shopping_list());
// clear the filter_signal // clear the filter_signal
filtered_keys.set(HashSet::new()); filtered_keys.set(HashSet::new());
modified_amts.set(HashMap::new()); modified_amts.set(HashMap::new());
})) }))
(table_view.get().as_ref().clone())
} }
} }

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

@ -24,24 +24,29 @@ pub struct TabState<G: GenericNode> {
#[component(TabbedView<G>)] #[component(TabbedView<G>)]
pub fn tabbed_view(state: TabState<G>) -> View<G> { pub fn tabbed_view(state: TabState<G>) -> View<G> {
cloned!((state) => view! { cloned!((state) => view! {
div(class="nav-header no-print") { header(class="no-print margin-medium") {
a(href="#", class="no-print", on:click=cloned!((state) => move |_| { nav {
state.route.set(AppRoutes::Plan); ul {
})) { "Plan" } li { a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
" | " state.route.set(AppRoutes::Plan);
a(href="#", class="no-print", on:click=cloned!((state) => move |_| { })) { "Plan" } " > "
state.route.set(AppRoutes::Inventory); }
})) { "Inventory" } li { a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
" | " state.route.set(AppRoutes::Inventory);
a(href="#", class="no-print", on:click=cloned!((state) => move |_| { })) { "Inventory" } " > "
state.route.set(AppRoutes::Cook); }
})) { "Cook" } li { a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Cook);
})) { "Cook" }
}
}
ul {
li { a(href="https://github.com/zaphar/kitchen") { "Github" } }
}
}
} }
div { main(class=".conatiner-fluid") {
(state.inner) (state.inner)
} }
div(class="footer") {
a(href="https://github.com/zaphar/kitchen") { "Github" }
}
}) })
} }

7
web/src/pages/inventory.rs
View File

@ -11,7 +11,6 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
use crate::app_state::AppRoutes;
use crate::components::{shopping_list::*, tabs::*}; use crate::components::{shopping_list::*, tabs::*};
use crate::pages::PageState; use crate::pages::PageState;
@ -24,17 +23,11 @@ pub struct InventoryPageProps {
#[component(InventoryPage<G>)] #[component(InventoryPage<G>)]
pub fn inventory_page(props: InventoryPageProps) -> View<G> { pub fn inventory_page(props: InventoryPageProps) -> View<G> {
let route_signal = props.page_state.route.clone();
view! { view! {
TabbedView(TabState { TabbedView(TabState {
route: props.page_state.route.clone(), route: props.page_state.route.clone(),
inner: view! { inner: view! {
ShoppingList() ShoppingList()
div {
a(href="#", on:click=move |_| {
route_signal.set(AppRoutes::Cook);
}) { "Next" }
}
}, },
}) })
} }

7
web/src/pages/plan.rs
View File

@ -11,7 +11,6 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
use crate::app_state::AppRoutes;
use crate::components::{recipe_selector::*, tabs::*}; use crate::components::{recipe_selector::*, tabs::*};
use crate::pages::PageState; use crate::pages::PageState;
@ -24,17 +23,11 @@ pub struct PlanPageProps {
#[component(PlanPage<G>)] #[component(PlanPage<G>)]
pub fn plan_page(props: PlanPageProps) -> View<G> { pub fn plan_page(props: PlanPageProps) -> View<G> {
let route_signal = props.page_state.route.clone();
view! { view! {
TabbedView(TabState { TabbedView(TabState {
route: props.page_state.route.clone(), route: props.page_state.route.clone(),
inner: view! { inner: view! {
RecipeSelector() RecipeSelector()
div {
a(href="#", on:click=move |_| {
route_signal.set(AppRoutes::Inventory);
}) { "Next" }
}
}, },
}) })
} }

6
web/static/app.css
View File

@ -29,7 +29,11 @@
} }
.ingredient-count-sel { .ingredient-count-sel {
width: 6em; width: 15em !important;
}
.destructive {
background-color: firebrick !important;
} }
.no-left-mgn { .no-left-mgn {

6
web/static/bootstrap.3.4.1.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
web/static/pico.min.css vendored Executable file
View File

File diff suppressed because one or more lines are too long