zaphar/kitchen
1
0
Fork 0
mirror of https://github.com/zaphar/kitchen.git synced 2025-07-21 19:29:49 -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>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" name="viewport"
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">
</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());
view! {
h1 { "Recipe List" }
Indexed(IndexedProps{
iterable: menu_list,
template: |(idx, _count)| {
console_log!("Rendering recipe index: {}", idx);
let idx = Signal::new(idx);
view ! {
Recipe(idx.handle())
hr()
div() {
Indexed(IndexedProps{
iterable: menu_list,
template: |(idx, _count)| {
console_log!("Rendering recipe index: {}", idx);
let idx = Signal::new(idx);
view ! {
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 count = Signal::new(format!("{}", app_service.get_recipe_count_by_index(i)));
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 |_| {
let mut app_service = app_service.clone();
console_log!("setting recipe id: {} to count: {}", i, *count.get());
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! {
fieldset(class="recipe_selector no-print container no-left-mgn pad-top") {
fieldset(class="recipe_selector no-print") {
(View::new_fragment(
rows.get().iter().cloned().map(|r| {
view ! {
div(class="row") {Indexed(IndexedProps{
div(class="grid") {Indexed(IndexedProps{
iterable: r.handle(),
template: |(i, recipe)| {
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 || {
if ingredients.get().len() > 0 {
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 {
th { " Quantity " }
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();
view! {
tr {
td { input(bind:value=amt.clone(), class="ingredient-count-sel", type="text") }
td {input(type="button", class="no-print", value="X", on:click=cloned!((filtered_keys) => move |_| {
let mut keyset = (*filtered_keys.get()).clone();
keyset.insert(k.clone());
filtered_keys.set(keyset);
})) " " (name) " " (form) "" }
td {
input(bind:value=amt.clone(), type="text")
input(type="button", class="no-print destructive", value="X", on:click=cloned!((filtered_keys) => move |_| {
let mut keyset = (*filtered_keys.get()).clone();
keyset.insert(k.clone());
filtered_keys.set(keyset);
}))
}
td { (name) " " (form) }
td { (names) }
}
}
@ -79,12 +82,12 @@ pub fn shopping_list() -> View<G> {
// TODO(jwall): Sort by categories and names.
view! {
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 |_| {
ingredients_map.set(app_service.get_shopping_list());
// clear the filter_signal
filtered_keys.set(HashSet::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>)]
pub fn tabbed_view(state: TabState<G>) -> View<G> {
cloned!((state) => view! {
div(class="nav-header no-print") {
a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Plan);
})) { "Plan" }
" | "
a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Inventory);
})) { "Inventory" }
" | "
a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Cook);
})) { "Cook" }
header(class="no-print margin-medium") {
nav {
ul {
li { a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Plan);
})) { "Plan" } " > "
}
li { a(href="#", class="no-print", on:click=cloned!((state) => move |_| {
state.route.set(AppRoutes::Inventory);
})) { "Inventory" } " > "
}
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)
}
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.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::app_state::AppRoutes;
use crate::components::{shopping_list::*, tabs::*};
use crate::pages::PageState;
@ -24,17 +23,11 @@ pub struct InventoryPageProps {
#[component(InventoryPage<G>)]
pub fn inventory_page(props: InventoryPageProps) -> View<G> {
let route_signal = props.page_state.route.clone();
view! {
TabbedView(TabState {
route: props.page_state.route.clone(),
inner: view! {
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.
// See the License for the specific language governing permissions and
// limitations under the License.
use crate::app_state::AppRoutes;
use crate::components::{recipe_selector::*, tabs::*};
use crate::pages::PageState;
@ -24,17 +23,11 @@ pub struct PlanPageProps {
#[component(PlanPage<G>)]
pub fn plan_page(props: PlanPageProps) -> View<G> {
let route_signal = props.page_state.route.clone();
view! {
TabbedView(TabState {
route: props.page_state.route.clone(),
inner: view! {
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 {
width: 6em;
width: 15em !important;
}
.destructive {
background-color: firebrick !important;
}
.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