Merge pull request #81 from couchbase/aw-bug-fix-3

Issue fixes

Author: amarantha-k

src/css/base.css

@@ -95,6 +95,20 @@ i {
   padding: 0 var(--width-container-gutter);
 }
 
+@media all and (max-width: 992px) {
+  .container,
+  .container-fluid {
+    padding: 0 2rem;
+  }
+}
+
+@media all and (max-width: 767px) {
+  .container,
+  .container-fluid {
+    padding: 0 1.75rem;
+  }
+}
+
 .hide,
 .hide-nav {
   display: none;

src/css/component-frame.css

@@ -74,8 +74,7 @@
   right: 4px;
 }
 
-.component-frame .frame-dropdown.show,
-.component-frame .frame-body:hover .frame-dropdown {
+.component-frame .frame-dropdown.show {
   display: block;
 }
 

src/css/doc.css

@@ -430,10 +430,18 @@ ul ul ul {
   /* padding-left: var(--base-space); */
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
   border-radius: 5px;
-  /* align-items: center; */
+  align-items: center;
   max-width: var(--image-block-container);
 }
 
+.doc .imageblock.text-left {
+  align-items: flex-start;
+}
+
+.doc .imageblock.text-right {
+  align-items: flex-end;
+}
+
 .doc .imageblock img {
   display: inline-block;
 }
@@ -578,6 +586,7 @@ ul ul ul {
   padding-top: var(--base-large-space);
   padding-bottom: var(--base-large-space);
   /* white-space: pre-wrap; */
+
   /* NOTE enable these styles if side-to-side scrolling is preferred */
   overflow-wrap: normal;
   word-wrap: normal;

src/css/nav.css

@@ -517,14 +517,14 @@ a.collapse-menu span {
 
   nav.nav a.menu-expand-toggle {
     transform: rotate(90deg);
-    right: -4.8rem;
+    right: -4.3rem;
     opacity: 1;
     color: #fff;
     background-color: var(--color-brand-blue-secondary);
     border-radius: 0;
     top: 60px;
     font-size: 18px;
-    padding: 6px 14px;
+    padding: 2px 8px;
     text-decoration: none;
   }
 
@@ -549,9 +549,9 @@ a.collapse-menu span {
 
 @media screen and (max-width: 767px) {
   nav.nav a.menu-expand-toggle {
-    right: -3.8rem;
+    right: -3.4rem;
     top: 60px;
     font-size: 14px;
-    padding: 4px 10px;
+    padding: 2px 5px;
   }
 }

src/js/01-nav.js

@@ -3,6 +3,8 @@
 
   var nav = document.querySelector('nav.nav')
   var menuExpandToggle = document.querySelector('.menu-expand-toggle')
+  var versionToggle = document.querySelector('.clickable')
+  var versionDropdownList = document.querySelector('.frame-dropdown')
   var navMenu = {}
   if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return
   var navControl
@@ -35,7 +37,7 @@
 
   // Toggle class
   function toggleActive (e) {
-    // this.classList.toggle('open')
+    this.classList.toggle('open')
     this.classList.toggle('is-active')
   }
 
@@ -86,6 +88,23 @@
       nav.classList.add('collapse-menu')
     }
   })
+
+  if (versionToggle) {
+    versionToggle.addEventListener('click', function (e) {
+      e.preventDefault()
+      if (versionDropdownList.classList.contains('show')) {
+        versionDropdownList.classList.remove('show')
+      } else {
+        versionDropdownList.classList.add('show')
+      }
+      concealEvent(e)
+    })
+  }
+
+  window.addEventListener('click', function (e) {
+    versionDropdownList.classList.remove('show')
+  })
+
   // has children in li
   function concealEvent (e) {
     e.stopPropagation()

src/js/02-on-this-page.js

@@ -42,7 +42,7 @@
   if (sidebar) {
     window.addEventListener('load', function () {
       onScroll()
-      hashScroll()
+      // hashScroll()
       window.addEventListener('scroll', onScroll)
     })
   }
@@ -94,11 +94,11 @@
     return [].slice.call(collection)
   }
 
-  function hashScroll () {
-    // element which needs to be scrolled to
-    var hasValue = window.location.hash
-    var elementTillScroll = document.querySelector(hasValue)
-    // scroll to element
-    elementTillScroll.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
+  // function hashScroll () {
+  //   // element which needs to be scrolled to
+  //   var hasValue = window.location.hash
+  //   var elementTillScroll = document.querySelector(hasValue)
+  //   // scroll to element
+  //   elementTillScroll.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  // }
 })()

src/js/06-page-rating.js

@@ -78,7 +78,10 @@
 
   if (window.location.hash) {
     var hash = window.location.hash
-    $('html, body').animate({ 'scrollTop': $(hash).offset().top }, 'slow')
+    if ($(hash).length !== 0) {
+      var offSetValue = $(hash).offset().top
+      $('html, body').animate({ 'scrollTop': offSetValue }, 'slow')
+    }
   }
   /*eslint-env jquery*/
 })(jQuery)

src/partials/nav-version-control.hbs

@@ -13,7 +13,7 @@
 {{{page.component.title}}}
 </span>
 <div class="frame-link-dropdowns">
-<a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span> <i class="fas fa-chevron-down"></i></a>
+<a class="frame-link component clickable" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span> <i class="fas fa-chevron-down"></i></a>
 <div class="frame-dropdown versions">
 <div class="column">
 <ul class="frame-dropdown-list">