Merge pull request #27 from rakeshAlgo/ui-fixes

Doc sandbox site validation UI fixes

Author: amarantha-k

package-lock.json

@@ -61,7 +61,6 @@
 
 .frame-dropdown ul {
   background: var(--color-brand-white);
-  min-width: 125px;
   border-radius: 0;
   /* box-shadow: 0 3px 10px -4px var(--color-brand-gray8); */
   margin: 0;
@@ -76,6 +75,7 @@
 
 .frame-dropdown .related {
   border-left: 3px solid var(--color-brand-gray8);
+  min-width: 125px;
 }
 
 /* .frame-dropdown ul.frame-dropdown-list li,

src/css/component-frame.css

@@ -611,7 +611,7 @@
   width: 65px;
   height: 80%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 0;
 }
 
@@ -620,6 +620,10 @@ code.language-console.hljs.shell {
   overflow-x: auto;
 }
 
+table.tableblock code.language-console.hljs.shell {
+  white-space: normal;
+}
+
 .doc .dlist {
   margin: 1.5rem 0;
 }

src/css/doc.css

@@ -2,7 +2,12 @@
    Responsive Table CSS
    ========================================================================== */
 
-table.tableblock * {
+table.tableblock,
+table.tableblock thead,
+table.tableblock tbody,
+table.tableblock tfoot,
+table.tableblock td,
+table.tableblock th {
   font-family: "Source Sans Pro", sans-serif;
 }
 
@@ -29,19 +34,10 @@ table.tableblock tbody {
   overflow-x: auto;
 }
 
-table.tableblock td,
-table.tableblock th {
-  line-height: 1.5em;
-  box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
-  color: var(--color-brand-gray1);
-}
-
-table.tableblock th {
+table.tableblock thead th {
   padding-left: var(--base-small-space);
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: var(--base-space);
+  padding-bottom: var(--base-space);
   text-align: left;
   border-bottom: 2px solid var(--color-brand-blue-secondary);
   font-size: 1rem;
@@ -57,7 +53,8 @@ table.tableblock tbody tr {
     background: var(--color-brand-gray7);
   } */
 
-table.tableblock > tbody td {
+table.tableblock > tbody td,
+table.tableblock > tbody th {
   display: block;
   border-bottom: 1px solid var(--color-brand-gray8);
   padding-left: var(--base-small-space);
@@ -147,7 +144,8 @@ table.table-tutorial tr td:last-child {
   }
 
   table.tableblock th,
-  table.tableblock tbody td {
+  table.tableblock tbody td,
+  table.tableblock > tbody th {
     display: table-cell;
   }
 
@@ -168,6 +166,15 @@ table.table-tutorial tr td:last-child {
 }
 
 @media screen and (max-width: 767px) {
+  table.tableblock td,
+  table.tableblock th {
+    line-height: 1.5em;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: var(--color-brand-gray1);
+  }
+
   table.tableblock td {
     min-width: 14.5rem;
     word-break: break-word;

src/css/table.css

@@ -17,7 +17,7 @@
                                         {{#unless (eq ./version @root.page.version)}}
                                             <li><a class="frame-item" href="{{relativize ./url}}">
                                             {{!-- {{{@root.page.component.title}}} --}}
-                                            Version {{./displayVersion}}</a></li>
+                                             {{./displayVersion}}</a></li>
                                         {{/unless}}
                                     {{/each}}
                                     </ul>