Naming sidebar actions and communities (#111)

* add span to identify sidebar actions better * Fixes #106 * fix height and alignment for mobile sidebar * Add scroll for mobile sidebar, closes #110 * add width adjustment to erase blank space (#172) * update sidebar styles * keep same space between every sidebar_item * fix handle_warning errors: add missing parameter
virto-network · Nov 12, 2024 · ae98bb7 · ae98bb7
1 parent 71f21c7
commit ae98bb7
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 28 deletions.
diff --git a/public/styles/main.scss b/public/styles/main.scss
@@ -1726,6 +1726,7 @@ textarea::placeholder {
     background: var(--text-primary);
     box-shadow: 1px 2px 8px var(--border--rgba);
     height: 100%;
+    width: 100%;
 }
 
 .sidebar__scream {
@@ -1758,6 +1759,7 @@ textarea::placeholder {
     align-items: center;
     gap: 12px;
     position: relative;
+    flex-direction: column;
 }
 
 .sidebar__item--uncomplete {
@@ -1784,8 +1786,20 @@ textarea::placeholder {
     border-radius: 0 8px 8px 0;
 }
 
-.sidebar__list>li>span {
-    display: none;
+.sidebar__action-label__not-displayed {
+    display: none
+}
+
+.sidebar__action-label {
+    @extend %text-xs-font-regular;
+    font-size: 0.8rem;
+    color: var(--color-green-100);
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.sidebar__item--active .sidebar__action-label {
+    color: var(--state-primary-active);
 }
 
 .textarea {
@@ -3448,11 +3462,6 @@ small.summary__item__value {
     }
 
     .page {
-        grid-template-areas:
-            "header"
-            "main"
-            "footer"
-            "sidebar";
         grid-template-rows: 80px auto 1fr 80px;
     }
 
@@ -3462,27 +3471,43 @@ small.summary__item__value {
 
     .sidebar {
         width: 100%;
-        height: 80px;
+        height: 120px;
         position: fixed;
         bottom: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
     }
 
     .sidebar__container {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
         display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
+        flex-direction: column;
     }
 
     .sidebar__list {
+        display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
+        position: relative;
     }
 
+    .sidebar__item {
+        min-width: 60px;
+}
+
     .sidebar__divider {
         display: none;
     }
 
+    .sidebar__action-label {
+        word-break: break-word;
+        white-space: normal;
+    }
+
     .dashboard {
         padding-top: 0;
         min-height: calc(100vh - 64px);

diff --git a/src/components/molecules/sidebar.rs b/src/components/molecules/sidebar.rs
@@ -64,9 +64,7 @@ pub fn Sidebar() -> Element {
                                         nav.push(vec![], "/account")
                                     }
                                 }
-                                span {
-                                    "{account.name()}"
-                                },
+                                span { class: "sidebar__action-label__not-displayed", "{account.name()}" }
                             }
                         ),
                         None => rsx!(
@@ -89,9 +87,7 @@ pub fn Sidebar() -> Element {
                                         nav.push(vec![], "/login");
                                     }
                                 }
-                                span {
-                                    {translate!(i18, "sidebar.cta")}
-                                }
+                                span { class: "sidebar__action-label__not-displayed", {translate!(i18, "sidebar.dashboard")} }
                             }
                         ),
                     },
@@ -107,7 +103,7 @@ pub fn Sidebar() -> Element {
                                 nav.push(vec![], "/");
                             }
                         }
-                        span { {translate!(i18, "sidebar.cta")} }
+                        span { class: "sidebar__action-label__not-displayed", {translate!(i18, "sidebar.dashboard")} }
                     }
                     li { class: "sidebar__item", onclick: move |_| {},
                         IconButton {
@@ -128,7 +124,7 @@ pub fn Sidebar() -> Element {
                                 nav.push(vec![], "/explore");
                             }
                         }
-                        span { {translate!(i18, "sidebar.cta")} }
+                        span { class: "sidebar__action-label__not-displayed", {translate!(i18, "sidebar.explore")} }
                     }
                     hr { class: "sidebar__divider" }
 
@@ -168,9 +164,7 @@ pub fn Sidebar() -> Element {
                                         ),
                                         on_click: move |_| { }
                                     }
-                                    span {
-                                        "{community.name}"
-                                    },
+                                    span { class: "sidebar__action-label", "{community.name}" }
                                 }
                             )
                         }

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -52,7 +52,8 @@
             }
         },
         "sidebar": {
-            "cta": "Add community"
+            "explore": "Explore",
+            "dashboard": "My Communities"
         },
         "header": {
             "cta": {

diff --git a/src/locales/es-ES.json b/src/locales/es-ES.json
@@ -52,7 +52,8 @@
             }
         },
         "sidebar": {
-            "cta": "Agregar comunidad"
+            "explore": "Explorar",
+            "dashboard": "Mis Comunidades"
         },
         "header": {
             "cta": {

diff --git a/src/middlewares/is_chain_available.rs b/src/middlewares/is_chain_available.rs
@@ -15,7 +15,7 @@ pub fn is_chain_available(
         log::info!("rest: {:?}", Date::now() as u64 - timestamp.get().0);
         if Date::now() as u64 - timestamp.get().0 > THRESHOLD {
             log::warn!("Chain unavailable");
-            notification.handle_warning(&translate!(i18, "warnings.middleware.chain_unavailable"));
+            notification.handle_warning(&translate!(i18, "warnings.title"), &translate!(i18, "warnings.middleware.chain_unavailable"));
             Err("Chain unavailable")
         } else {
             Ok(())

diff --git a/src/middlewares/is_dao_owner.rs b/src/middlewares/is_dao_owner.rs
@@ -8,7 +8,7 @@ pub fn is_dao_owner(
     move || {
         if accounts.is_active_account_an_admin() {
             log::warn!("User is DAO owner");
-            notification.handle_warning(&translate!(i18, "warnings.middleware.has_dao"));
+            notification.handle_warning(&translate!(i18, "warnings.title"), &translate!(i18, "warnings.middleware.has_dao"));
             Err("User is DAO owner")
         } else {
             Ok(())

diff --git a/src/pages/dashboard.rs b/src/pages/dashboard.rs
@@ -54,7 +54,7 @@ pub fn Dashboard() -> Element {
     let mut search_word = use_signal::<String>(|| String::new());
     let tab_items = vec![TabItem {
         k: String::from("all"),
-        value: translate!(i18, "dashboard.tabs.all"),
+        value: translate!(i18, "dashboard.tabs.owned"),
     }];
     let tab_value = use_signal::<String>(|| String::from("all"));