Desktop Tabs UI implementation with dropdown more button

Author: rakeshAlgo

preview-src/index.adoc

@@ -64,6 +64,21 @@ Installation will vary based on your operation system.
 <li>
 <p><a id="tabset1_debian"></a>Debian</p>
 </li>
+<li>
+<p><a id="tabset1_test1"></a>Test1</p>
+</li>
+<li>
+<p><a id="tabset1_test2"></a>Test2</p>
+</li>
+<li>
+<p><a id="tabset1_test3"></a>Test3</p>
+</li>
+<li>
+<p><a id="tabset1_test4"></a>Test4</p>
+</li>
+<li>
+<p><a id="tabset1_test5"></a>Test5</p>
+</li>
 </ul>
 </div>
 <div class="content">
@@ -82,10 +97,36 @@ Installation will vary based on your operation system.
 <p>Content for Debian tab.</p>
 </div>
 </div>
+<div class="tab-pane" aria-labelledby="tabset1_test1">
+<div class="paragraph">
+<p>Content for test 1 tab.</p>
+</div>
+</div>
+<div class="tab-pane" aria-labelledby="tabset1_test2">
+<div class="paragraph">
+<p>Content for test 2 tab.</p>
+</div>
+</div>
+<div class="tab-pane" aria-labelledby="tabset1_test3">
+<div class="paragraph">
+<p>Content for test 3 tab.</p>
+</div>
+</div>
+<div class="tab-pane" aria-labelledby="tabset1_test4">
+<div class="paragraph">
+<p>Content for test 4 tab.</p>
+</div>
+</div>
+<div class="tab-pane" aria-labelledby="tabset1_test5">
+<div class="paragraph">
+<p>Content for test 5 tab.</p>
+</div>
+</div>
 </div>
 </div>
 ++++
 
+
 == Admonition Blocks
 
 Let's take a brief pause to look at some admonition blocks.

src/css/doc.css

@@ -807,23 +807,30 @@ code.language-console.hljs.shell {
 
 .doc .tabs li {
   align-items: center;
-  border: 1px solid var(--color-brand-white);
-  border-top: 3px solid var(--color-brand-white);
+  /* border: 1px solid var(--color-brand-white);
+  border-top: 3px solid var(--color-brand-white); */
   border-bottom: 0;
   cursor: pointer;
   display: flex;
+  justify-content: center;
   font-weight: var(--weight-semibold);
   height: 2.5rem;
   line-height: 1;
   padding: 0;
   position: relative;
-  margin-right: var(--base-space);
+  margin-right: var(--base-large-space);
 }
 
 .doc .tabs li + li {
   margin-top: 0;
 }
 
+.doc .tabs li a {
+  font-family: "Source Sans Pro", sans-serif;
+  color: var(--color-brand-primary);
+  font-weight: var(--weight-semibold);
+}
+
 .doc .tabs li:last-child {
   margin-right: 0;
 }
@@ -883,7 +890,7 @@ code.language-console.hljs.shell {
 /* Media css  */
 
 @media screen and (min-width: 840px) {
-  .active-tab-item-row,
+  /* .active-tab-item-row, */
   .tabset .dropddown-btn {
     display: none;
   }
@@ -893,7 +900,7 @@ code.language-console.hljs.shell {
   }
 }
 
-@media screen and (max-width: 840px) {
+@media screen and (min-width: 840px) {
   .tabset {
     position: relative;
     margin-top: 2rem;
@@ -903,12 +910,12 @@ code.language-console.hljs.shell {
     width: 100%;
   }
 
-  .active-tab-item-row {
+  /* .active-tab-item-row {
     display: inline-block;
     max-width: 60%;
-  }
+  } */
 
-  .active-tab-item-row a {
+  /* .active-tab-item-row a {
     align-items: center;
     color: var(--color-brand-gray1);
     border: 1px solid var(--color-border);
@@ -918,7 +925,6 @@ code.language-console.hljs.shell {
     font-weight: var(--weight-bold);
     min-height: 2.5rem;
     line-height: 1;
-    /* margin-right: 0.25rem; */
     padding: 0 1.5rem 5px;
     position: relative;
     text-decoration: none;
@@ -929,26 +935,33 @@ code.language-console.hljs.shell {
     content: "";
     display: block;
     height: 3px;
-    /* Chrome doesn't always paint the line accurately, so add a little extra */
     position: absolute;
     bottom: -1.5px;
     left: 0;
     right: 0;
-  }
+  } */
 
   .ulist.tabs {
     margin: 0;
+
+    width: 100%;
+    display: flex;
+  }
+
+  .other-tab-box {
     position: relative;
+    margin-left: var(--base-large-space);
   }
 
   .doc .tabs .dropddown-btn {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
-    color: #333;
-    border-bottom: 1px solid var(--color-border);
-    padding-left: 0.5rem;
+    color: var(--color-brand-blue-secondary);
+    font-family: "Source Sans Pro", sans-serif;
+    font-weight: var(--weight-normal);
+    /* border-bottom: 1px solid var(--color-border); */
   }
 
   .doc .tabs .dropddown-btn .fas {
@@ -962,8 +975,9 @@ code.language-console.hljs.shell {
     text-decoration: none;
   }
 
-  .doc .tabs ul {
-    box-shadow: 0 3px 10px -3px #ccc;
+  .doc .tabs ul.other-tablist {
+    box-shadow: 0px 3px 10px #0000000F;
+    border: 1px solid var(--color-brand-gray8);
     margin: 0;
     position: absolute;
     left: 0;
@@ -974,11 +988,16 @@ code.language-console.hljs.shell {
     background-color: var(--color-brand-white);
   }
 
-  .doc .tabs ul p {
-    color: var(--color-brand-gray1);
+  .doc .tabs ul.other-tablist p {
+    width: 100%;
+    height: 100%;
+    font-family: "Source Sans Pro", sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
-  .doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
+  /* .doc .tabset:not(.is-loading) .tabs li:not(.is-active) {
     background: var(--color-brand-white);
     min-height: 2.5rem;
     height: auto;
@@ -987,21 +1006,32 @@ code.language-console.hljs.shell {
 
   .doc .tabs li.is-active {
     display: none;
-  }
+  } */
 
-  .doc .tabs li {
+  .doc .tabs ul.other-tablist li {
     width: 100%;
     flex-wrap: wrap;
     margin-right: var(--base-space);
     border-top: 0;
-    border-bottom: 1px solid var(--color-border);
+    /* border-bottom: 1px solid var(--color-border); */
+  }
+
+
+  .doc .tabs ul.other-tablist li.is-active p,
+  .doc .tabs ul.other-tablist li p:hover {
+    background-color: var(--color-brand-gray7);
+  }
+
+  .doc .tabs ul.other-tablist li.is-active::before,
+  .doc .tabs ul.other-tablist li:hover::before {
+   content: none;
   }
 
   .doc .tabset > .content {
     width: 100%;
   }
 
-  .doc .tabs ul.show {
+  .doc .tabs ul.other-tablist.show {
     display: block;
   }
 }

src/js/05-tabset.js

@@ -2,53 +2,50 @@ var hash = window.location.hash
 // var smallBreak = 768 // Your small screen breakpoint in pixels
 find('.doc .tabset').forEach(function (tabset) {
   var active
+  var queueData = []
   var checkActiveClass
   var tabs = tabset.querySelector('.tabs')
   if (tabs) {
     var first
-    var dropdownMenu = document.querySelector('.tabs ul')
     find('li', tabs).forEach(function (tab, idx) {
       var id = (tab.querySelector('a[id]') || tab).id
+    //  console.log(tab)
       checkActiveClass = setTimeout(function () {
         var activeTabList = tab.classList.contains('is-active')
         if (activeTabList) {
-          document
-            .querySelector('.tabs')
-            .insertAdjacentHTML(
-              'beforebegin',
-              '<div class="active-tab-item-row"><a href="#" id="activeTabItem"></a><div>'
-            )
           document
             .querySelector('.tabs')
             .insertAdjacentHTML(
               'beforeend',
-              '<a href="#" class="dropddown-btn dropdown-btn-down">More <i class="fas fa-chevron-circle-down"></i></a>'
+              // '<div class="other-tab-box"><a href="#" class="dropddown-btn dropdown-btn-down">More... <i class="fas fa-chevron-circle-down"></i></a> <ul class="other-tablist" id="otherTabList"></ul></div>'
+              '<div class="other-tab-box"><a href="#" class="dropddown-btn dropdown-btn-down">More... </a> <ul class="other-tablist" id="otherTabList"></ul></div>'
             )
-          document.getElementById('activeTabItem').innerText = tab.innerText
           var dropdownBtn = document.querySelector('.dropdown-btn-down')
+          var dropdownMenu = document.querySelector('.tabs .other-tablist')
           dropdownBtn.addEventListener('click', function (e) {
             e.preventDefault()
             if (dropdownMenu.style.display === 'block' || dropdownMenu.classList.contains('show')) {
               dropdownMenu.classList.remove('show')
               dropdownMenu.classList.add('hide')
-              this.querySelector('.fas').classList.add('fa-chevron-circle-down')
-              this.querySelector('.fas').classList.remove('fa-chevron-circle-up')
             } else {
               dropdownMenu.classList.add('show')
               dropdownMenu.classList.remove('hide')
-              this.querySelector('.fas').classList.add('fa-chevron-circle-up')
-              this.querySelector('.fas').classList.remove('fa-chevron-circle-down')
             }
           })
         }
       }, 100)
 
+      if(idx > 3) {
+        queueData.push(tab)
+      }
+
       if (!id) return
       var pane = getPane(id, tabset)
       if (!idx) first = { tab: tab, pane: pane }
       if (!active && hash === '#' + id && (active = true)) {
         tab.classList.add('is-active')
         if (pane) pane.classList.add('is-active')
+
       } else if (!idx) {
         tab.classList.remove('is-active')
         if (pane) pane.classList.remove('is-active')
@@ -59,7 +56,18 @@ find('.doc .tabset').forEach(function (tabset) {
       first.tab.classList.add('is-active')
       if (first.pane) first.pane.classList.add('is-active')
     }
+
   }
+
+  setTimeout(function () {
+    var appendMoreTabList =  document.getElementById('otherTabList')
+
+    queueData.forEach(function (tablist) {
+        appendMoreTabList.appendChild(tablist)
+    })
+
+  }, 100)
+
   tabset.classList.remove('is-loading')
   clearTimeout(checkActiveClass, 20000)
 })
@@ -69,31 +77,40 @@ function activateTab (e) {
   var tab = this.tab
   var pane = this.pane
   var dropdownMenu = document.querySelector('.tabs ul')
-  var dropdownBtnIcon = document.querySelector('.dropdown-btn-down .fas')
+ // var dropdownBtnIcon = document.querySelector('.dropdown-btn-down .fas')
 
-  find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
-    it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
-    var activeTabList = tab.classList.contains('is-active')
-    if (activeTabList) {
-      document.getElementById('activeTabItem').innerText = tab.innerText
+  var nodeTab = document.querySelector('.tabs > ul')
+  var nodeDropdownTabNode = document.querySelector('.other-tablist')
+
+  if( tab.parentNode.classList[0] ==  'other-tablist') {
+      nodeDropdownTabNode.appendChild(nodeTab.lastElementChild)
+       nodeTab.appendChild(tab)
+  }
+
+  var activeTabList = tab.classList.contains('is-active')
+  // console.log(activeTabList, 127)
+  if (activeTabList) {
       dropdownMenu.classList.remove('show')
-      dropdownBtnIcon.classList.add('fa-chevron-circle-down')
-      dropdownBtnIcon.classList.remove('fa-chevron-circle-up')
     }
+
+  find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
+    it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
   })
 }
 
 function find (selector, from) {
   return Array.prototype.slice.call((from || document).querySelectorAll(selector))
 }
 setTimeout(function () {
-  document.querySelector(' #activeTabItem').addEventListener('click', function (e) {
+  document.querySelector(' .dropddown-btn').addEventListener('click', function (e) {
     e.preventDefault()
   })
-}, 3000)
+
+}, 1000)
 
 function getPane (id, tabset) {
   return find('.tab-pane', tabset).find(function (it) {
     return it.getAttribute('aria-labelledby') === id
   })
 }
+

src/js/11-page-customize.js

@@ -2,9 +2,9 @@
   'use strict'
   // for label edition/statuses
   var $labels = $('.edition').find('a')
-  console.log($labels.length)
+  // console.log($labels.length)
   for (var i = 0; i < $labels.length; i++) {
-    console.log(i, 445, $labels[i])
+  //  console.log(i, 445, $labels[i])
     if ($labels[i].text.toLocaleLowerCase().indexOf('community') !== -1) {
       $labels[i].parentNode.classList.add('page-edition')
     }