[docs] use current version as title in version selector (yugabyte#15604)

Co-authored-by: Alex Ball <aball@yugabyte.com>
pinargulsen · Jan 10, 2023 · c198d43 · c198d43
1 parent ee0e62c
commit c198d43
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 77 deletions.
diff --git a/docs/assets/scss/_version_dropdown.scss → docs/assets/scss/_dropdown_list.scss b/docs/assets/scss/_version_dropdown.scss → docs/assets/scss/_dropdown_list.scss
@@ -1,5 +1,4 @@
-#contribute-list,
-.main-heading-with-version {
+.dropdown-list {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8,21 +7,24 @@
     margin: 20px 0;
   }
 
-  &.header-version-dropdown {
-    margin: 0;
+  .dropdown-menu {
+    background: #fff;
+    border: 1px solid #d7dee4;
+    box-shadow: 0 1px 4px rgba(153, 153, 153, 0.5);
+    border-radius: 8px;
+    padding: 8px 0;
+    margin-top: 1px;
 
-    ul {
-      margin: 0 0 5px 0;
+    .dropdown-item {
+      font-size: 13px;
+      line-height: 16px;
+      color: $yb-font-dark;
+      padding: 8px 16px;
 
-      .dropdown-toggle {
-        padding: 5px 12px;
+      &:hover {
+        background: #f2f6ff !important;
       }
     }
-
-    .dropdown-menu {
-      right: 0;
-      left: initial;
-    }
   }
 
   .dropdown-toggle {
@@ -50,9 +52,7 @@
       font-size: 10px;
       line-height: 16px;
       text-transform: uppercase;
-      //color: #4e5f6d;
       height: 20px;
-      //background: #e9eef2;
       border-radius: 4px;
       padding: 2px 6px;
       margin-left: 6px;
@@ -70,37 +70,24 @@
     }
   }
 
-  .dropdown-menu {
-    background: #fff;
-    border: 1px solid #d7dee4;
-    box-shadow: 0 1px 4px rgba(153, 153, 153, 0.5);
-    border-radius: 8px;
-    padding: 8px 0;
-    margin-top: 1px;
+  &.header-version-dropdown {
+    margin: 0;
 
-    .dropdown-item {
-      font-size: 13px;
-      line-height: 16px;
-      color: $yb-font-dark;
-      padding: 8px 16px;
+    ul {
+      margin: 0 0 5px 0;
 
-      &:hover {
-        background: #f2f6ff !important;
+      .dropdown-toggle {
+        padding: 5px 12px;
       }
+    }
 
-      &:hover {
-        background: transparent;
-      }
+    .dropdown-menu {
+      right: 0;
+      left: initial;
     }
   }
-}
-
-.heading-content .navbar-nav {
-  display: none;
-}
 
-.main-heading-with-version {
-  &.dd-chang-showmobile {
+  &.dd-change-showmobile {
     display: flex;
     margin: 20px 0 0 32px;
     width: calc(100% - 49px);

diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
@@ -400,10 +400,6 @@ body {
             display: block;
           }
 
-          .main-heading-with-version {
-            display: none;
-          }
-
           @media (max-width: 767px) {
             &::after {
               background-color: #eee;

diff --git a/docs/assets/scss/_styles_project.scss b/docs/assets/scss/_styles_project.scss
@@ -1,6 +1,6 @@
 @import "./_yb_headings.scss";
 @import "./_yb_bullets-and-number-list.scss";
-@import "./_version_dropdown.scss";
+@import "./_dropdown_list.scss";
 @import "./_contribute_list.scss";
 @import "./_admonition.scss";
 @import "./_code_block.scss";
@@ -373,10 +373,17 @@ body:not(.td-home) .td-main main {
 
   .main-heading-with-version {
     margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     @media (max-width: 991px) {
       margin-top: 0;
     }
+
+    @media (min-width: 991px) {
+      margin: 20px 0;
+    }
   }
 }
 
@@ -398,7 +405,7 @@ body:not(.td-home) .td-main main {
 }
 
 @media (max-width: 767px) {
-  .main-heading-with-version {
+  .td-content .main-heading-with-version {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;

diff --git a/docs/layouts/_default/content.html b/docs/layouts/_default/content.html
@@ -5,13 +5,6 @@
         <h1>{{ if .Params.headerTitle }}{{ .Params.headerTitle }}{{ else }}{{ .Title }}{{ end }} {{ if .Draft }} (Draft){{ end }}{{ if .Params.beta }}<a class="tag-beta" href="{{ .Params.beta }}">Beta</a>{{ end }}</h1>
         {{ with .Params.headcontent }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
       </div>
-      {{ if and .Site.Params.versions (not .Params.unversioned) }}
-      <ul class="navbar-nav mt-2 mt-lg-0">
-        <li class="nav-item dropdown mr-4 d-none d-lg-block">
-          {{ partial "navbar-version-selector.html" . }}
-        </li>
-      </ul>
-      {{ end }}
     </div>
 	</div>
 

diff --git a/docs/layouts/indexpage/list.html b/docs/layouts/indexpage/list.html
@@ -22,13 +22,6 @@
         <h1>{{ if .Params.headerTitle }}{{ .Params.headerTitle }}{{ else }}{{ .Title }}{{ end }} {{ if .Draft }} (Draft){{ end }}{{ if .Params.beta }}<a class="tag-beta" href="{{ .Params.beta }}">Beta</a>{{ end }}</h1>
         {{ with .Params.headcontent }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
       </div>
-      {{ if and .Site.Params.versions (not .Params.unversioned) }}
-      <ul class="navbar-nav mt-2 mt-lg-0">
-        <li class="nav-item dropdown mr-4 d-none d-lg-block">
-          {{ partial "navbar-version-selector.html" . }}
-        </li>
-      </ul>
-      {{ end }}
     </div>
   </div>
   {{ partial "contribute_list" . }}

diff --git a/docs/layouts/partials/contribute_list.html b/docs/layouts/partials/contribute_list.html
@@ -1,4 +1,4 @@
-<div class="dropdown" id="contribute-list">
+<div class="dropdown dropdown-list" id="contribute-list">
   <ul class="navbar-nav mt-2 mt-lg-0">
     <li class="nav-item dropdown mr-4 d-none d-lg-block">
       <a class="nav-link dropdown-toggle" id="contributeDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

diff --git a/docs/layouts/partials/navbar-version-selector.html b/docs/layouts/partials/navbar-version-selector.html
@@ -1,5 +1,21 @@
+{{ $versionName := .Site.Params.version_menu }}
+{{ $pagePermalink := .Page.RelPermalink }}
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-  {{ .Site.Params.version_menu }}
+  {{ range .Site.Params.versions }}
+    {{ if hasPrefix $pagePermalink .url }}
+      {{ $versionName = .version }}
+      {{- if in .version "(Preview)" -}}
+        {{ $versionName = replace .version "(Preview)" "<span class='metadata-tag-gray'>Preview</span>" }}
+      {{- else if in .version "(STS)" -}}
+        {{ $versionName = replace .version "(STS)" "<span class='metadata-tag-green'>STS</span>" }}
+      {{- else if in .version "(LTS)" -}}
+        {{ $versionName = replace .version "(LTS)" "<span class='metadata-tag-green'>LTS</span>" }}
+      {{- else if in .version "Unsupported" -}}
+        {{ $path = "/" }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+  {{ $versionName | safeHTML }}
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
   {{ $path := "" }}

diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
@@ -119,7 +119,7 @@
       {{- end -}}
     </ul>
     {{- if and .Site.Params.versions (not .Params.unversioned) -}}
-      <div class="header-version-dropdown main-heading-with-version">
+      <div class="header-version-dropdown dropdown-list">
         <ul class="mt-2 mt-lg-0">
           <li class="nav-item dropdown d-none d-lg-block">
             {{- partial "navbar-version-selector.html" . -}}

diff --git a/docs/layouts/partials/sidebar-tree.html b/docs/layouts/partials/sidebar-tree.html
@@ -11,7 +11,7 @@
   <div class="left-sidebar-wrap-inner">
     <nav>
       {{- if and .Site.Params.versions (not .Params.unversioned) -}}
-        <div class="dd-chang-showmobile desktop-hide main-heading-with-version">
+        <div class="dd-change-showmobile desktop-hide dropdown-list">
           <ul>
             <li class="nav-item dropdown">
               {{- partial "navbar-version-selector.html" . -}}
@@ -107,4 +107,4 @@
   {{- end -}}
 {{- end }}
 
-<script>(()=>{"use strict";function a(e){var t=e+"=";const i=decodeURIComponent(document.cookie);var a=i.split(";"),d=a.length;let r="",n=0,o="";for(;n<d;){for(r=a[n];r.charAt(0)&&" "===r.charAt(0);)r=r.substring(1);if(0===r.indexOf(t)){o=r.substring(t.length,r.length);break}n+=1}return o}function e(e,t,i){let a=e+"="+encodeURIComponent(t);"number"!=typeof i&&(i=3),a+="; max-age="+30*i*86400,a+="; path=/","localhost"!==location.hostname&&(a+="; secure=true"),document.cookie=a}function t(e){const t=document.querySelector("aside.td-sidebar");let i=300;if("hide"===e){let e=t.style.width;(e<300||500<e)&&(e=300),t.setAttribute("data-pwidth",e),jQuery(".left-sidebar-wrap-inner").animate({opacity:"0"}),jQuery("aside.td-sidebar").animate({minWidth:"0px",width:"60px",maxWidth:"60px"})}else a("leftMenuWidth")&&(i=a("leftMenuWidth")),t.getAttribute("data-pwidth")&&(i=t.getAttribute("data-pwidth")),(i<300||500<i)&&(i=300),jQuery(".left-sidebar-wrap-inner").animate({opacity:"1"}),jQuery("aside.td-sidebar").animate({width:i,maxWidth:i})}var i=document.querySelector(".left-sidebar-wrap nav:not(.fixed-nav) > ul a.current"),d=a("leftMenuShowHide"),r=a("leftMenuWidth");const n=document.querySelector("aside.td-sidebar"),o=document.querySelector(".side-nav-collapse-toggle-2");n&&(d&&""!==d&&(n.classList.add("toggled-sidebar"),"hide"===d&&(n.classList.add("stick-bar"),t(d))),r&&""!==r&&(jQuery(".td-main").addClass("hide-right-menu"),"hide"===d?n.setAttribute("data-pwidth",r):(n.style.width=r+"px",n.style.maxWidth=r+"px"),setTimeout(()=>{jQuery(".td-sidebar nav:not(.fixed-nav) a").each((e,t)=>{42<=jQuery(t).outerHeight()&&jQuery(t).outerHeight()<60?jQuery(t).attr("data-lines",2):60<=jQuery(t).outerHeight()&&jQuery(t).outerHeight()<=72?jQuery(t).attr("data-lines",3):72<jQuery(t).outerHeight()?jQuery(t).attr("data-lines",4):jQuery(t).removeAttr("data-lines")})},1e3)),i&&function(e){const t=document.querySelector("aside.td-sidebar nav:not(.fixed-nav)");var i;t&&e&&(t.style.overflow="hidden",i=t.clientHeight,e=e.getBoundingClientRect().top,t.scrollTop=e-i,setTimeout(()=>{t.style.overflow="auto"},600))}(i),o.addEventListener("click",()=>{n.classList.toggle("stick-bar"),n.classList.add("toggled-sidebar"),n.classList.contains("stick-bar")?(e("leftMenuShowHide","hide",3),t("hide")):(e("leftMenuShowHide","show",3),t("show"))}))})();</script>
+<script>(()=>{"use strict";function a(e){var t=e+"=";const i=decodeURIComponent(document.cookie);var a=i.split(";"),d=a.length;let r="",n=0,o="";for(;n<d;){for(r=a[n];r.charAt(0)&&" "===r.charAt(0);)r=r.substring(1);if(0===r.indexOf(t)){o=r.substring(t.length,r.length);break}n+=1}return o}function e(e,t,i){let a=e+"="+encodeURIComponent(t);"number"!=typeof i&&(i=3),a+="; max-age="+30*i*86400,a+="; path=/","localhost"!==location.hostname&&(a+="; secure=true"),document.cookie=a}function t(e){const t=document.querySelector("aside.td-sidebar");let i=300;if("hide"===e){let e=t.style.width;(e<300||500<e)&&(e=300),t.setAttribute("data-pwidth",e),jQuery(".left-sidebar-wrap-inner").animate({opacity:"0"}),jQuery("aside.td-sidebar").animate({minWidth:"0px",width:"60px",maxWidth:"60px"})}else a("leftMenuWidth")&&(i=a("leftMenuWidth")),t.getAttribute("data-pwidth")&&(i=t.getAttribute("data-pwidth")),(i<300||500<i)&&(i=300),jQuery(".left-sidebar-wrap-inner").animate({opacity:"1"}),jQuery("aside.td-sidebar").animate({width:i,maxWidth:i})}var i=document.querySelector(".left-sidebar-wrap nav:not(.fixed-nav) > ul a.current"),d=a("leftMenuShowHide"),r=a("leftMenuWidth");const n=document.querySelector("aside.td-sidebar"),o=document.querySelector(".side-nav-collapse-toggle-2");n&&(d&&""!==d&&(n.classList.add("toggled-sidebar"),"hide"===d&&(n.classList.add("stick-bar"),t(d))),r&&""!==r&&(jQuery(".td-main").addClass("hide-right-menu"),"hide"===d?n.setAttribute("data-pwidth",r):(n.style.width=r+"px",n.style.maxWidth=r+"px"),setTimeout(()=>{jQuery(".td-sidebar nav:not(.fixed-nav) a").each((e,t)=>{42<=jQuery(t).outerHeight()&&jQuery(t).outerHeight()<60?jQuery(t).attr("data-lines",2):60<=jQuery(t).outerHeight()&&jQuery(t).outerHeight()<=72?jQuery(t).attr("data-lines",3):72<jQuery(t).outerHeight()?jQuery(t).attr("data-lines",4):jQuery(t).removeAttr("data-lines")})},1e3)),i&&function(e){const t=document.querySelector("aside.td-sidebar nav:not(.fixed-nav)");var i;t&&e&&(t.style.overflow="hidden",i=t.clientHeight,e=e.getBoundingClientRect().top,t.scrollTop=e-i,setTimeout(()=>{t.style.overflow="auto"},600))}(i),o.addEventListener("click",()=>{n.classList.toggle("stick-bar"),n.classList.add("toggled-sidebar"),n.classList.contains("stick-bar")?(e("leftMenuShowHide","hide",3),t("hide")):(e("leftMenuShowHide","show",3),t("show"))}))})();</script>
diff --git a/docs/src/index.js b/docs/src/index.js
@@ -164,19 +164,6 @@ $(document).ready(() => {
     // Active main Nav.
     yugabyteActiveMainNav();
 
-    // Change the version dropdown text with the selected version text.
-    if ($('.version-selector') && $('.dropdown-menu')) {
-      const versionDir = location.pathname.split('/')[1];
-      if (versionDir !== '') {
-        $('.dropdown-menu a').each((index, element) => {
-          if ($(element).attr('href').indexOf(`/${versionDir}/`) !== -1) {
-            $('.version-selector').html($(element).html());
-            return false;
-          }
-        });
-      }
-    }
-
     $(document).on('click', '.header-menu li.dropdown', (event) => {
       if ($(window).width() < 992) {
         if ($(event.currentTarget).hasClass('active')) {