versions picker

hazelcast · Jun 13, 2024 · 543529a · 543529a
1 parent a3cb2a6
commit 543529a
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 271 deletions.
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
@@ -21,6 +21,18 @@ site:
       version: '4.0'
       displayVersion: '4.0'
     latestVersion: *latest_version_abc
+  - name: def
+    title: Management Center
+    url: '/java.html'
+    versions:
+      - &latest_version_abc
+        url: '/java.html'
+        version: '4.1'
+        displayVersion: '4.1'
+      - url: '/java.html'
+        version: '4.0'
+        displayVersion: '4.0'
+    latestVersion: *latest_version_abc
   - &component
     name: home
     title: &component_title Home
@@ -34,7 +46,8 @@ page:
   url: *home_url
   home: true
   title: Java Client
-  component: abc
+  component:
+    title: Dev Preview
   componentVersion: *latest_version_abc
   version: '4.1'
   displayVersion: '4.1'

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -120,6 +120,11 @@ html.is-clipped--nav {
   display: none;
 }
 
+.components:not(.is-active),
+.versions:not(.is-active) {
+  display: none;
+}
+
 .nav-item-toggle {
   background: transparent url(../img/caret-blue.svg) center no-repeat;
   border: none;
@@ -140,10 +145,6 @@ html.is-clipped--nav {
   right: 1.5px;
 }
 
-.nav-panel-explore .context .version {
-  margin-right: 30px;
-}
-
 .nav-item.is-active > .nav-item-toggle {
   transform: rotate(-180deg);
 }
@@ -196,146 +197,97 @@ html.is-clipped--nav {
   vertical-align: middle;
 }
 
-.nav-panel-explore {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  right: 0;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  font-size: calc(14 / var(--rem-base) * 1rem);
-  border-bottom: 1px solid var(--nav-background);
-}
+@media screen and (min-width: 1024px) {
+  .nav-container {
+    position: static;
+    visibility: visible;
+    margin-top: 0;
+    padding-bottom: 60px;
+  }
 
-.nav-panel-explore .context {
-  flex-shrink: 0;
-  padding-right: 0.25rem;
-  font-family: var(--body-font-family);
-  color: var(--secondary-text);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 30px;
-  padding-left: 15px;
-  align-items: center;
-}
+  #hide-nav {
+    display: flex;
+  }
 
-.nav-panel-explore .components {
-  font-size: calc(14 / var(--rem-base) * 1rem);
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 20px;
-  text-indent: 0;
-  border-radius: 5px;
-  border: 1px solid #dadada;
-  background-color: #fff;
-  color: var(--secondary-text);
-  font-family: var(--body-font-family);
-  display: flex;
-  flex-direction: column;
-}
+  .nav {
+    top: var(--navbar-height);
+    box-shadow: none;
+    position: sticky;
+  }
 
-.nav-panel-explore:not(.is-active) .components {
-  display: none;
+  .nav-item-toggle {
+    right: 0;
+  }
 }
 
-.nav-panel-explore .component.home {
-  text-align: right;
-  margin-top: 15px !important;
+/* Version picker */
+.nav-version-picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 10px 0;
 }
 
-.nav-panel-explore .component {
+.nav-version-picker-toggle {
+  position: relative;
+  border-radius: 5px;
+  color: var(--accent);
+  border: 2px solid var(--accent);
+  background-color: var(--info-light);
+  padding: 6px 30px 6px 10px;
+  text-decoration: none !important;
+  cursor: pointer;
+  width: 100%;
   display: block;
+  font-weight: 600;
+  user-select: none;
 }
 
-.nav-panel-explore .component + .component {
-  margin-top: 0.5rem;
+.nav-version-picker-toggle::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  background: transparent url(../img/caret-blue.svg) center no-repeat;
+  width: 30px;
+  height: 15px;
 }
 
-.nav-panel-explore .component:last-child {
-  margin-bottom: 0.75rem;
+.navbar-product-name {
+  flex-basis: 100%;
 }
 
-.nav-panel-explore .versions {
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding-left: 0;
-  margin-top: -0.25rem;
-  line-height: 1;
+.navbar-product-version {
+  flex-basis: 30%;
+  min-width: 80px;
 }
 
-.nav-panel-explore .component .version {
-  display: block;
-  margin: 0.375rem 0.375rem 0 0;
+.navbar-product-name,
+.navbar-product-version {
+  position: relative;
 }
 
-.nav-panel-explore .component .version.hidden {
+.nav-version-picker-components:not(.is-active),
+.nav-version-picker-versions:not(.is-active) {
   display: none;
-  margin: 0.375rem 0.375rem 0 0;
 }
 
-.nav-panel-explore .component .more-versions {
-  display: block;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  border: 1px solid;
-  border-radius: 5px;
-  font-weight: normal;
-  text-align: center;
-  cursor: pointer;
-}
-
-.nav-panel-explore .component .fewer-versions {
-  display: none;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  border: 1px solid;
+.nav-version-picker-components,
+.nav-version-picker-versions {
+  position: absolute;
+  z-index: 100;
+  list-style-type: none;
+  width: 100%;
+  background-color: var(--info-light);
   border-radius: 5px;
-  font-weight: normal;
-  text-align: center;
-  cursor: pointer;
-}
-
-.nav-panel-explore .component .version a {
-  border: 1px solid var(--nav-border-color);
-  border-radius: 0.25rem;
-  color: inherit;
-  opacity: 0.75;
-  white-space: nowrap;
-  padding: 0.125em 0.25em;
-  display: inherit;
-}
-
-.nav-panel-explore .component .is-current a {
-  color: var(--accent);
-  opacity: 1;
+  border: 1px solid var(--accent);
+  padding: 4px 6px;
 }
 
-@media screen and (min-width: 1024px) {
-  .nav-container {
-    position: static;
-    visibility: visible;
-    margin-top: 0;
-    padding-bottom: 60px;
-  }
-
-  #hide-nav {
-    display: flex;
-  }
-
-  .nav-panel-explore {
-    font-size: 15px;
-  }
-
-  .nav {
-    top: var(--navbar-height);
-    box-shadow: none;
-    position: sticky;
-  }
-
-  .nav-item-toggle {
-    right: 0;
-  }
+.nav-version-picker-components a,
+.nav-version-picker-versions a {
+  color: var(--accent) !important;
+  display: block;
+  width: 100%;
 }
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -43,13 +43,19 @@
       }
     })
 
-    nav.querySelector('.context').addEventListener('click', function () {
-      var currentPanel = nav.querySelector('.is-active[data-panel]')
-      var activatePanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu'
-      currentPanel.classList.toggle('is-active')
-      nav.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
+    document.getElementById('navbarProductName').addEventListener('click', function () {
+      const list = document.getElementById('navbarProductsList')
+      list.classList.toggle('is-active')
     })
 
+    const navbarProductVersionEl = document.getElementById('navbarProductVersion')
+    if (navbarProductVersionEl) {
+      navbarProductVersionEl.addEventListener('click', function () {
+        const list = document.getElementById('navbarVersionsList')
+        list.classList.toggle('is-active')
+      })
+    }
+
     // NOTE prevent text from being selected by double click
     menuPanel.addEventListener('mousedown', function (e) {
       if (e.detail > 1) e.preventDefault()

diff --git a/src/js/11-more-versions.js b/src/js/11-more-versions.js