Merge pull request #496 from eregs/500-sidebar-rework

Rework sidebar styles
eregs · Aug 10, 2017 · e8e056d · e8e056d
2 parents bdf8cd1 + 337c13f
commit e8e056d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 27 deletions.
diff --git a/regulations/static/regulations/css/scss/partials/_sidebar.scss b/regulations/static/regulations/css/scss/partials/_sidebar.scss
@@ -33,26 +33,6 @@ Sidebar
     @include reset;
   }
 
-  // Headers within the sidebar should be <h4>
-  h4 {
-    padding: 0 10px;
-    font-size: 1em * $sans_font_scale_factor;
-    line-height: 40px;
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: $gray_darkest;
-    @include sans-font-bold;
-
-    &.important {
-      color: $red;
-    }
-
-    h5 {
-      margin: 0;
-    }
-  }
-
 /*
 Sidebar Expandables
 -------------------
@@ -65,7 +45,7 @@ Sidebar Expandables
     width: 100%;
 
     &.has-content {
-      background-color: $orange_lightest;
+      background-color: $blue_lightest;
     }
 
     h4 {
@@ -83,13 +63,13 @@ Sidebar Expandables
   header {
     &.expandable a:before {
       @extend .cf-icon;
-      content: '\e109';
+      content: '\e003';
       color: $blue_light;
     }
 
     &.open a:before {
       @extend .cf-icon;
-      content: '\e111';
+      content: '\e007';
       color: $blue_light;
     }
   }
@@ -154,12 +134,25 @@ Regs Meta contains the sub-content meta data found in the sidebar
 
 .regs-meta {
 
+  // Headers within the sidebar should be <h4>
   h4 {
-    @include sans-font-bold;
+    padding: 0 10px;
+    font-size: 1em * $sans_font_scale_factor;
+    line-height: 40px;
+    margin: 0;
+    letter-spacing: 1px;
+    color: $gray_darkest;
+    @include sans-font-regular;
+
+    &.important {
+      color: $red;
+    }
+
   }
 
   h5 {
     font-size: 16px * $sans_font_scale_factor;
+    margin: 0;
   }
 
   /* We either use a subtitle + "What's this?" or an inline explanation

diff --git a/regulations/static/regulations/js/source/views/sidebar/sidebar-view.js b/regulations/static/regulations/js/source/views/sidebar/sidebar-view.js
@@ -143,7 +143,7 @@ const SidebarView = Backbone.View.extend({
     });
     /* Also remove any components of the sidebar which don't have a Backbone
      * view */
-    this.$el.find('.regs-meta').remove();
+    this.$el.find('.regs-meta:not(#definition)').remove();
   },
 
   loading: function loading() {

diff --git a/regulations/templates/regulations/chrome.html b/regulations/templates/regulations/chrome.html
@@ -219,7 +219,7 @@ <h3>Search in regulation effective:</h3>
 {% block chrome-sidebar %}
 <div id="sidebar" class="secondary-content" role="complementary">
     <div id="sidebar-content" class="sidebar-inner">
-        <section id="definition"></section>
+        <section id="definition" class="regs-meta"></section>
         {% block reg_sidebar %}
             {{ sidebar_content|safe }}
         {% endblock %}

diff --git a/regulations/templates/regulations/generic_landing.html b/regulations/templates/regulations/generic_landing.html
@@ -31,7 +31,7 @@
 
 <div id="sidebar" class="secondary-content">
     <div id="sidebar-content" class="sidebar-inner">
-    <section id="definition"></section>
+    <section id="definition" class="regs-meta"></section>
     <section class="landing-sidebar">
 
         {% block reg_sidebar %}