Merge pull request #34 from couchbase/ui-bug-fixes

Sandbox UI bug fixes

Author: amarantha-k

src/css/doc.css

@@ -415,12 +415,11 @@
 .doc .abstract blockquote * {
   font-weight: inherit;
 }
-
-.doc .abstract blockquote::before {
+/* .doc .abstract blockquote::before {
   content: "Summary: ";
   color: var(--color-muted);
   font-weight: var(--weight-medium);
-}
+} */
 
 .doc ul {
   margin: 0;

src/css/landing-page.css

@@ -244,7 +244,6 @@
 
 /* CSS for nav filter */
 .nav.tutorials-filter .nav-menu {
-  top: calc(0.91rem + var(--height-navbar));
   padding: 20px;
   background: var(--color-brand-gray7);
 }

src/css/nav.css

@@ -22,7 +22,32 @@
   overflow-y: auto;
   background-color: var(--color-brand-gray7);
   height: var(--height-nav);
-  transition: all 0.3s;
+}
+
+.version-control-box + .nav-menu {
+  height: var(--height-nav-with-version);
+}
+
+@media screen and (max-width: 768px) {
+  .left-sidebar-menu {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    z-index: var(--z-index-nav-mobile);
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .left-sidebar-menu {
+    top: var(--height-to-body);
+    margin-bottom: 1.5rem;
+    height: 100%;
+    /* height: var(--height-nav); */
+    z-index: var(--z-index-nav);
+    border-left: 2px solid #eee;
+    border-right: 2px solid #eee;
+  }
 }
 
 .nav-menu .nav-link,

src/css/table.css

@@ -119,7 +119,7 @@ table.table-tutorial tr td:last-child {
     top: -30px;
   }
 
-  div + table.tableblock.caption-table,
+  table.tableblock.caption-table,
   div.ulist + table.tableblock,
   table.tableblock + table.tableblock {
     margin-top: 2.5rem;

src/css/toc.css

@@ -76,8 +76,7 @@
   transition: all 0.3s;
 }
 
-.toc .toc-menu li a.is-active::before,
-.toc .toc-menu li a:hover::before {
+.toc .toc-menu li a.is-active::before {
   height: 100%;
 }
 

src/css/vars.css

@@ -70,7 +70,8 @@
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
   --height-toc-sidebar: calc(var(--height-min-body));
-  --height-nav: calc(100vh - var(--height-to-body) - var(--height-version-control));
+  --height-nav: calc(var(--height-min-body) + var(--height-spacer));
+  --height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
   /* --width-main-gutter: 1.5rem; */
   --width-main-gutter: 2.5rem;

src/js/06-page-rating.js

@@ -22,13 +22,13 @@
       // dialogBox.style.display = 'block'
       this.classList.add('active')
       helpNoBtn.classList.remove('active')
-      console.log(yesBtnData, 16)
+     // console.log(yesBtnData, 16)
     })
     helpNoBtn.addEventListener('click', function (e) {
       // dialogBox.style.display = 'block'
       this.classList.add('active')
       helpYesBtn.classList.remove('active')
-      console.log(noBtnData, 27)
+     // console.log(noBtnData, 27)
     })
     skipBtnMsg.addEventListener('click', function (e) {
       dialogBox.style.display = 'none'

src/js/08-contributor-bot.js

@@ -1,6 +1,5 @@
 ;(function () {
   'use strict'
-  // console.log('contributor page')
   var showData = false
   var contributors
   var contributorList = document.getElementById('contributorList')

src/js/09-table-responsive.js

@@ -15,8 +15,6 @@
   function shapeTable () {
     if (window.innerWidth < smallBreak) {
       tables.forEach(function (elem, index) {
-        // console.log(elem.querySelector('tr'))
-
         var columns = elem.querySelectorAll('tbody tr').length
         var rows = elem.querySelectorAll('thead tr th').length
         for (var i = 1; i <= rows; i++) {
@@ -26,12 +24,11 @@
           }
 
           for (var j = 1; j <= columns; j++) {
-            // console.log(i, j, 23)
+
             if (
               elem.querySelector('tr:nth-child(' + j + ') td:nth-child(' + i + ')') != null &&
               elem.querySelector(' tr:nth-child(' + j + ') td:nth-child(' + i + ')') !== undefined
             ) {
-              // console.log(elem.querySelector('tr:nth-child(' + j + ') td:nth-child(' + i + ')'), 25)
               if (elem.querySelector('tr:nth-child(' + j + ') td:nth-child(' + i + ')').offsetHeight > maxHeight) {
                 maxHeight = elem.querySelector('tr:nth-child(' + j + ') td:nth-child(' + i + ')').offsetHeight
               }

src/js/10-landing-page-nav.js

@@ -8,7 +8,6 @@
   // add class even odd
   var $allData = $('.data-filter-column')
   for (var i = 0; i < $allData.length; i++) {
-    console.log(i, 445, $allData[i])
     if (i % 2 === 1) {
       $allData[i].classList.add('even')
     } else {
@@ -24,7 +23,6 @@
       if (!Object.prototype.hasOwnProperty.call(selectedFiltersData, this.name)) {
         selectedFiltersData[this.name] = []
       }
-      // console.log(selectedFiltersData, 27)
       selectedFiltersData[this.name].push(this.value.toLowerCase())
     })
     // create a collection containing all of the filterable elements
@@ -39,9 +37,7 @@
         var currentFilterValues = $(this).find('.sub-heading').data('category').toLowerCase().split(' ')
 
         $.each(currentFilterValues, function (_, currentFilterValue) {
-          //  console.log('enter', currentFilterValues, currentFilterValue)
           if ($.inArray(currentFilterValue, filterValues) !== -1) {
-            console.log('true', currentFilterValue, filterValues)
             matched = true
             return false
           }
@@ -54,7 +50,6 @@
     $('.data-filter-column').addClass('hide').filter($filteredResultsData).addClass('show').removeClass('hide')
     // add class for data-filter-column
     for (var i = 0; i < $filteredResultsData.length; i++) {
-      console.log(i, 445, $filteredResultsData[i])
       if (i % 2 === 1) {
         $filteredResultsData[i].classList.add('even')
       } else {
@@ -70,9 +65,6 @@
         inputs[j].checked = false
       }
       for (var i = 0; i < $allData.length; i++) {
-        console.log(i, 445, $allData[i])
-        // $allData[i].classList.remove('even')
-        // $allData[i].classList.remove('odd')
         if (i % 2 === 1) {
           $allData[i].classList.add('even')
         } else {