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

This commit is contained in:
2023-11-21 18:15:25 +01:00
parent aa2c71af77
commit d7e33e4342
8 changed files with 140 additions and 11 deletions
+8 -3
View File
@@ -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();
}>