Updates sidebar navigation style to be much tighter.

nypublicradio · Nov 23, 2016 · 8b5e79a · 8b5e79a
1 parent 8a5aa7c
commit 8b5e79a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git a/app/components/site-chrome/template.hbs b/app/components/site-chrome/template.hbs
@@ -82,7 +82,7 @@
     <div class="scrollable-body">
       <div class="{{if media.isLargeAndUp 'box box--nopad'}}">
 
-      <ul class="list list--noborder flush text--spacing text--semi {{unless media.isLargeAndUp 'list--inline list--spaced text--small' 'alignright text--medium '}}">
+      <ul class="list list--noborder flush {{unless media.isLargeAndUp 'list--inline list--spaced text--small' 'alignright '}}">
 
         <li class="list-item list-item--nav">
           {{#if media.isLargeAndUp}}
@@ -92,7 +92,7 @@
               itemPK=preferredStream.slug
               itemTitle=preferredStream.name
               playContext='nav'
-              class=(if media.isLargeAndUp 'stream-launcher text--spacing text--semi')}}
+              class=(if media.isLargeAndUp 'stream-launcher')}}
               <span>Listen Live</span>
             {{/listen-button}}
           {{else}}
@@ -154,7 +154,7 @@
             {{/link-to}}
 
             <li class="list-item list-item--nav">
-              <button class="btn--blank btn--white text--spacing h5" data-test-selector="logout" {{action 'logout'}}>Sign Out</button>
+              <button class="btn--blank btn--white h5" data-test-selector="logout" {{action 'logout'}}>Sign Out</button>
             </li>
 
           {{else}}
@@ -176,8 +176,8 @@
         <div class="box box--nopad">
 
 
-          <ul class="list list--noborder flush alignright text--spacing text--semi text--medium">
-            {{!-- <div class="h5 text--heavy text--spacing alignright"> --}}
+          <ul class="list list--noborder flush alignright">
+            {{!-- <div class="h5 text--heavy alignright"> --}}
             {{#if features.autoplayPrefs}}
             {{!-- Google Experiment Continuous Play - START --}}
             {{#if (in-experimental-group 1) }}
@@ -194,7 +194,7 @@
               {{/link-to}}
 
               <li class="list-item list-item--nav">
-                <button class="btn--blank text--spacing" data-test-selector="logout" {{action 'logout'}}>Sign Out</button>
+                <button class="btn--blank" data-test-selector="logout" {{action 'logout'}}>Sign Out</button>
               </li>
             {{else}}
               {{#link-to 'login' tagName='li' href="false" class="list-item list-item--nav" }}

diff --git a/app/components/wnyc-svg/logo-wnyc/template.hbs b/app/components/wnyc-svg/logo-wnyc/template.hbs
@@ -1,3 +1,3 @@
-<svg class={{className}} width="22px" height="9px" viewBox="1 8 22 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class={{className}} viewBox="1 8 22 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <path d="M12.4221677,16.7347163 L17.2790702,16.7347163 L17.2790702,9.80577122 L12.4221677,9.80577122 L12.4221677,16.7347163 L12.4221677,16.7347163 Z M15.5075683,11.3350879 L16.4711721,11.3350879 L15.2899803,13.2267375 L15.2899803,14.4433122 L14.4238854,14.4433122 L14.4238854,13.2399065 L13.2427508,11.3350879 L14.2242965,11.3350879 L14.8634611,12.4273428 L15.5075683,11.3350879 Z M18.1332972,16.7350962 L22.9899998,16.7350962 L22.9899998,8 L18.1332972,8 L18.1332972,16.7350962 Z M20.6750136,14.5054235 C19.7870057,14.5054235 19.0720167,13.8264921 19.0720167,12.8980641 L19.0720167,12.8894657 C19.0720167,11.9836049 19.7690352,11.2732222 20.7104117,11.2732222 C21.3453194,11.2732222 21.7539539,11.5394015 22.029253,11.921445 L21.3810603,12.4231235 C21.2033558,12.2011361 20.9992814,12.0591909 20.7016693,12.0591909 C20.266322,12.0591909 19.9600818,12.4273513 19.9600818,12.8804388 L19.9600818,12.8894657 C19.9600818,13.3555222 20.266322,13.7195977 20.7016693,13.7195977 C21.0257942,13.7195977 21.2168122,13.5685114 21.4029448,13.3423247 L22.0516232,13.8039535 C21.7584965,14.2079929 21.3632327,14.5054235 20.6750136,14.5054235 Z M6.71102956,16.7347563 L11.568075,16.7347563 L11.568075,9.02846949 L6.71102956,9.02846949 L6.71102956,16.7347563 Z M10.6523542,14.4433236 L9.89725318,14.4433236 L8.5697838,12.7383537 L8.5697838,14.4433236 L7.71705958,14.4433236 L7.71705958,11.3350708 L8.52078652,11.3350708 L9.79965858,12.9778522 L9.79965858,11.3350708 L10.6523542,11.3350708 L10.6523542,14.4433236 Z M2.05425307,14.4587807 L2.80484008,14.4587807 L3.42634854,12.6695407 L4.052771,14.4587807 L4.8031009,14.4587807 L5.8420148,11.3285606 L4.94974992,11.3285606 L4.40775135,13.1270274 L3.80844166,11.3197908 L3.06688272,11.3197908 L2.46740162,13.1270274 L1.92568875,11.3285606 L1.01505345,11.3285606 L2.05425307,14.4587807 Z M1,15.258504 L5.85704539,15.258504 L5.85704539,16.7347734 L1,16.7347734 L1,15.258504 Z" id="wnyc-logo" stroke="none" fill="#000000" fill-rule="evenodd"></path>
 </svg>
diff --git a/app/styles/_discover.scss b/app/styles/_discover.scss
@@ -36,7 +36,7 @@ body.ember-application.discover {
       position: absolute;
       top: 0;
       z-index: 1;
-      width: calc(100% - 166px); // side nav
+      width: calc(100% - 150px); // side nav
     }
   }
 
@@ -466,7 +466,7 @@ body.ember-application.discover {
   z-index:2;
 
   @include mq($large-and-up) {
-    left: 166px; // sitechrome-nav width
+    left: 150px; // sitechrome-nav width
   }
 
   // This is the collapsed header style

diff --git a/app/styles/_icons.scss b/app/styles/_icons.scss
@@ -210,8 +210,8 @@ i.fa-circle-o-notch.fa-spin {
   }
 
   @include mq($middle-narrow-and-up) {
-    width: 80px;
-    height: 32px;
+    width: 92px;
+    height: 40px;
     margin: auto;
   }
 }

diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss
@@ -33,7 +33,7 @@
 
 .l-page {
   @include mq($large-and-up) {
-    padding-left: 166px;
+    padding-left: 150px;
   }
 }
 

diff --git a/app/styles/_site-chrome.scss b/app/styles/_site-chrome.scss
@@ -50,12 +50,15 @@
   a,
   button {
     color: white;
-    letter-spacing: 2px;
     font-family: 'Museo Sans Rounded', 'Open Sans', sans-serif;
   }
 
   a {
-    padding-bottom: 10px
+    padding-bottom: 10px;
+
+    @include mq($medium-only) {
+      font-weight: 600;
+    }
   }
 
   a:hover,
@@ -70,7 +73,7 @@
     a,
     a:hover {
       border: 1px dotted rgba(0, 0, 0, 0);
-      padding: 28px;
+      padding: 22px 10px 26px 28px;      
     }
 
     a:focus {
@@ -93,11 +96,10 @@
 
   @include mq($large-and-up) {
     position: fixed;
-    width: 166px;
+    width: 150px;
     left: 0;
     height: 100%;
     padding-bottom: 117px;
-    border-right: 1px solid $lightestgray;
 
     a {
       padding-bottom: 0;
@@ -145,41 +147,46 @@
   ul.alignright {
     margin: 0;
     float: none;
+    border-right: 1px solid $nearwhite;
   }
 
   &.nav--homepage {
     background-color: $red;
 
     @include mq($large-and-up) {
-      border-color: $red;
-
       a,
       button,
       a:focus,
       button:focus,
       a:hover,
       button:hover {
         color: white;
+        font-weight: 600;
       }
 
       .new {
         color: $link-gold;
       }
+
+      ul.alignright {
+        border-color: $red;
+      }
     }
   }
 
   &:not(.x-scrollable) {
     .list-item {
-      padding: 10px 20px 10px 0;
+      padding: 1px 18px 1px 0;
+      margin: 13px 0;
     }
     .list--noborder {
         > .list-heading {
             @extend %vertical-rhythm;
         }
     }
     .list-item.active {
-      background-color: rgba($red, 0.05);
-      border-left: 4px solid $red;
+      border-right: 3px solid $red;
+
       a {
         color: $red;
         border: none;