work on Eric’s feedback fixes

Author: rakeshAlgo

src/css/component-frame.css

@@ -8,48 +8,47 @@
 }
 
 .frame-body {
-  margin-left: 10px;
+  margin-left: var(--base-extra-small-space);
   position: relative;
 }
 
 .frame-body .title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-medium);
   line-height: 1.5rem;
   font-weight: var(--weight-semibold);
   color: var(--color-brand-gray1);
+  display: inline-block;
 }
 
-.frame-body .frame-link {
-  position: relative;
+.component-frame .frame-link-dropdowns {
+  display: inline-block;
 }
 
-.frame-body .frame-link::after {
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 8px solid var(--color-brand-gray4);
-  top: 0;
-  position: absolute;
-  content: '';
-  cursor: pointer;
-  right: -15px;
-  bottom: 0;
-  margin: auto;
+.frame-body .frame-link {
+  position: relative;
 }
 
-.frame-body .frame-link-dropdowns:hover .frame-dropdown {
+.frame-body:hover .frame-dropdown {
   display: block;
 }
 
 .frame-dropdown {
   position: absolute;
   display: none;
-  left: 0;
-  top: 45px;
+  left: 56%;
+  top: 0;
   z-index: 1;
-  padding: 17px 0 0;
+  padding: 47px 0 0;
+}
+
+.frame-link-dropdowns .frame-link {
+  color: var(--color-brand-gray1);
+  font-weight: var(--weight-semibold);
+}
+
+.frame-link-dropdowns .frame-link svg {
+  color: var(--color-brand-black);
 }
 
 .frame-dropdown .frame-dropdown-list,
@@ -72,6 +71,18 @@
   padding: 8px 0.625rem;
   display: inline-block;
   width: 100%;
+  color: var(--color-brand-primary);
+  font-weight: var(--weight-semibold);
+}
+
+.frame-dropdown ul li a:hover,
+.frame-dropdown .related li a:hover {
+  background-color: var(--color-brand-gray7);
+}
+
+.frame-link-dropdowns .version {
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: var(--font-medium);
 }
 
 .frame-dropdown .related {

src/css/doc.css

@@ -147,6 +147,10 @@
   margin-left: -10px;
 }
 
+.ulist {
+  padding-left: var(--base-extra-small-space);
+}
+
 .doc hr {
   margin: 1rem 0;
   border: 0 solid var(--color-border);

src/css/labels.css

@@ -112,10 +112,10 @@
   opacity: 1;
 }
 
-.doc .labels span:first-child,
+/* .doc .labels span:first-child,
 .doc .labels li:first-child {
   opacity: 1;
-}
+} */
 
 /* .doc .labels span.edition::before{
   color: var(--color-brand-blue-secondary);

src/css/nav.css

@@ -46,7 +46,6 @@
     /* height: var(--height-nav); */
     z-index: var(--z-index-nav);
     border-left: 2px solid #eee;
-    border-right: 2px solid #eee;
   }
 }
 

src/css/toolbar.css

@@ -1,7 +1,10 @@
 /* .sidebar-box .tools {
   margin-left: 0.75rem;
 } */
-.tools ul { margin: 0; padding: 0; }
+.tools ul {
+  margin: 0;
+  padding: 0;
+}
 
 .tools .edit {
   /* width: 1.5em;
@@ -32,4 +35,4 @@
   padding-top: 1.25rem;
   display: inline-block;
   width: 100%;
-}
+}

src/css/vars.css

@@ -101,6 +101,7 @@
   /* New  design font style */
 
   --font-base: 1rem; /* ~16px */
+  --font-medium: 1.25rem; /* ~20px */
   --font-small: 0.875rem; /* ~14px */
   --labels-font-size: 0.75rem; /* ~12px */
   --labels-line-height: 1;
@@ -119,6 +120,7 @@
   /* Spacing variables */
   --base-space: 1rem; /* ~ 16px */
   --base-small-space: 0.75rem; /* ~ 12px */
+  --base-extra-small-space: 0.5rem; /* ~ 8px */
   --base-medium-space: 1.5rem; /* ~ 24px */
   --base-large-space: 2rem; /* ~ 32px */
   --column-space: 2.5rem; /* ~ 40px */

src/js/01-nav.js

@@ -134,23 +134,23 @@
 
   // hide left nav on top level landing page
 
-    if (nav.innerText === '') {
-      nav.classList.add('hide-nav')
+  if (nav.innerText === '') {
+    nav.classList.add('hide-nav')
+  } else {
+    nav.classList.add('show-nav')
+  }
+
+  menuExpandToggle.addEventListener('click', function (e) {
+    e.preventDefault()
+    // var navBarHeight =  nav.querySelector('.nav-menu')
+    // navBarHeight.style.height = '100vh'
+    // console.log(navBarHeight.style.height)
+    if (nav.classList.contains('collapse-menu')) {
+      nav.classList.remove('collapse-menu')
     } else {
-      nav.classList.add('show-nav')
+      nav.classList.add('collapse-menu')
     }
-
-    menuExpandToggle.addEventListener('click', function (e) {
-      e.preventDefault()
-      // var navBarHeight =  nav.querySelector('.nav-menu')
-      // navBarHeight.style.height = '100vh'
-      // console.log(navBarHeight.style.height)
-      if (nav.classList.contains('collapse-menu')) {
-        nav.classList.remove('collapse-menu')
-      } else {
-        nav.classList.add('collapse-menu')
-      }
-    })
+  })
   // 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/partials/nav-version-control.hbs

@@ -10,7 +10,7 @@
 <div class="frame-body">
 <h4 class="title"><span class="title">{{{page.component.title}}}</span></h4>
 <div class="frame-link-dropdowns">
-<a class="frame-link component" href="{{relativize page.componentVersion.url}}"><span class="version">{{page.componentVersion.displayVersion}}</span></a>
+<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">
 <div class="column">
 <ul class="frame-dropdown-list">