ITsolved/rezervovator
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI improvements - optimized for small screens, drawer now works properly, disabled scrolling when modal dialog is appeared.

Browse Source
This commit is contained in:
Josef Rokos
2023-11-21 18:15:25 +01:00
parent aa2c71af77
commit d7e33e4342
8 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin_portal.rs
+8 -3
View File
@@ -12,6 +12,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
let (user, set_user) = create_signal(User::default());
let editor = DialogOpener::new();
let pw_changer = DialogOpener::new();
let drawer = use_context::<MenuOpener>().expect("No drawer opener");
view! {
<div class="layout-wrapper layout-content-navbar">
@@ -20,7 +21,8 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
<div class="app-brand demo">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"
on:click = move |_| drawer.toggle()>
<i class="bx bx-chevron-left bx-sm align-middle"></i>
</a>
<img src="/rezervovator_l.svg" width="180"/>
@@ -30,7 +32,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
<ul class="menu-inner py-1">
//<!-- Dashboard -->
<li class="menu-item">
<a href="/admin" class="menu-link">
<a href="/admin" class="menu-link" on:click=move |_| drawer.close()>
<i class="menu-icon tf-icons bx bx-home-circle"></i>
<div data-i18n="Analytics">{trl("Dashboard")}</div>
</a>
@@ -63,7 +65,9 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)" on:click={
move |_| {drawer.toggle();}
}>
<i class="bx bx-menu bx-sm"></i>
</a>
</div>
@@ -109,6 +113,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
</div>
</div>
</div>
<div class="layout-overlay layout-menu-toggle"></div>
</div>
}
}
src/components/header.rs
+10 -1
View File
@@ -1,15 +1,21 @@
use leptos::*;
use leptos_meta::*;
use crate::app::DialogHelper;
use crate::components::user_menu::MenuOpener;
#[component]
pub fn Header() -> impl IntoView {
let drawer = use_context::<MenuOpener>().expect("No drawer opener");
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
view! {
<Html
lang="cz"
dir="ltr"
class = {move || if drawer.visible() {"light-style layout-menu-fixed layout-menu-expanded"}
else {"light-style layout-menu-fixed"} }
attributes=vec![
("data-theme", "theme-default".into_attribute()),
("class", "light-style layout-menu-fixed".into_attribute()),
("data-template", "vertical-menu-template-free".into_attribute()),
("data-assets-path", "/".into_attribute())]
/>
@@ -35,5 +41,8 @@ pub fn Header() -> impl IntoView {
//<!-- Vendors CSS -->
<Link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<Body attributes=vec![
("style", {move || if dlg_helper.is_open() {"overflow: hidden;"} else {""}}.into_attribute())
]/>
}
}
src/components/modal_box.rs
+5
View File
@@ -1,5 +1,6 @@
use crate::locales::trl;
use leptos::*;
use crate::app::DialogHelper;
use crate::validator::Validator;
#[derive(Copy, Clone)]
@@ -35,10 +36,14 @@ impl DialogOpener {
}
pub fn show(&self) {
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
dlg_helper.set_opened(true);
self.set_visible.update(|state| *state = true);
}
pub fn hide(&self) {
let dlg_helper = use_context::<DialogHelper>().expect("No dialog helper");
dlg_helper.set_opened(false);
self.set_visible.update(|state| *state = false);
self.set_empty.set("".to_string());
self.set_not_checked.set(None);