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

Resolved Eslint errors & Added collapse button

Author: amarantha-k

preview-src/landing-page-tutorials.adoc

@@ -4,17 +4,41 @@
 :!sectids:
 
 
+= Couchbase Tutorials
+++++
+<div class="card-row">
+++++
+
+[.column]
+====== {empty}
+[.content]
+The Couchbase SDK allows applications to access a Couchbase cluster. It offers traditional synchronous APIs as well as scalable asynchronous APIs to maximize performance
+
+[.column]
+====== {empty}
+[.media-left]
+icon:book-reader[set= fas]
+
+++++
+</div>
+++++
+
+
+== Tutorials
+++++
+<div class="card-row two-column-row">
+++++
 [.column]
 [.data-filter-column]
 ====== {empty}
 ++++
-<div data-level="advanced" data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
+<div  data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
 <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
 <div class="filter-info">
 <h5 >
 <img src="_/img/landing-page-icon/advanced-icon.svg" alt="" />
 Advanced</h5>
-<span data-role="advanced">Developer</span>
+<span>Developer</span>
 </div>
 </div>
 ++++
@@ -59,7 +83,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate c# node Python devOps"  class="sub-heading two-column-heading">
+    <div  data-category="intermediate c# node Python devOps"  class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -101,7 +125,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate .net developer" class="sub-heading two-column-heading">
+    <div  data-category="intermediate .net developer" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -142,7 +166,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="beginner" data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
+    <div data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -184,7 +208,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate react developer" class="sub-heading two-column-heading">
+    <div  data-category="intermediate react developer" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -225,7 +249,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="advanced" data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
+    <div  data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -259,6 +283,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 * React
 * Vue
 
+++++
+</div>
+++++
+
 ++++
 </div>
 ++++

src/css/landing-page.css

@@ -154,6 +154,11 @@
   padding: 0;
 }
 
+.media-left .icon {
+  font-size: 90px;
+  color: var(--color-brand-blue-secondary);
+}
+
 .doc.landing-page-doc .column .paragraph,
 .doc.landing-page-doc .column .videoblock,
 .doc.landing-page-doc .column .imageblock {

src/css/nav.css

@@ -28,15 +28,15 @@
   height: var(--height-nav-with-version);
 }
 
-@media screen and (max-width: 768px) {
+/* @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 {
@@ -432,7 +432,7 @@ html.is-clipped--nav {
 
  */
 
- a.menu-expand-toggle {
+a.menu-expand-toggle {
   display: inline-block;
   position: absolute;
   top: 15px;
@@ -448,7 +448,7 @@ html.is-clipped--nav {
 
 @media screen and (min-width: 993px) {
   .nav.collapse-menu {
-    width: 0rem;
+    width: 0;
   }
 
   .nav.collapse-menu .frame-body .title,
@@ -485,16 +485,17 @@ html.is-clipped--nav {
     border-left: 2px solid #eee;
     border-right: 2px solid #eee;
   }
+
   .nav-control {
     display: none;
   }
 }
 
 @media screen and (max-width: 992px) {
   .left-sidebar-menu {
-   left: 0;
-   z-index: 9;
-   transform: translate(-100%, 0);
+    left: 0;
+    z-index: 9;
+    transform: translate(-100%, 0);
   }
 
   .nav.collapse-menu a.menu-expand-toggle {
@@ -518,23 +519,4 @@ html.is-clipped--nav {
   .nav-menu {
     height: calc(100vh - 8.5rem) !important;
   }
-
-  /* .nav.collapse-menu {
-    width: 0rem;
-  }
-
-  .nav.collapse-menu .frame-body .title,
-  .nav.collapse-menu .version-control-box,
-  .nav.collapse-menu .nav-menu {
-    font-size: 0;
-    display: none;
-  }
-
-  .nav.collapse-menu .left-sidebar-menu {
-    border: 0;
-    background-color: transparent;
-  }
-
- */
-
 }

src/js/01-nav.js

@@ -6,7 +6,7 @@
   var navMenu = {}
   if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return
   var navControl
-  var currentPageItem = navMenu.element.querySelector('.is-current-page')
+  // var currentPageItem = navMenu.element.querySelector('.is-current-page')
 
   // NOTE prevent text from being selected by double click
   navMenu.element.addEventListener('mousedown', function (e) {
@@ -63,6 +63,7 @@
 
   // 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' : ''
   // }
 
@@ -139,7 +140,7 @@
       nav.classList.add('show-nav')
     }
 
-    menuExpandToggle.addEventListener('click', function(e) {
+    menuExpandToggle.addEventListener('click', function (e) {
       e.preventDefault()
       // var navBarHeight =  nav.querySelector('.nav-menu')
       // navBarHeight.style.height = '100vh'
@@ -149,9 +150,8 @@
       } else {
         nav.classList.add('collapse-menu')
       }
-
     })
-  }, 500)
+  }, 100)
   // has children in li
   // $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
   function concealEvent (e) {

src/js/05-tabset.js

@@ -103,7 +103,6 @@ setTimeout(function () {
       e.preventDefault()
     })
   }
-
 }, 1000)
 
 function getPane (id, tabset) {

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

@@ -2,6 +2,7 @@
   'use strict'
   var showData = false
   var contributors
+  if (document.getElementById('contributorList')) {
   var contributorList = document.getElementById('contributorList')
   var commitdateTag = document.getElementById('commitdate')
   var otherContributor = document.getElementById('otherContributor')
@@ -82,4 +83,5 @@
     .catch(function (err) {
       console.log(err, 13)
     })
+  }
 })()

src/js/09-table-responsive.js

@@ -22,9 +22,7 @@
           if (ele[i] !== undefined) {
             var maxHeight = ele[i].offsetHeight
           }
-
           for (var j = 1; j <= columns; j++) {
-
             if (
               elem.querySelector('tr:nth-child(' + j + ') td:nth-child(' + i + ')') != null &&
               elem.querySelector(' tr:nth-child(' + j + ') td:nth-child(' + i + ')') !== undefined

src/js/vendor/docsearch.bundle.js

@@ -16,11 +16,12 @@
       algoliaOptions: { hitsPerPage: 25 },
       debug: false,
     })
-    document.querySelector('button.search').addEventListener('click', function (e) {
-      if (document.querySelector('.navbar-start').classList.toggle('reveal-search-input')) {
-        ds.autocomplete.autocomplete.setVal('')
-        ds.input.focus()
-      }
-    })
+    ds.input.focus()
+    // document.querySelector('button.search').addEventListener('click', function (e) {
+    //   if (document.querySelector('.navbar-start').classList.toggle('reveal-search-input')) {
+    //     ds.autocomplete.autocomplete.setVal('')
+    //     ds.input.focus()
+    //   }
+    // })
   })
 })()

src/partials/body-landing-tutorials.hbs

@@ -1,33 +1,8 @@
 
-  <main class="article" data-ceiling="topbar">
-    <article class="doc landing-page-doc">
-      {{!-- <h1 class="page"> Couchbase Tutorials </h1>
-      <div class="card-row">
-        <div class="column">
-          <div class="paragraph">
-            <p>
+<main class="article" data-ceiling="topbar">
+<article class="doc landing-page-doc">
 
-             The Couchbase SDK allows applications to access a Couchbase cluster. It offers traditional synchronous APIs as well as scalable asynchronous APIs to maximize performance.
-
-            </p>
-          </div>
-        </div>
-        <div class="column">
-          <figure class="media-left">
-            <img src="_/img/landing-page-icon/book-reader-icon.svg" alt="" />
-          </figure>
-        </div>
-      </div>
-      <div class="heading">
-        <h2> Tutorials </h2>
-      </div> --}}
-
-      <div class="card-row two-column-row ">
 {{{page.contents}}}
-      </div>
-      {{!-- <div class="no-record hide">
-        <h3> No Record found  </h3>
-      </div> --}}
 
-    </article>
-  </main>
+</article>
+</main>