Tweak templates and styles around effective date.

The "Effective" heading hasn't been obvious enough to users, particularly when
reviewing previous versions of the regulation. These template and style tweaks
change that by adding the end date where applicable and highlighting the
version when it's not the current law.

regulations/static/regulations/css/scss/_base-variables.scss

@@ -57,6 +57,7 @@ $panel_text_color: $black; // Text color for table of contents
 $text_highlight_color: $green_lightest; // Text highlight used for diffs
 $success_color: $green_lightest; // Used as background for success messages
 $notice_color: $blue_lightest; // Used as background for neutral notice messages
+$alert_color: $orange_lightest; // Used as background for caution messages
 $warning_color: $pink; // Used as background for warning messages
 $definition_border_color: $gray_light; // Bottom border/underline for the defined terms.
 

regulations/static/regulations/css/scss/_layout.scss

@@ -181,6 +181,12 @@ TOC Header Navigation
     margin-right: 25%;
     margin-left: 240px;
     padding-left: 65px;
+
+    // We add a lot of text when looking at versions other than the current.
+    // Ensure adequate space between the wayfinding info and that text
+    .non-current & {
+      margin-right: 0;
+    }
   }
 }
 

regulations/static/regulations/css/scss/partials/_header.scss

@@ -107,7 +107,7 @@
   position: fixed;
   top: $mainhead_height;
   min-width: 100%;
-  background: $panel_background_color;
+  background-color: $panel_background_color;
   color: $black;
   line-height: 35px;
   height: 2.125em;
@@ -117,6 +117,23 @@
   .main {
     border-right: 1px solid $panel_border_color;
   }
+
+  &.non-current {
+    background-color: $alert_color;
+
+    .effective-date:before {
+      font-family: 'CFPB Minicons';
+      content: '\e637';   // A clock
+      font-style: normal;
+      font-weight: normal;
+    }
+  }
+
+  .return-to-current {
+    @include sans-font-regular;
+    text-decoration: underline;
+    color: $black;
+  }
 }
 
 #content-header {
@@ -163,7 +180,6 @@
 
     .effective-date {
       float: right;
-      margin-right: 45px;
     }
   }
 }
@@ -204,7 +220,7 @@ mid-sized (tablet) screens
 */
 
 @media only screen and (min-width: 480px) and (max-width: 880px) {
-  .subpart {
+  .subpart, .non-current .return-to-current {
     font-size: 0;
   }
 

regulations/templates/regulations/chrome.html

@@ -32,7 +32,12 @@ <h2>Please note that the eRegulations tool does not support Internet Explorer ve
 <header id="site-header" class="reg-header chrome-header" role="banner">
 {% include "regulations/main-header.html" %}
 
-<div class="sub-head {% block sub-head-class %}{% endblock %}">
+<div class="sub-head
+            {% block sub-head-class %}
+              {% if not version_span.timeline.is_present %}
+              non-current
+              {% endif %}
+            {% endblock %}">
     {% block sub-head-skip-nav %}
     <a href="#content-wrapper" class="hidden-text">Skip to main content</a> <!-- skip to content link for screen readers-->
     {% endblock %}
@@ -90,7 +95,23 @@ <h2>Please note that the eRegulations tool does not support Internet Explorer ve
           {% endblock %}
         </div>
         {% block header-secondary %}
-        <span class="effective-date"><strong>Effective Date:</strong> {{ meta.effective_date|date:"n/j/Y" }}</span>
+          <span class="effective-date">
+            Effective
+            {% if version_span.timeline.is_past %}
+              {{ version_span.start|date:"n/j/Y" }}
+              to {{ version_span.end|date:"n/j/Y" }}.
+            {% elif version_span.timeline.is_present %}
+              {{ version_span.start|date:"n/j/Y" }} to present.
+            {% else %}
+              {{ version_span.start|date:"n/j/Y" }}.
+            {% endif %}
+
+            {% if not version_span.timeline.is_present %}
+              <a class="return-to-current"
+                 href="{% url 'redirect_by_current_date' label_id %}"
+                 >View current</a>
+            {% endif %}
+          </span>
         {% endblock %}
     </div>
     {% endblock %}