From d8a01737e9cd1d431e8012493438e4a6febde48d Mon Sep 17 00:00:00 2001 From: marcantoinem <marc-antoine.m@outlook.com> Date: Wed, 31 Jul 2024 06:33:10 -0400 Subject: [PATCH] fix: mobile view not showing with refactor of schedule generation call --- .../src/frontend/components/schedules.rs | 4 +--- aep-schedule-website/src/frontend/pages/generator.rs | 9 +++++---- aep-schedule-website/src/frontend/state/mod.rs | 8 +++++++- aep-schedule-website/style/main.scss | 3 ++- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/aep-schedule-website/src/frontend/components/schedules.rs b/aep-schedule-website/src/frontend/components/schedules.rs index be07f72..a1cc9ed 100644 --- a/aep-schedule-website/src/frontend/components/schedules.rs +++ b/aep-schedule-website/src/frontend/components/schedules.rs @@ -1,7 +1,6 @@ use std::rc::Rc; use crate::frontend::components::options::todo::Todo; -use crate::frontend::pages::generator::FirstGenerationDone; use crate::frontend::state::OptionState; use crate::{backend::routes::get_calendar, frontend::components::schedule::ScheduleComponent}; use leptos::*; @@ -9,13 +8,12 @@ use leptos::*; #[component] pub fn SchedulesComponent() -> impl IntoView { let state = OptionState::from_context(); - let first_generation_done: FirstGenerationDone = use_context().unwrap(); view! { <Await future=get_calendar children=move |calendar| { - match state.step.get() == 5 && first_generation_done.0.get() { + match state.step.get() == 6 { true => { let calendar = Rc::new(calendar.clone().unwrap()); view !{ diff --git a/aep-schedule-website/src/frontend/pages/generator.rs b/aep-schedule-website/src/frontend/pages/generator.rs index 9c5228e..da2b3b1 100644 --- a/aep-schedule-website/src/frontend/pages/generator.rs +++ b/aep-schedule-website/src/frontend/pages/generator.rs @@ -19,7 +19,6 @@ pub struct FirstGenerationDone(pub RwSignal<bool>); #[component] pub fn GeneratorPage() -> impl IntoView { - let (hide, set_hide) = create_signal(false); let first_generation_done = create_rw_signal(false); let (modal, set_modal) = create_signal(None); let state = OptionState::default(); @@ -29,7 +28,7 @@ pub fn GeneratorPage() -> impl IntoView { provide_context(FirstGenerationDone(first_generation_done)); view! { - <aside class="left-panel" class=("hide-left-panel", hide)> + <aside class="left-panel" class=("hide-left-panel", state.hide)> <OptionsForms/> </aside> <section class="right-panel" on:scroll=move |ev| { @@ -41,7 +40,9 @@ pub fn GeneratorPage() -> impl IntoView { .dyn_into::<web_sys::Element>() .unwrap(); let scroll_top = target.scroll_top() as f64; - if (scroll_top + target.client_height() as f64 >= target.scroll_height() as f64 - 500.0) && state.step.get() == 5 { + let client_height = target.client_height() as f64; + let scroll_height = target.scroll_height() as f64; + if (scroll_top + client_height >= scroll_height - 500.0) && state.step.get() == 6 { state.regenerate(); } @@ -49,6 +50,6 @@ pub fn GeneratorPage() -> impl IntoView { <SchedulesComponent/> </section> <Notifications modal set_modal/> - <button on:click=move |_| {set_hide(false)} id="go-back"><CaretDoubleRight weight=IconWeight::Regular size="3vh"/></button> + <button on:click=move |_| {state.hide.set(false)} id="go-back"><CaretDoubleRight weight=IconWeight::Regular size="3vh"/></button> } } diff --git a/aep-schedule-website/src/frontend/state/mod.rs b/aep-schedule-website/src/frontend/state/mod.rs index ede69bf..7ba4287 100644 --- a/aep-schedule-website/src/frontend/state/mod.rs +++ b/aep-schedule-website/src/frontend/state/mod.rs @@ -66,13 +66,19 @@ impl OptionState { return; } self.personal_error.set("".to_string()); - self.step.set(5); + self.step.update(|v| { + if *v != 6 { + *v = 5 + } + }); } pub fn generate(&self) { self.max_size .update_value(|v| v.store(8, Ordering::Relaxed)); + self.hide.set(true); self.gen(); + self.step.set(6); } pub fn regenerate(&self) { diff --git a/aep-schedule-website/style/main.scss b/aep-schedule-website/style/main.scss index 9c2943d..d70311a 100644 --- a/aep-schedule-website/style/main.scss +++ b/aep-schedule-website/style/main.scss @@ -115,10 +115,12 @@ main { .right-panel { @media screen and (max-width: 1000px) { width: 100%; + max-height: calc(100vh); } @media screen and (min-width: 1000px) { width: 58%; + max-height: calc(100vh - 3em); } box-sizing: border-box; @@ -126,7 +128,6 @@ main { flex-direction: column; align-items: center; overflow-y: auto; - max-height: calc(100vh - 3em); gap: 3rem; padding: 1rem; background-color: $light-background; -- GitLab