Merge pull request #49 from couchbase/tabset-fixes

amarantha-k · web-flow · commit ca28eadcb4c2 · 2020-06-30T15:47:30.000-07:00
Tabset fixes bug fixes for more button
diff --git a/src/css/base.css b/src/css/base.css
@@ -7,6 +7,7 @@
 html {
   box-sizing: border-box;
   text-size-adjust: 100%;
+  scroll-behavior: smooth;
 }
 
 html,
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
@@ -1,19 +1,31 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
-  padding: 12px 15px 12px 15px;
+  /* padding: 12px 15px 12px 15px; */
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   justify-content: center;
+  position: relative;
+}
+
+.frame-icon {
+  padding: 12px 0 12px 15px;
 }
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
   position: relative;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-right: 15px;
+  line-height: 2;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .frame-body .title {
-  margin: 0;
+  margin: 0 4px 0 0;
   font-size: var(--font-medium);
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
@@ -23,23 +35,25 @@
 
 .component-frame .frame-link-dropdowns {
   display: inline-block;
+  line-height: 1;
 }
 
 .frame-body .frame-link {
   position: relative;
 }
 
-.frame-body .frame-link-dropdowns:hover .frame-dropdown {
-  display: block;
-}
-
 .frame-dropdown {
   position: absolute;
   display: none;
-  left: 56%;
-  top: 0;
+  left: auto;
+  top: 100%;
   z-index: 1;
-  padding: 47px 0 0;
+  padding: 0;
+}
+
+.component-frame .frame-dropdown.show,
+.component-frame .frame-body:hover .frame-dropdown {
+  display: block;
 }
 
 .frame-link-dropdowns .frame-link {
@@ -73,6 +87,7 @@
   width: 100%;
   color: var(--color-brand-primary);
   font-weight: var(--weight-semibold);
+  line-height: var(--line-height-base);
 }
 
 .frame-dropdown ul li a:hover,
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -769,6 +769,7 @@ table.tableblock pre code.language-bash.hljs {
 
 .doc .tabs.ulist {
   margin-top: 0;
+  padding-left: 0;
 }
 
 .doc .tabs ul {
@@ -999,6 +1000,10 @@ table.tableblock pre code.language-bash.hljs {
   display: block;
 }
 
+.other-tab-box.desktop-hide {
+  display: none;
+}
+
 /* Media css  */
 
 @media screen and (max-width: 767px) {
@@ -1029,6 +1034,10 @@ table.tableblock pre code.language-bash.hljs {
     font-size: var(--heading-h4-sm);
   }
 
+  .other-tab-box.desktop-hide {
+    display: block;
+  }
+
   .doc .admonitionblock td.content {
     padding-left: 1rem;
   }
diff --git a/src/css/landing-page.css b/src/css/landing-page.css
@@ -124,6 +124,11 @@
   flex-wrap: wrap;
 }
 
+.doc.landing-page-doc .other-info-list .box.ulist,
+.doc.landing-page-doc .other-info-list .box.olist {
+  padding-left: 0;
+}
+
 .doc.landing-page-doc .other-info-list .box {
   padding-right: 40px;
 }
diff --git a/src/js/05-tabset.js b/src/js/05-tabset.js
@@ -1,94 +1,115 @@
 var hash = window.location.hash
 var queueData = []
 var checkActiveClass
-var tabOnLargeScreen = 3 // Display tab on desktop
+var tabOnLargeScreen = 5 // Display tab on desktop
 var tabOnSmallScreen = 1 // display tab on mobile view bewlow 768px screen
 var smallBreak = 768 // Your small screen breakpoint in pixels
 find('.doc .tabset').forEach(function (tabset) {
   var active
   var tabs = tabset.querySelector('.tabs')
   if (tabs) {
     var first
-    find('li', tabs).forEach(function (tab, idx) {
-      var id = (tab.querySelector('a[id]') || tab).id
-      checkActiveClass = setTimeout(function () {
-        var activeTabList = tab.classList.contains('is-active')
-        if (activeTabList) {
-          document.querySelector('.tabs').insertAdjacentHTML(
-            'beforeend',
-            /*eslint max-len: ["error", { "code": 180 }]*/
-            '<div class="other-tab-box"><a href="#" class="dropddown-btn dropdown-btn-down">More... </a> <ul class="other-tablist" id="otherTabList"></ul></div>'
-          )
-          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')
-            } else {
-              dropdownMenu.classList.add('show')
-              dropdownMenu.classList.remove('hide')
+    find('ul', tabs).forEach(function (ulTabSet, id) {
+      if (ulTabSet) {
+        find('li', ulTabSet).forEach(function (tab, idx) {
+          var id = (tab.querySelector('a[id]') || tab).id
+
+          if (window.innerWidth < smallBreak) {
+            if (idx > tabOnSmallScreen - 1) {
+              queueData.push(tab)
             }
-          })
-        }
-      }, 100)
-      if (window.innerWidth < smallBreak) {
-        if (idx > tabOnSmallScreen - 1) {
-          queueData.push(tab)
-        }
-      } else {
-        if (idx > tabOnLargeScreen - 1) {
-          queueData.push(tab)
-        }
-      }
+          } else {
+            if (idx > tabOnLargeScreen - 1) {
+              queueData.push(tab)
+            }
+          }
+
+          checkActiveClass = setTimeout(function () {
+            var activeTabList = tab.classList.contains('is-active')
 
-      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')
+            if (activeTabList) {
+              if (queueData.length > 0) {
+                if (window.innerWidth > smallBreak && (tab.parentNode.childElementCount > tabOnLargeScreen - 1)) {
+                  tab.parentNode.parentNode.insertAdjacentHTML(
+                    'beforeend',
+                    /*eslint max-len: ["error", { "code": 180 }]*/
+                    '<div class="other-tab-box"><a href="#" class="dropddown-btn dropdown-btn-down">More... </a> <ul class="other-tablist"></ul></div>'
+                  )
+                } else {
+                  tab.parentNode.parentNode.insertAdjacentHTML(
+                    'beforeend',
+                    /*eslint max-len: ["error", { "code": 180 }]*/
+                    '<div class="other-tab-box desktop-hide"><a href="#" class="dropddown-btn dropdown-btn-down">More... </a> <ul class="other-tablist"></ul></div>'
+                  )
+                }
+                var dropdownBtn = tab.parentNode.parentNode.querySelector('.dropdown-btn-down')
+                var dropdownMenu = tab.parentNode.parentNode.querySelector('.tabs .other-tablist')
+                dropdownBtn.addEventListener('click', function (e) {
+                  console.log(e, 'enter')
+                  e.preventDefault()
+                  if (dropdownMenu.style.display === 'block' || dropdownMenu.classList.contains('show')) {
+                    dropdownMenu.classList.remove('show')
+                    dropdownMenu.classList.add('hide')
+                  } else {
+                    dropdownMenu.classList.add('show')
+                    dropdownMenu.classList.remove('hide')
+                  }
+                })
+              }
+            }
+          }, 40)
+
+          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')
+          }
+          tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
+        })
       }
-      tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane }))
     })
+
     if (!active && first) {
       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)
 })
 
+setTimeout(function () {
+  if (queueData.length) {
+    queueData.forEach(function (tablist) {
+      tablist.parentNode.nextElementSibling.lastElementChild.appendChild(tablist)
+    })
+  }
+}, 200)
+// to activate tabset
 function activateTab (e) {
   e.preventDefault()
   var tab = this.tab
   var pane = this.pane
+  // Moving element from dropdown into tabset list
   var tabMenu = document.querySelector('.tabs ul')
-  var nodeTab = document.querySelector('.tabs > ul')
-  var nodeDropdownTabNode = document.querySelector('.other-tablist')
+  var nodeTab = tab.parentNode.parentNode.parentNode.querySelector('.tabs > ul')
+  var nodeDropdownTabNode = tab.parentNode
   if (tab.parentNode.classList[0] === 'other-tablist') {
     nodeDropdownTabNode.appendChild(nodeTab.lastElementChild)
     nodeTab.appendChild(tab)
     nodeDropdownTabNode.classList.remove('show')
   }
-  var activeTabList = tab.classList.contains('is-active')
-  if (activeTabList) {
+  var activeTabListItem = tab.classList.contains('is-active')
+  if (activeTabListItem) {
     tabMenu.classList.remove('show')
   }
-
+  // for tab active pane
   find('.tabs li, .tab-pane', this.tabset).forEach(function (it) {
     it === tab || it === pane ? it.classList.add('is-active') : it.classList.remove('is-active')
   })
@@ -103,7 +124,7 @@ setTimeout(function () {
       e.preventDefault()
     })
   }
-}, 1000)
+}, 200)
 
 function getPane (id, tabset) {
   return find('.tab-pane', tabset).find(function (it) {

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`html {`
`8`	`8`	`box-sizing: border-box;`
`9`	`9`	`text-size-adjust: 100%;`
	`10`	`+ scroll-behavior: smooth;`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`html,`
Original file line number	Diff line number	Diff line change
`@@ -769,6 +769,7 @@ table.tableblock pre code.language-bash.hljs {`
`769`	`769`
`770`	`770`	`.doc .tabs.ulist {`
`771`	`771`	`margin-top: 0;`
	`772`	`+ padding-left: 0;`
`772`	`773`	`}`
`773`	`774`
`774`	`775`	`.doc .tabs ul {`
`@@ -999,6 +1000,10 @@ table.tableblock pre code.language-bash.hljs {`
`999`	`1000`	`display: block;`
`1000`	`1001`	`}`
`1001`	`1002`
	`1003`	`+.other-tab-box.desktop-hide {`
	`1004`	`+ display: none;`
	`1005`	`+}`
	`1006`	`+`
`1002`	`1007`	`/* Media css */`
`1003`	`1008`
`1004`	`1009`	`@media screen and (max-width: 767px) {`
`@@ -1029,6 +1034,10 @@ table.tableblock pre code.language-bash.hljs {`
`1029`	`1034`	`font-size: var(--heading-h4-sm);`
`1030`	`1035`	`}`
`1031`	`1036`
	`1037`	`+ .other-tab-box.desktop-hide {`
	`1038`	`+ display: block;`
	`1039`	`+ }`
	`1040`	`+`
`1032`	`1041`	`.doc .admonitionblock td.content {`
`1033`	`1042`	`padding-left: 1rem;`
`1034`	`1043`	`}`
Original file line number	Diff line number	Diff line change
`@@ -124,6 +124,11 @@`
`124`	`124`	`flex-wrap: wrap;`
`125`	`125`	`}`
`126`	`126`
	`127`	`+.doc.landing-page-doc .other-info-list .box.ulist,`
	`128`	`+.doc.landing-page-doc .other-info-list .box.olist {`
	`129`	`+ padding-left: 0;`
	`130`	`+}`
	`131`	`+`
`127`	`132`	`.doc.landing-page-doc .other-info-list .box {`
`128`	`133`	`padding-right: 40px;`
`129`	`134`	`}`