From ea2e05d2d390eb6740b06b65bfa3760a038c88c7 Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Wed, 24 Jun 2020 13:06:33 +0530
Subject: [PATCH 1/6] UI issues fixes for code example block

---
 src/css/component-frame.css | 3 +--
 src/css/doc.css             | 6 +++---
 src/js/05-tabset.js         | 4 ++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index 8760c723..e6ffc6e3 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -81,8 +81,7 @@
 .frame-dropdown ul.frame-dropdown-list li,
 .frame-dropdown ul.related li {
   border-bottom: 1px solid var(--color-brand-gray8);
-  /* padding-bottom: 5px; */
-  /* margin-bottom: 5px; */
+
 }
 
 ul.frame-dropdown-list li:last-child,
diff --git a/src/css/doc.css b/src/css/doc.css
index a3e1600e..a95a28f0 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -484,9 +484,9 @@
 }
 
 .doc .exampleblock > .content {
-  /* background-color: var(--color-shade); */
-  box-shadow: inset 0 0 1px #bec0c1;
-  /* padding: 1rem 1.25rem; */
+  box-shadow: 0 3px 10px #0000000f;
+  padding: 20px;
+  border: 1px solid var(--color-brand-gray8);
 }
 
 .doc .exampleblock > .content > :first-child {
diff --git a/src/js/05-tabset.js b/src/js/05-tabset.js
index 07547d75..bc0525b2 100644
--- a/src/js/05-tabset.js
+++ b/src/js/05-tabset.js
@@ -3,7 +3,7 @@ var queueData = []
 var checkActiveClass
 var tabOnLargeScreen = 3 // Display tab on desktop
 var tabOnSmallScreen = 1 // display tab on mobile view bewlow 768px screen
-var smallBreak = 768     // Your small screen breakpoint in pixels
+var smallBreak = 768 // Your small screen breakpoint in pixels
 find('.doc .tabset').forEach(function (tabset) {
   var active
   var tabs = tabset.querySelector('.tabs')
@@ -78,7 +78,7 @@ function activateTab (e) {
   e.preventDefault()
   var tab = this.tab
   var pane = this.pane
-  var tabMenu= document.querySelector('.tabs ul')
+  var tabMenu = document.querySelector('.tabs ul')
   var nodeTab = document.querySelector('.tabs > ul')
   var nodeDropdownTabNode = document.querySelector('.other-tablist')
   if (tab.parentNode.classList[0] === 'other-tablist') {

From db970a0c17ce4beabce243c822ffd0cfc5dd8597 Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Wed, 24 Jun 2020 16:11:20 +0530
Subject: [PATCH 2/6] add auto height code on nav.js and fix css style

---
 src/css/component-frame.css |  6 ++----
 src/css/nav.css             |  1 +
 src/css/toc.css             |  3 ++-
 src/css/vars.css            |  3 ++-
 src/js/01-nav.js            | 39 +++++++++++++++++++++++++++++++++----
 5 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index 8760c723..de47edbd 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -78,12 +78,10 @@
   border-left: 3px solid var(--color-brand-gray8);
 }
 
-.frame-dropdown ul.frame-dropdown-list li,
+/* .frame-dropdown ul.frame-dropdown-list li,
 .frame-dropdown ul.related li {
   border-bottom: 1px solid var(--color-brand-gray8);
-  /* padding-bottom: 5px; */
-  /* margin-bottom: 5px; */
-}
+} */
 
 ul.frame-dropdown-list li:last-child,
 .frame-dropdown ul.related li:last-child {
diff --git a/src/css/nav.css b/src/css/nav.css
index e32905a1..604a172f 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -47,6 +47,7 @@
 .nav-menu .nav-link,
 .nav-menu .nav-text {
   display: block;
+  word-break: break-word;
 }
 
 .nav-menu .nav-line {
diff --git a/src/css/toc.css b/src/css/toc.css
index 53208106..626e97ea 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -11,10 +11,11 @@
   width: inherit; /* for position: fixed */
   position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */
   top: var(--height-to-body);
-  max-height: var(--height-nav);
+  max-height: var(--height-toc-sidebar);
   overflow-y: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  padding-right: var(--base-space);
 }
 
 .sidebar-box::-webkit-scrollbar {
diff --git a/src/css/vars.css b/src/css/vars.css
index 10e9beef..453ec583 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -69,7 +69,8 @@
   --height-version-control: 4.5rem;
   --height-to-body: calc(var(--height-navbar) + var(--height-spacer));
   --height-min-body: calc(100vh - var(--height-to-body));
-  --height-nav: calc(var(--height-min-body) + var(--height-spacer) + var(--height-version-control));
+  --height-toc-sidebar: calc(var(--height-min-body));
+  --height-nav: 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;
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 43273375..0bf68cb8 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -5,7 +5,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) {
@@ -29,11 +29,42 @@
     }
   })
 
-  // fitNavMenuInit({})
-  // window.addEventListener('load', fitNavMenuInit)
-  // window.addEventListener('resize', fitNavMenuInit)
+  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
+    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')

From 9e12f0bb51aa0523dbd600ddda0115c56f1848d7 Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Thu, 25 Jun 2020 00:35:22 +0530
Subject: [PATCH 3/6] UI issues fixes from doc sheet

---
 src/css/base.css            |  9 +++++----
 src/css/doc.css             | 18 +++++++++---------
 src/css/highlight.css       | 13 +++++++------
 src/css/site.css            |  1 +
 src/css/table.css           | 13 +++++--------
 src/js/11-page-customize.js | 14 +++++++++++++-
 6 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index db3c3e92..99beae65 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -59,14 +59,15 @@ button::-moz-focus-inner {
 code,
 kbd,
 pre {
-  /* font-family: "Roboto Mono", monospace; */
-  font-family: "Source Sans Pro", sans-serif;
+
+  font-family: 'Source Code Pro', monospace;
 }
 
 code {
-  color: var(--color-brand-black);
-  font-size: var(--font-base);
+  background-color: #0074e00E;
+  font-size: var(--font-small);
   word-spacing: -0.125em;
+  color: var(--color-brand-gray1);
 }
 
 html code {
diff --git a/src/css/doc.css b/src/css/doc.css
index a95a28f0..77c22fb2 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -109,10 +109,10 @@
   text-decoration: underline;
 }
 
-.doc code {
+/* .doc code {
   color: var(--color-text);
   font-weight: var(--weight-medium);
-}
+} */
 
 .doc pre code {
   display: block;
@@ -540,17 +540,17 @@
   position: relative;
 }
 
-.doc pre.highlight .hljs-attr {
+/* .doc pre.highlight .hljs-attr {
   color: var(--hljs-attr);
-}
+} */
 
-.doc pre.highlight .hljs-string {
+/* .doc pre.highlight .hljs-string {
   color: var(--hljs-string);
-}
+} */
 
-.doc pre.highlight .hljs-number {
+/* .doc pre.highlight .hljs-number {
   color: var(--hljs-number);
-}
+} */
 
 /* .doc .listingblock code[data-lang]::before {
   content: attr(data-lang);
@@ -590,6 +590,7 @@
   font-family: "Source Sans Pro", sans-serif;
   padding-right: 0.5rem;
   border-right: 1px solid var(--color-brand-gray9);
+  z-index: 1;
 }
 
 .doc .listingblock:hover code[data-lang] + .data-source {
@@ -597,7 +598,6 @@
 }
 
 .doc .listingblock pre .fade-shadow {
-  content: "";
   display: inline-block;
   background:
     transparent
diff --git a/src/css/highlight.css b/src/css/highlight.css
index 451eb26d..334ebcf7 100644
--- a/src/css/highlight.css
+++ b/src/css/highlight.css
@@ -18,29 +18,30 @@ Other CSS rules for styling code blocks:
 
 .hljs-keyword,
 .hljs-selector-tag {
-  color: #66d9ef;
+  color: var(--hljs-attr);
   font-weight: var(--weight-medium);
 }
 
 .hljs-subst {
-  color: #66d9ef;
+  color: var(--hljs-attr);
 }
 
 .hljs-number,
 .hljs-literal,
 .hljs-variable,
 .hljs-tag .hljs-attr {
-  color: #ae81ff;
+  color: var(--hljs-number);
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #a6e22e;
+  color: var(--hljs-string);
 }
 
 .hljs-tag,
-.hljs-attribute {
-  color: #f92672;
+.hljs-attribute,
+.hljs-attr {
+  color: var(--hljs-attr);
 }
 
 .hljs-built_in,
diff --git a/src/css/site.css b/src/css/site.css
index e181dd63..bb32b9e9 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');
 @import "common.css";
 @import "typeface-gotham.css";
 @import "typeface-roboto-mono.css";
diff --git a/src/css/table.css b/src/css/table.css
index e71a4d98..90ba4a6f 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -9,7 +9,6 @@ table.tableblock * {
 table.tableblock {
   display: block;
   width: 100%;
-  margin: 1em 0;
   border-spacing: 0;
 }
 
@@ -41,8 +40,8 @@ table.tableblock th {
 
 table.tableblock th {
   padding-left: var(--base-small-space);
-  padding-top: var(--base-space);
-  padding-bottom: var(--base-space);
+  padding-top: 8px;
+  padding-bottom: 8px;
   text-align: left;
   border-bottom: 2px solid var(--color-brand-blue-secondary);
   font-size: 1rem;
@@ -115,7 +114,6 @@ table.table-tutorial tr td:last-child {
   table.tableblock {
     display: table;
     position: relative;
-    /* margin-top: 2.5rem; */
   }
 
   table.tableblock caption.title {
@@ -124,10 +122,9 @@ table.table-tutorial tr td:last-child {
     top: -30px;
   }
 
-  div + table.tableblock,
-  div.paragraph + table.tableblock,
-  div.ulist + table.tableblock,
-  table.tableblock + table.tableblock {
+  div+table.tableblock.caption-table,
+  div.ulist+table.tableblock,
+  table.tableblock+table.tableblock {
     margin-top: 2.5rem;
   }
 
diff --git a/src/js/11-page-customize.js b/src/js/11-page-customize.js
index 2a2e9f57..d6a5877a 100644
--- a/src/js/11-page-customize.js
+++ b/src/js/11-page-customize.js
@@ -1,8 +1,9 @@
 ;(function ($) {
   'use strict'
+  var tableBlock = document.querySelectorAll('table.tableblock')
   // for label edition/statuses
   var $labels = $('.edition').find('a')
-  // console.log($labels.length)
+
   for (var i = 0; i < $labels.length; i++) {
   //  console.log(i, 445, $labels[i])
     if ($labels[i].text.toLocaleLowerCase().indexOf('community') !== -1) {
@@ -10,5 +11,16 @@
     }
   }
 
+  // add a caption class for all tablelock
+
+  tableBlock.forEach(function(arr, index) {
+    console.log(arr)
+    // if(arr.caption.title)
+    if(arr.caption !== null) {
+      arr.classList.add('caption-table')
+    }
+
+  })
+
   /*eslint-env jquery*/
 })(jQuery)

From 43ec485bc498b33cfcc86fd96e43b477721d70aa Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Thu, 25 Jun 2020 08:14:56 +0530
Subject: [PATCH 4/6] update fonts awesome italic style

---
 src/css/base.css | 8 +++++++-
 src/css/site.css | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index 99beae65..15dd70af 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -17,7 +17,6 @@ body {
 body {
   color: var(--color-text);
   font-family: "Source Sans Pro", sans-serif;
-  /* font-family: "Gotham", sans-serif; */
   line-height: var(--line-height-body);
   margin: 0;
 }
@@ -83,6 +82,13 @@ small {
   font-size: 0.8em;
 }
 
+em,
+i {
+    font-style: italic;
+    font-family: "Open Sans", sans-serif;
+    font-weight: 400;
+}
+
 .container,
 .container-fluid {
   margin: 0 auto;
diff --git a/src/css/site.css b/src/css/site.css
index bb32b9e9..76cc13b4 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap");
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');
 @import "common.css";
 @import "typeface-gotham.css";

From a827f5dc3221da411b3fe0319c4231d40a9979ea Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Thu, 25 Jun 2020 08:46:58 +0530
Subject: [PATCH 5/6] Remove border under  heading nd fix Eslint error

---
 src/css/base.css            |  9 ++++-----
 src/css/doc.css             |  6 +++---
 src/css/table.css           |  6 +++---
 src/js/11-page-customize.js | 14 +++-----------
 4 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/css/base.css b/src/css/base.css
index 15dd70af..e367650d 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -58,12 +58,11 @@ button::-moz-focus-inner {
 code,
 kbd,
 pre {
-
   font-family: 'Source Code Pro', monospace;
 }
 
 code {
-  background-color: #0074e00E;
+  background-color: #0074e00e;
   font-size: var(--font-small);
   word-spacing: -0.125em;
   color: var(--color-brand-gray1);
@@ -84,9 +83,9 @@ small {
 
 em,
 i {
-    font-style: italic;
-    font-family: "Open Sans", sans-serif;
-    font-weight: 400;
+  font-style: italic;
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
 }
 
 .container,
diff --git a/src/css/doc.css b/src/css/doc.css
index 77c22fb2..788b6cf3 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -15,7 +15,7 @@
   font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
-  margin: 1.5rem 0 -0.25rem;
+  margin: 1.5rem 0 1rem;
 }
 
 .doc h1 {
@@ -39,14 +39,14 @@
   /* NOTE used to restrict width of key line */
 }
 
-.doc h2::after {
+/* .doc h2::after {
   content: "";
   display: block;
   max-width: 5.75rem;
   height: 0;
   outline: 0.5px solid currentColor;
   margin-top: 1.0625rem;
-}
+} */
 
 .doc h3 {
   font-size: var(--heading-h3);
diff --git a/src/css/table.css b/src/css/table.css
index 90ba4a6f..7b5d7476 100644
--- a/src/css/table.css
+++ b/src/css/table.css
@@ -122,9 +122,9 @@ table.table-tutorial tr td:last-child {
     top: -30px;
   }
 
-  div+table.tableblock.caption-table,
-  div.ulist+table.tableblock,
-  table.tableblock+table.tableblock {
+  div + table.tableblock.caption-table,
+  div.ulist + table.tableblock,
+  table.tableblock + table.tableblock {
     margin-top: 2.5rem;
   }
 
diff --git a/src/js/11-page-customize.js b/src/js/11-page-customize.js
index d6a5877a..3c81bf17 100644
--- a/src/js/11-page-customize.js
+++ b/src/js/11-page-customize.js
@@ -3,24 +3,16 @@
   var tableBlock = document.querySelectorAll('table.tableblock')
   // for label edition/statuses
   var $labels = $('.edition').find('a')
-
   for (var i = 0; i < $labels.length; i++) {
-  //  console.log(i, 445, $labels[i])
     if ($labels[i].text.toLocaleLowerCase().indexOf('community') !== -1) {
       $labels[i].parentNode.classList.add('page-edition')
     }
   }
-
   // add a caption class for all tablelock
-
-  tableBlock.forEach(function(arr, index) {
-    console.log(arr)
-    // if(arr.caption.title)
-    if(arr.caption !== null) {
-      arr.classList.add('caption-table')
+  tableBlock.forEach(function (elem, index) {
+    if (elem.caption !== null) {
+      elem.classList.add('caption-table')
     }
-
   })
-
   /*eslint-env jquery*/
 })(jQuery)

From 56791bdb0ea7f512a5160f7b936bd7a0ff7f9940 Mon Sep 17 00:00:00 2001
From: rakeshAlgo <rakesh.algoworks.com>
Date: Thu, 25 Jun 2020 08:51:54 +0530
Subject: [PATCH 6/6] Remove margin bottom from h2 heading

---
 src/css/doc.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/doc.css b/src/css/doc.css
index 788b6cf3..6bc40e2c 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -32,7 +32,6 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  margin: 1.5rem 0 1.5rem;
   max-width: fit-content;
   display: inline-block;
   width: 100%;