add side navigation buttons

canonical · Oct 4, 2023 · 939c7dd · 939c7dd
1 parent 838bb9e
commit 939c7dd
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 32 deletions.
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -78,6 +78,13 @@ $breakpoint-navigation-threshold: $breakpoint-large;
   }
 }
 
+.homepage-tabs {
+  @media only screen and (min-width: $breakpoint-large) {
+    margin-top: 88px;
+  }
+}
+
+
 .p-icon--github-white {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg==");
 }

diff --git a/templates/jaasai/index.html b/templates/jaasai/index.html
@@ -250,7 +250,7 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
           </ul>
         </div>
       </div>
-      <div class="col-8">
+      <div class="col-8 homepage-tabs-content">
         <div class="row" id="view-models-and-controllers-details">
           {{ image(
               url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
@@ -259,13 +259,14 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
               width="1031",
               hi_def=True,
               loading="auto",
-              attrs={
-                "class": "homepage-tabs-logo",
-              },
             ) | safe
           }}
           <p>Drill down to view the details of everything that is deployed inside a model, such as applications, integrations, units, and more.</p>
         </div>
+        <div class="homepage-tabs-button u-align--right">
+          <button class="p-button has-icon" disabled data-js="previous-tab-button">&lsaquo; Previous</button>
+          <button class="p-button has-icon" data-js="next-tab-button">Next &rsaquo;</button>
+        </div>
         <div class="row u-hide" id="run-actions">
           {{ image(
             url="https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg",
@@ -274,9 +275,6 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
             width="1031",
             hi_def=True,
             loading="auto",
-            attrs={
-              "class": "homepage-tabs-logo",
-            },
           ) | safe
           }}
           <p>Execute Juju action from the UI and view the resulting logs to confirm their status.</p>
@@ -289,9 +287,6 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
               width="1031",
               hi_def=True,
               loading="auto",
-              attrs={
-                "class": "homepage-tabs-logo",
-              },
             ) | safe
             }}
           <p>Perform common administrative operations and apply machine configurations.</p>
@@ -304,9 +299,6 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
               width="1031",
               hi_def=True,
               loading="auto",
-              attrs={
-                "class": "homepage-tabs-logo",
-              },
             ) | safe
             }}
           <p>Onboard controllers and add, remove or manage user access to models and controllers.</p>
@@ -319,9 +311,6 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
               width="1031",
               hi_def=True,
               loading="auto",
-              attrs={
-                "class": "homepage-tabs-logo",
-              },
             ) | safe
             }}
           <p>Access the logs from your deployment in a single, centralised location.</p>
@@ -334,9 +323,6 @@ <h2>Add visibility, auditing and compliance controls to your Juju deployment</h2
               width="1031",
               hi_def=True,
               loading="auto",
-              attrs={
-                "class": "homepage-tabs-logo",
-              },
             ) | safe
             }}
           <p>Perform complex searches/filters through your entire deployment and share the result through a unique URL.</p>
@@ -528,24 +514,78 @@ <h3 class="p-heading--5">Contact us</h3>
 <script>
   const panelLinks = document.querySelectorAll("[data-js='panel-link']");
 
-  panelLinks.forEach((panelLink) => {
-    panelLink.addEventListener("click", (e) => {
-      e.preventDefault();
-
+  function activatePanel(panelLink) {
       const activePanelLink = document.querySelector("[data-js='panel-link'].is-active");
       const activePanel = document.querySelector(activePanelLink.getAttribute("href"));
 
-      if (activePanelLink === panelLink) {
-        return;
+      if (activePanelLink !== panelLink) {
+        const targetPanel = document.querySelector(panelLink.getAttribute("href"));
+        activePanelLink.classList.remove("is-active");
+        activePanel.classList.add("u-hide");
+        panelLink.classList.add("is-active");
+        targetPanel.classList.remove("u-hide");
       }
+    }
 
-      const targetPanel = document.querySelector(panelLink.getAttribute("href"));
-
-      activePanelLink.classList.remove("is-active");
-      activePanel.classList.add("u-hide");
-      panelLink.classList.add("is-active");
-      targetPanel.classList.remove("u-hide");
+    panelLinks.forEach((panelLink) => {
+      panelLink.addEventListener("click", (e) => {
+        e.preventDefault();
+        activatePanel(panelLink);
+      });
     });
-  });
+
+  const tabs = document.querySelectorAll('.homepage-tabs-content > .row:not(.homepage-tabs-button)');
+  const navItems = document.querySelectorAll('.p-side-navigation__item');
+  const images = [
+    'https://assets.ubuntu.com/v1/216e92c6-jass_side_navigation.svg',
+  ];
+
+  let currentTab = 0;
+
+  function showTab(index) {
+    tabs.forEach(tab => tab.classList.add('u-hide'));
+    tabs[index].classList.remove('u-hide');
+    updateNavigation(index);
+    updateButtonStatus();
+  }
+
+  function handlePrevious() {
+      if (currentTab > 0) {
+        currentTab--;
+        showTab(currentTab);
+
+        const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
+        activatePanel(targetPanelLink);
+      }
+    }
+
+  function handleNext() {
+      if (currentTab < tabs.length - 1) {
+        currentTab++;
+        showTab(currentTab);
+
+        const targetPanelLink = document.querySelector(`[data-js='panel-link'][href='#${tabs[currentTab].id}']`);
+        activatePanel(targetPanelLink);
+      }
+    }
+
+  function updateNavigation(index) {
+    navItems.forEach(item => item.classList.remove('is-active'));
+    navItems[index].classList.add('is-active');
+  }
+
+  function updateButtonStatus() {
+    const prevBtn = document.querySelector('[data-js="previous-tab-button"]');
+    const nextBtn = document.querySelector('[data-js="next-tab-button"]');
+    prevBtn.disabled = currentTab === 0;
+    nextBtn.disabled = currentTab === tabs.length - 1;
+  }
+
+  const prevBtn = document.querySelector('[data-js="previous-tab-button"]');
+  const nextBtn = document.querySelector('[data-js="next-tab-button"]');
+
+  prevBtn.addEventListener('click', handlePrevious);
+  nextBtn.addEventListener('click', handleNext);
+
 </script>
 {% endblock content %}