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

Fixed  removing $ issues while copying & version dropdown style

Author: amarantha-k

src/css/clipboard.css

@@ -146,11 +146,11 @@ a.copy-code-button:hover {
   }
 }
 
-code.language-console.hljs.shell,
+/* code.language-console.hljs.shell,
 pre code.language-bash.hljs {
   white-space: nowrap;
   overflow-x: auto;
-}
+} */
 
 code::-webkit-scrollbar {
   width: 0.25rem;

src/css/component-frame.css

@@ -1,45 +1,63 @@
 .component-frame {
   /* rgba(87, 160, 255, 1) */
   background: var(--color-brand-gray6);
-  /* padding: 12px 15px 12px 15px; */
+  padding: 0 15px 0 15px;
   display: flex;
   /* align-items: center; */
   justify-content: center;
   position: relative;
 }
 
 .frame-icon {
-  padding: 12px 0 12px 15px;
+  padding: 12px 0 12px 0;
+  display: inline-block;
+  line-height: 1;
+}
+
+.frame-icon img {
+  width: 34px;
 }
 
 .frame-body {
   margin-left: var(--base-extra-small-space);
   position: relative;
   padding-top: 12px;
   padding-bottom: 12px;
-  padding-right: 15px;
+  padding-right: 0;
   line-height: 2;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .frame-body .title {
-  margin: 0 4px 0 0;
+  margin: 0 0 0 0;
   font-size: var(--font-medium);
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
   display: inline-block;
+  word-break: break-word;
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+.frame-body .title span {
+  display: inline;
 }
 
 .component-frame .frame-link-dropdowns {
   display: inline-block;
   line-height: 1;
+  /* position: relative;
+  padding-bottom: 20px;
+  margin-bottom: -20px; */
 }
 
 .frame-body .frame-link {
   position: relative;
+  color: var(--color-brand-gray1);
+  font-size: 18px;
+  margin-left: 4px;
 }
 
 .frame-dropdown {
@@ -59,10 +77,13 @@
 .frame-link-dropdowns .frame-link {
   color: var(--color-brand-gray1);
   font-weight: var(--weight-semibold);
+  margin: 0;
+  font-family: "Source Sans Pro", sans-serif;
 }
 
 .frame-link-dropdowns .frame-link svg {
   color: var(--color-brand-black);
+  font-size: var(--font-base);
 }
 
 .frame-dropdown .frame-dropdown-list,

src/css/doc.css

@@ -25,23 +25,27 @@
   margin: 2.5rem 0 0;
 }
 
+.page-heading-title {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .doc h1.page {
   font-size: var(--heading-h1);
+  line-height: 50px;
   margin-top: 0;
+  margin-right: var(--base-space);
   display: inline-block;
 }
 
 .doc h1.page + .labels {
   display: inline-block;
-  position: relative;
-  top: -5px;
-  margin-left: var(--base-space);
 }
 
 .doc h2 {
   font-size: var(--heading-h2);
   max-width: fit-content;
-  display: inline-block;
   width: 100%;
   /* NOTE used to restrict width of key line */
 }
@@ -64,7 +68,7 @@
 }
 
 .doc h5 {
-  font-size: var(--heading-h4);
+  font-size: var(--heading-h5);
 }
 
 .doc h1 > a.anchor,
@@ -77,10 +81,20 @@
   position: absolute;
   text-decoration: none;
   width: 3ex;
-  margin-left: -2.5ex;
+  margin-left: -2.75ex;
   visibility: hidden;
   text-align: center;
+  transform: scale(0.85);
+}
+
+.doc h1 > a.anchor {
+  transform: scale(0.65);
+  margin-left: -2.25ex;
+}
+
+.doc h2 > a.anchor {
   transform: scale(0.75);
+  margin-left: -2.5ex;
 }
 
 .doc h1:hover a.anchor,
@@ -1015,6 +1029,7 @@ table.tableblock pre code.language-bash.hljs {
     font-size: var(--heading-h1-sm);
     margin-bottom: 10px;
     display: block;
+    line-height: 46px;
   }
 
   .doc h2 {

src/css/main.css

@@ -6,8 +6,8 @@ main {
 main [id]::before {
   content: "";
   display: inherit;
-  height: var(--height-to-body);
-  margin-top: calc(-1 * var(--height-to-body));
+  height: var(--h2-heading-top-space);
+  margin-top: calc(-1 * var(--h2-heading-top-space));
   visibility: hidden;
   width: 0;
 }

src/css/table.css

@@ -58,7 +58,7 @@ table.tableblock > tbody th {
   display: block;
   border-bottom: 1px solid var(--color-brand-gray8);
   padding-left: var(--base-small-space);
-  padding-top: var(--base-space);
+  /* padding-top: var(--base-space); */
   padding-bottom: var(--base-space);
 }
 
@@ -69,10 +69,14 @@ table.tableblock tbody td p {
   font-weight: var(--weight-medium);
 }
 
-table.tableblock .content .paragraph,
+table.tableblock tbody td.tableblock p.tableblock {
+  margin-top: 1rem;
+}
+
+/* table.tableblock .content .paragraph,
 table.tableblock .content .ulist {
   margin-top: 0;
-}
+} */
 
 /* table.tableblock tr:nth-child(odd) {
     background: rgba(0, 0, 0, 0.07);g29
@@ -105,6 +109,12 @@ table.table-tutorial tr td:last-child {
   background-color: var(--color-brand-gray7);
 }
 
+.tableblock thead a,
+.tableblock tbody a,
+.tableblock p {
+  font-family: inherit;
+}
+
 /* Responsive css  */
 
 @media screen and (min-width: 768px) {
@@ -147,6 +157,7 @@ table.table-tutorial tr td:last-child {
   table.tableblock tbody td,
   table.tableblock > tbody th {
     display: table-cell;
+    min-width: 5rem;
   }
 
   table.tableblock td,

src/css/vars.css

@@ -73,6 +73,7 @@
   --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));
+  --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
   /* --width-main-gutter: 1.5rem; */
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;
@@ -110,7 +111,8 @@
   --heading-h1: 2.5rem; /* ~40px */
   --heading-h2: 2rem; /* ~32px */
   --heading-h3: 1.5rem; /* ~24px */
-  --heading-h4: 1rem; /* ~16px */
+  --heading-h4: 1.25rem; /* ~20px */
+  --heading-h5: var(--font-base);  /* ~16px */
 
   /* line height  */
   --line-height-body: 160%;

src/js/07-copy-to-clipboard.js

@@ -28,11 +28,12 @@
     copyButton.addEventListener('click', function (e) {
       // NOTE: ignore event on pseudo-element
       if (e.currentTarget === e.target) return
-      // for console text
-      if (codeBlock.dataset.lang === 'console') {
-        var bashText = codeBlock.innerText
-        // remove $ from text
-        navigator.clipboard.writeText(bashText.slice(2)).then(
+      var bashText = codeBlock.innerText
+      // bashText.slice(2)
+      // remove '$' from copy to code functionality in code block console
+      var spliceData = bashText.split('$').join('')
+      if (codeBlock.dataset.lang === 'console' || bashText.includes('$')) {
+        navigator.clipboard.writeText(spliceData).then(
           function () {
             /* Chrome doesn't seem to blur automatically,
                 leaving the button in a focused state. */

src/partials/article.hbs

@@ -1,7 +1,9 @@
 <article class="doc">
 {{#if page.title}}
+<div class="page-heading-title">
 <h1 class="page">{{{page.title}}}</h1>
 {{> labels}}
+</div>
 {{/if}}
 {{> contributor-bot}}
 {{{page.contents}}}

src/partials/nav-version-control.hbs

@@ -8,7 +8,10 @@
 <img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
 </div>
 <div class="frame-body">
-<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
+<h4 class="title">
+<span class="">
+{{{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>
 <div class="frame-dropdown versions">
@@ -32,6 +35,8 @@
 </div>
 </div>
 </div>
+</h4>
+
 </div>
 </div>
 {{else}}
@@ -40,7 +45,7 @@
 <img src="{{{uiRootPath}}}/img/server-icon.png" alt="">
 </div>
 <div class="frame-body">
-<h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
+<h4 class="title"><span class="">{{{page.component.title}}}</span></h4>
 <a class="navbar-item component" href="{{relativize page.componentVersion.url}}">{{#unless (eq page.componentVersion.displayVersion 'master')}} <span class="version">{{page.componentVersion.displayVersion}}</span>{{/unless}}</a>
 </div>
 </div>