Merge branch 'master' of https://github.com/couchbase/docs-ui-sandbox into aw-bug-fix-3

Author: anmol-algo

README.adoc

@@ -1,6 +1,6 @@
 = Couchbase Documentation UI
 // Variables:
-:current-release: prod-79
+:current-release: prod-85
 // Settings:
 :!example-caption:
 :experimental:

src/css/base.css

@@ -99,6 +99,12 @@ i {
 .hide-nav {
   display: none;
 }
+
+@media screen and (min-width: 992px) {
+  .body.container {
+    padding-left: 0;
+  }
+}
 /* .container-fluid {
   max-width: var(--width-container-fluid);
   padding: 0;

src/css/body.css

@@ -59,6 +59,6 @@ aside.toc.sidebar {
 
 @media screen and (max-width: 767px) {
   div.body {
-    margin-top: 3.9rem;
+    margin-top: 4.2rem;
   }
 }

src/css/component-frame.css

@@ -20,7 +20,7 @@
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
-  position: relative;
+  /* position: relative; */
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 0;
@@ -32,7 +32,7 @@
 
 .frame-body .title {
   margin: 0 0 0 0;
-  font-size: var(--font-medium);
+  font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
@@ -56,8 +56,12 @@
 .frame-body .frame-link {
   position: relative;
   color: var(--color-brand-gray1);
-  font-size: 18px;
-  margin-left: 4px;
+  font-size: 1.125rem;
+  font-weight: var(--weight-semibold);
+}
+
+.frame-body .frame-link .version {
+  margin: 0 8px 0 4px;
 }
 
 .frame-dropdown {
@@ -67,6 +71,7 @@
   top: 100%;
   z-index: 1;
   padding: 0;
+  right: 4px;
 }
 
 .component-frame .frame-dropdown.show,
@@ -76,8 +81,6 @@
 
 .frame-link-dropdowns .frame-link {
   color: var(--color-brand-gray1);
-  font-weight: var(--weight-semibold);
-  margin: 0;
   font-family: "Source Sans Pro", sans-serif;
 }
 
@@ -89,7 +92,7 @@
 .frame-dropdown .frame-dropdown-list,
 .frame-dropdown .related {
   margin: 0;
-  padding: 0;
+  padding: 0.5rem 0;
   list-style: none;
   min-width: 125px;
 }
@@ -103,7 +106,7 @@
 
 .frame-dropdown ul li a,
 .frame-dropdown .related li a {
-  padding: 8px 0.625rem;
+  padding: 0.5rem 1rem;
   display: inline-block;
   width: 100%;
   color: var(--color-brand-primary);
@@ -140,7 +143,7 @@ ul.frame-dropdown-list li:last-child,
 .frame-link,
 .frame-item,
 .navbar-item {
-  font-size: var(--font-small);
+  font-size: var(--font-base);
   color: var(--color-brand-gray4);
   text-decoration: none;
 }

src/css/doc.css

@@ -16,13 +16,16 @@
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
   margin-bottom: 0;
+  margin-left: -2.5rem;
+  padding-left: 2.5rem;
 }
 
 .doc h1 {
   font-size: var(--heading-h1);
   font-weight: var(--weight-light);
   letter-spacing: 0;
   margin: 2.5rem 0 0;
+  margin-left: -2.5rem;
 }
 
 .page-heading-title {
@@ -1091,7 +1094,7 @@ table.tableblock pre code.language-bash.hljs {
 
   .doc h2 {
     font-size: var(--heading-h2-sm);
-    margin: 1rem 0 1rem;
+    margin: 1rem 0 1rem -2.5rem;
   }
 
   .doc h3 {

src/css/header.css

@@ -107,20 +107,21 @@
 
 .try-btn {
   font-weight: var(--weight-bold);
+  margin-left: var(--column-space);
 }
 
 .parent-site {
-  margin: 0 10px;
-  padding: 0 10px;
+  /* margin: 0 10px;
+  padding: 0 10px; */
   /* border-right: 1px solid var(--color-brand-gray5);
   border-left: 1px solid var(--color-brand-gray5); */
 }
 
-.parent-site a {
+/* .parent-site a {
   color: var(--color-brand-gray4);
   font-size: 1rem;
   font-family: "Source Sans Pro", sans-serif;
-}
+} */
 
 .search .query {
   border: none;
@@ -239,10 +240,10 @@
     width: 283px;
   }
 
-  .parent-site {
+  /* .parent-site {
     margin: 0;
     padding: 0 var(--column-space);
-  }
+  } */
 
   .navbar.navbar-new-top {
     padding: 1.25rem 0;
@@ -267,7 +268,8 @@
 
   .primary-action {
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-around;
+    width: 100%;
   }
 
   .navbar-collapse {
@@ -294,17 +296,18 @@
     right: 5px;
   }
 
-  .parent-site {
+  /* .parent-site {
     border-left: none;
   }
 
   .parent-site a {
     color: var(--color-brand-white);
-  }
+  } */
 
   .try-btn {
     background: var(--color-brand-white);
     color: var(--color-brand-blue);
+    margin: 0;
   }
 
   .header-bottom-row.is-active {

src/css/nav.css

@@ -251,9 +251,9 @@ html.is-clipped--nav {
   background-size: 75%;
 }
 
-.is-inactive {
+/* .is-inactive {
   display: none;
-}
+} */
 
 .main-nav-parent {
   font-size: var(--font-small);
@@ -316,7 +316,7 @@ html.is-clipped--nav {
   color: var(--color-brand-black);
   font-size: var(--font-base);
   line-height: var(--line-height-base);
-  font-weight: var(--weight-semibold);
+  /* font-weight: var(--weight-semibold); */
 }
 
 .is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] {

src/helpers/canonical-url.js

@@ -14,7 +14,7 @@
   })
 
   find(/*'.nav-toggle',*/ '.in-toggle', navMenu.element).forEach(function (toggleBtn) {
-    console.log(toggleBtn, 17)
+    // console.log(toggleBtn, 17)
     var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element)
     toggleBtn.addEventListener('click', toggleActive.bind(navItem))
     // var dataDepth = toggleBtn.getAttribute('data-depth')
@@ -31,68 +31,14 @@
     }
   })
 
-  // fitNavMenuInit({})
-  // window.addEventListener('load', fitNavMenuInit)
-  // window.addEventListener('resize', fitNavMenuInit)
-
   if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
 
-  // function scrollItemToMiddle (el, parentEl) {
-  //   var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop
-  //   if (adjustment > 0) parentEl.scrollTop = adjustment
-  // }
-
-  // function fitNavMenuInit (e) {
-  //   window.removeEventListener('scroll', fitNavMenuOnScroll)
-  //   navMenu.element.style.height = ''
-  //   if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) {
-  //     // QUESTION should we check if x value > 0 instead?
-  //     if (window.getComputedStyle(nav).visibility === 'visible') {
-  //       if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer')
-  //       fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement)
-  //       window.addEventListener('scroll', fitNavMenuOnScroll)
-  //     }
-  //     if (currentPageItem && e.type !== 'resize') {
-  //       scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element)
-  //     }
-  //   }
-  // }
-
-  // function fitNavMenuOnScroll () {
-  //   fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement)
-  // }
-
-  // function fitNavMenu (preferredHeight, availableHeight, encroachingElement) {
-  //   var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top
-  /*eslint max-len: ["error", { "code": 180 }]*/
-  //   navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : ''
-  // }
-
-  var navMenuControl
-  if (document.querySelector('.main-nav-parent')) {
-    navMenuControl = document.querySelector('.main-nav-parent')
-    navMenuControl.addEventListener('click', function () {
-      for (var i = 0; i < navItems.length; i++) {
-        navItems[i].classList.remove('is-active')
-        navItems[i].classList.remove('is-inactive')
-        navItems[i].classList.remove('open')
-      }
-      this.style.display = 'none'
-    })
-  }
   // Toggle class
   function toggleActive (e) {
-    // if (this.getAttribute('data-depth') === '1') {
-    //   var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)')
-    //   for (var i = 0; i < otherNavs.length; i++) {
-    //     otherNavs[i].classList.add('is-inactive')
-    //   }
-    // }
-    this.classList.toggle('open')
+    // this.classList.toggle('open')
     this.classList.toggle('is-active')
   }
 
-  var navItems = document.querySelectorAll('.nav .nav-item')
   function revealNav (e) {
     if (nav.classList.contains('is-active')) return hideNav(e)
     document.documentElement.classList.add('is-clipped--nav')
@@ -148,7 +94,7 @@
   setTimeout(function () {
     if (document.querySelector('.is-current-page')) {
       var currentPageMenu = document.querySelector('.is-current-page')
-      var topPositon = currentPageMenu.offsetTop
+      var topPositon = currentPageMenu.offsetTop - 100
       var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu')
       leftMenu.scrollTop = topPositon
     }
@@ -166,9 +112,9 @@
 
       // hide main menu for top level navigation -
 
-      if (nav.className.includes('is-current-page')) {
-        navMenuControl.style.display = 'none'
-      }
+      // if (nav.className.includes('is-current-page')) {
+      //   navMenuControl.style.display = 'none'
+      // }
 
       // hide in second level menu
       if (nav.className.includes('is-current-path')) {