Merge branch 'ui-v2' of https://github.com/IGS/gEAR into ui-v2

IGS · Nov 29, 2023 · 417ef27 · 417ef27
2 parents a196dd9 + 46b40b4
commit 417ef27
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 45 deletions.
diff --git a/www/css/common.v2.css b/www/css/common.v2.css
@@ -28,18 +28,6 @@ html, body {
 /* -------------------- */
 /* -= Left navbar section =- */
 
-.menu-list .icon-text-part {
-    max-width: 240px;
-    transition: transform 0.3s;
-}
-
-.menu-list .icon-text-part.is-collapsed {
-    transform: translateX(-100%);
-}
-
-/* ------------------ */
-/* -= Other styles =- */
-
 #citation_c {
     max-width: 200px;
 }
@@ -52,13 +40,39 @@ html, body {
     font-size: 90%;
 }
 
+/* CSS class for the hide animation */
+.hidden-sidenavbar {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
 .menu-list a {
     border-radius: 10px;
     padding: 0.25rem 0.5rem;
     margin: 0.25rem 0 0.25rem 0;
     font-size: 90%;
 }
 
+.menu-list li {
+    /*border: 1px solid black; */
+    min-height: 2.5rem;
+}
+
+p.menu-label {
+    min-height: 1.5rem;
+}
+
+/* CSS class for the show animation */
+.shown-sidenavbar {
+    opacity: 1;
+    max-height: 1000px; /* Adjust the maximum height as needed */
+    transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+/* ------------------ */
+/* -= Other styles =- */
 .js-step-collapsable {
     display: none;
 }

diff --git a/www/include/primary_nav.html b/www/include/primary_nav.html
@@ -4,7 +4,7 @@
           </div>
           <aside class="menu mt-5 pl-3">
             <p class="menu-label mb-0 is-capitalized has-text-primary-light has-text-weight-medium">
-              Menu
+              <span class="menu-label-text">Menu</span>
               <span id="navbar-toggler" class="icon is-pulled-right"><i class="mdi mdi-18px mdi-menu-open"></i></span>
             </p>
             <ul class="menu-list">
@@ -18,24 +18,24 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Explore
+              <span class="menu-label-text">Explore</span>
             </p>
             <ul class="menu-list">
               <li>
                 <span class="icon-text is-align-items-center is-flex">
-                  <span class="icon"><i class="mdi mdi-18px mdi-test-tube"></i></span>
+                  <span class="icon is-medium"><i class="mdi mdi-24px mdi-test-tube"></i></span>
                   <span class="icon-text-part"><a tool="search_expression">Gene Expression</a></span>
                 </span>
               </li>
               <li>
                 <span class="icon-text is-align-items-center is-flex">
-                  <span class="icon"><i class="mdi mdi-18px mdi-table-search"></i></span>
+                  <span class="icon is-medium"><i class="mdi mdi-24px mdi-table-search"></i></span>
                   <span class="icon-text-part"><a tool="search_datasets" href="./dataset_explorer.html">Datasets</a></span>
                 </span>
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Analyze
+              <span class="menu-label-text">Analyze</span>
             </p>
             <ul class="menu-list">
               <li>
@@ -70,7 +70,7 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Manage
+              <span class="menu-label-text">Manage</span>
             </p>
             <ul class="menu-list">
               <li>
@@ -93,7 +93,7 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Support
+              <span class="menu-label-text">Support</span>
             </p>
             <ul class="menu-list">
               <li>

diff --git a/www/js/common.v2.js b/www/js/common.v2.js
@@ -1,4 +1,5 @@
 let CURRENT_USER;
+let SIDEBAR_COLLAPSED = false;
 
 document.addEventListener('DOMContentLoaded', () => {
     // Add listeners for any elements which have generic close controls
@@ -31,39 +32,62 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // Add click event for collapsable left navbar text
-    const navbar_toggler = document.querySelector('#navbar-toggler');
-    navbar_toggler.addEventListener('click', (event) => {
-        const isCollapsed = navbar_toggler.classList.contains('is-collapsed');
-
-        // toggle is-collapsed on all span elements of class icon-text-part
-        (document.querySelectorAll('.icon-text-part') || []).forEach(($menuLabel) => {
-            console.log("looping over a text label");
-            $menuLabel.classList.toggle('is-collapsed');
-
-            // now after the collapse finishes, toggle is-hidden
-            $menuLabel.addEventListener('transitionend', () => {
-                if (isCollapsed) {
-                    // Sidebar is collapsed
-                    console.log('Sidebar is expanded');
-                    // Perform actions for when the sidebar is collapsed
-
-                } else {
-                    // Sidebar is expanded
-                    console.log('Sidebar is collapsed');
-                    // Perform actions for when the sidebar is expanded
-                }
-                $menuLabel.classList.toggle('is-hidden');
-            });
+/**
+ * Controls for the left navbar visibility
+ */
+    const navbarElementsToAnimate = document.querySelectorAll('.icon-text-part');
+
+    // Function to hide elements with animation
+    function hideNavbarElementsWithAnimation() {
+        // Hide all the menu labels
+        document.querySelectorAll('span.menu-label-text').forEach(function (element) {
+            element.classList.add('is-hidden');
+        });
+
+        navbarElementsToAnimate.forEach(function (element) {
+            // Add the CSS class to trigger the hide animation
+            element.classList.add('hidden-sidenavbar');
+            // Remove the show animation class if it was previously added
+            element.classList.remove('shown-sidenavbar');
         });
 
         // hide the citation element
         document.querySelector("#citation_c").classList.add("is-hidden")
+    }
 
-        // also toggle the main site icon
-    });
+    // Function to show elements with animation
+    function showNavbarElementsWithAnimation() {
+        // Show all the menu labels
+        document.querySelectorAll('span.menu-label-text').forEach(function (element) {
+            element.classList.remove('is-hidden');
+        });
 
+        navbarElementsToAnimate.forEach(function (element) {
+            // Add the CSS class to trigger the show animation
+            element.classList.add('shown-sidenavbar');
+            // Remove the hide animation class if it was previously added
+            element.classList.remove('hidden-sidenavbar');
+        });
 
+        // show the citation element
+        document.querySelector("#citation_c").classList.remove("is-hidden")
+    }
+
+    const navbar_toggler = document.querySelector('#navbar-toggler');
+
+    navbar_toggler.addEventListener('click', (event) => {
+        if (SIDEBAR_COLLAPSED == false) {
+            hideNavbarElementsWithAnimation();
+            SIDEBAR_COLLAPSED = true;
+        } else {
+            showNavbarElementsWithAnimation();
+            SIDEBAR_COLLAPSED = false;
+        }
+    });
+
+/**
+ * / End controls for the left navbar visibility
+ */
 
     checkForLogin();
 });