From d7e33e4342db2546ec83c7223a114912cf93f38c Mon Sep 17 00:00:00 2001
From: Josef Rokos <pepa@bukova.info>
Date: Tue, 21 Nov 2023 18:15:25 +0100
Subject: [PATCH] UI improvements - optimized for small screens, drawer now
 works properly, disabled scrolling when modal dialog is appeared.

---
 Cargo.lock                     | 87 ++++++++++++++++++++++++++++++++--
 Cargo.toml                     |  1 +
 assets/vendor/css/core.css     |  1 +
 src/app.rs                     | 24 ++++++++++
 src/components/admin_portal.rs | 11 +++--
 src/components/header.rs       | 11 ++++-
 src/components/modal_box.rs    |  5 ++
 src/pages/users.rs             | 11 +++--
 8 files changed, 140 insertions(+), 11 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 8bef0e2..8a7facb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -623,7 +623,7 @@ version = "0.18.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8245dd5f576a41c3b76247b54c15b0e43139ceeb4f732033e15be7c005176"
 dependencies = [
- "darling",
+ "darling 0.14.4",
  "proc-macro2",
  "quote",
  "syn 1.0.109",
@@ -906,8 +906,18 @@ version = "0.14.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7b750cb3417fd1b327431a470f388520309479ab0bf5e323505daf0290cd3850"
 dependencies = [
- "darling_core",
- "darling_macro",
+ "darling_core 0.14.4",
+ "darling_macro 0.14.4",
+]
+
+[[package]]
+name = "darling"
+version = "0.20.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0209d94da627ab5605dcccf08bb18afa5009cfbef48d8a8b7d7bdbc79be25c5e"
+dependencies = [
+ "darling_core 0.20.3",
+ "darling_macro 0.20.3",
 ]
 
 [[package]]
@@ -924,17 +934,54 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "darling_core"
+version = "0.20.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "177e3443818124b357d8e76f53be906d60937f0d3a90773a664fa63fa253e621"
+dependencies = [
+ "fnv",
+ "ident_case",
+ "proc-macro2",
+ "quote",
+ "strsim",
+ "syn 2.0.28",
+]
+
 [[package]]
 name = "darling_macro"
 version = "0.14.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a4aab4dbc9f7611d8b55048a3a16d2d010c2c8334e46304b40ac1cc14bf3b48e"
 dependencies = [
- "darling_core",
+ "darling_core 0.14.4",
  "quote",
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "darling_macro"
+version = "0.20.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5"
+dependencies = [
+ "darling_core 0.20.3",
+ "quote",
+ "syn 2.0.28",
+]
+
+[[package]]
+name = "default-struct-builder"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8fa90da96b8fd491f5754d1f7a731f73921e3b7aa0ce333c821a0e43666ac14"
+dependencies = [
+ "darling 0.20.3",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.28",
+]
+
 [[package]]
 name = "der"
 version = "0.7.8"
@@ -1289,6 +1336,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.1.7"
@@ -1699,6 +1758,25 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "leptos-use"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1932eb047df16a30da3af0019b209f80026f5581ed75f76b356ef2b8efcb835"
+dependencies = [
+ "cfg-if",
+ "default-struct-builder",
+ "futures-util",
+ "gloo-timers",
+ "js-sys",
+ "lazy_static",
+ "leptos",
+ "paste",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "leptos_actix"
 version = "0.5.2"
@@ -2568,6 +2646,7 @@ dependencies = [
  "getopts",
  "lazy_static",
  "leptos",
+ "leptos-use",
  "leptos_actix",
  "leptos_meta",
  "leptos_router",
diff --git a/Cargo.toml b/Cargo.toml
index d8fc8e1..8cdf2ba 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -32,6 +32,7 @@ toml = "0.8.8"
 log = "0.4.20"
 env_logger = "0.10.1"
 getopts = "0.2.21"
+leptos-use = "0.8.2"
 
 [features]
 csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
diff --git a/assets/vendor/css/core.css b/assets/vendor/css/core.css
index 48dd4cf..5f7f142 100644
--- a/assets/vendor/css/core.css
+++ b/assets/vendor/css/core.css
@@ -4609,6 +4609,7 @@ textarea.form-control-lg {
   overflow-x: hidden;
   overflow-y: auto;
   outline: 0;
+  background-color: #43597180;
 }
 
 .modal-dialog {
diff --git a/src/app.rs b/src/app.rs
index 0865544..247151f 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -36,12 +36,36 @@ impl MenuHelper {
     }
 }
 
+#[derive(Clone, Copy)]
+pub struct DialogHelper {
+    opened: RwSignal<bool>
+}
+
+impl DialogHelper {
+    pub fn new() -> Self {
+        let opened = create_rw_signal(false);
+        Self {
+            opened
+        }
+    }
+
+    pub fn set_opened(&self, opened: bool) {
+        self.opened.set(opened);
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.opened.get()
+    }
+}
+
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
     provide_meta_context();
     init_locales();
     provide_context(MenuHelper::new());
+    provide_context(MenuOpener::new());
+    provide_context(DialogHelper::new());
 
     view! {
         <Header/>
diff --git a/src/components/admin_portal.rs b/src/components/admin_portal.rs
index 6da1851..c10e7eb 100644
--- a/src/components/admin_portal.rs
+++ b/src/components/admin_portal.rs
@@ -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>
     }
 }
\ No newline at end of file
diff --git a/src/components/header.rs b/src/components/header.rs
index 151e57a..157fa61 100644
--- a/src/components/header.rs
+++ b/src/components/header.rs
@@ -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())
+        ]/>
     }
 }
\ No newline at end of file
diff --git a/src/components/modal_box.rs b/src/components/modal_box.rs
index 4ebdfb2..be3b528 100644
--- a/src/components/modal_box.rs
+++ b/src/components/modal_box.rs
@@ -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);
diff --git a/src/pages/users.rs b/src/pages/users.rs
index 6bb3517..300f7d1 100644
--- a/src/pages/users.rs
+++ b/src/pages/users.rs
@@ -8,6 +8,7 @@ use crate::pages::change_pwd::ChangePassword;
 use crate::pages::profile_edit::ProfileEdit;
 use crate::pages::user_delete::UserDelete;
 use crate::pages::user_edit::UserEdit;
+use leptos_use::use_media_query;
 
 #[component]
 pub fn users() -> impl IntoView {
@@ -19,6 +20,7 @@ pub fn users() -> impl IntoView {
         move || editor.visible() || profile_editor.visible() || delete_dialog.visible(), move |_| {get_users()});
     let (usr, set_usr) = create_signal::<Vec<User>>(vec![]);
     let (profile, set_profile) = create_signal(User::default());
+    let is_wide = use_media_query("(min-width: 500px)");
 
     view! {
         <UserEdit opener=editor/>
@@ -33,7 +35,8 @@ pub fn users() -> impl IntoView {
                 <thead>
                     <tr>
                         <th>{trl("Username")}</th>
-                        <th>{trl("Full name")}</th>
+                        {move || if is_wide.get() {view! {<th>{trl("Full name")}</th>}}
+                            else {view! {<th></th>}} }
                         <th>{trl("Admin")}</th>
                         <th>{trl("Actions")}</th>
                     </tr>
@@ -60,10 +63,12 @@ pub fn users() -> impl IntoView {
                                         let user_profile = user.clone();
                                         let user_passwd = user.clone();
                                         let user_delete = user.clone();
+                                        let full_name = user.full_name.clone().unwrap_or("".to_string());
                                         view! {
                                             <tr>
                                                 <td>{&user.login}</td>
-                                                <td>{&user.full_name.unwrap_or("".to_string())}</td>
+                                                {move || if is_wide.get() {view! {<td>{full_name.clone()}</td>}}
+                                                    else {view! {<td></td>}} }
                                                 <td>{if user.admin {view! {<i class="bx bx-check"></i>}}
                                                     else {view! {<i></i>}}}</td>
                                                 <td>
@@ -85,7 +90,7 @@ pub fn users() -> impl IntoView {
                                                                 pwd_dialog.show();
                                                             }>
                                                             <i class="bx bx-lock me-1"></i> {trl("Change password")}</a>
-                                                        <a class="dropdown-item" href="javascript:void(0);" on:click=move |_| {
+                                                        <a class="dropdown-item text-danger" href="javascript:void(0);" on:click=move |_| {
                                                                 set_profile.set(user_delete.clone());
                                                                 delete_dialog.show();
                                                             }>