Merge pull request #506 from eregs/510-effective-date

Rework "Effective date" UI

regulations/generator/versions.py

@@ -1,4 +1,5 @@
 from datetime import datetime
+from enum import Enum
 
 from regulations.generator import api_reader
 from regulations.generator.layers.utils import convert_to_python
@@ -22,6 +23,21 @@ def fetch_regulations_and_future_versions():
     return regulations_future
 
 
+class Timeline(Enum):
+    past = "past"
+    present = "present"
+    future = "future"
+
+    def is_past(self):
+        return self == Timeline.past
+
+    def is_present(self):
+        return self == Timeline.present
+
+    def is_future(self):
+        return self == Timeline.future
+
+
 def fetch_grouped_history(part):
     client = api_reader.ApiReader()
     versions = [
@@ -34,16 +50,16 @@ def fetch_grouped_history(part):
                       key=lambda v: v['by_date'])
 
     today = datetime.today()
-    seen_current = False
+    seen_present = False
 
     for version in versions:
         if version['by_date'] > today:
-            version['timeline'] = 'future'
-        elif not seen_current:
-            seen_current = True
-            version['timeline'] = 'current'
+            version['timeline'] = Timeline.future
+        elif not seen_present:
+            seen_present = True
+            version['timeline'] = Timeline.present
         else:
-            version['timeline'] = 'past'
+            version['timeline'] = Timeline.past
 
     for notice in client.notices(part)['results']:
         notice = convert_to_python(notice)

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

@@ -36,9 +36,15 @@ $red_lightest: #E9A193;
 
 $pink: #F9DEDE;
 
-$orange: #FDB81E;
-$orange_light: #FBCD92;
-$orange_lightest: #FFECD1;
+$gold: #FDB81E;
+$gold_light: #F9C642;
+$gold_lighter: #FAD980;
+$gold_lightest: #FFF1D2;
+
+// Deprecated. Will be removed in a future release
+$orange: $gold;
+$orange_light: $gold_light;
+$orange_lightest: $gold_lightest;
 
 // Element Variables
 $text_area_border: rgba(0, 0, 0, 0.25);
@@ -57,6 +63,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: $gold_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/comment/_comment-confirm.scss

@@ -166,7 +166,7 @@ Contains styles for Comment confirmation success/fail/invalid pages.
       padding-left: 0;
 
       &:before {
-        border-color: transparent $orange_light;
+        border-color: transparent $gold_light;
         border-radius: 3px;
         border-style: solid;
         border-width: 8px 0 8px 13px;

regulations/static/regulations/css/scss/module/_sxs.scss

@@ -45,8 +45,8 @@ SxS header
   top: 60px;
   width: 100%;
   height: 2.125em;
-  background-color: $orange_lightest;
-  border-bottom: 1px solid $orange;
+  background-color: $gold_lightest;
+  border-bottom: 1px solid $gold;
   z-index: 100;
 
   h2 {
@@ -83,7 +83,7 @@ Back link
   height: 34px;
   line-height: 34px; /* match height of the .sxs-header - 1px */
   vertical-align: top;
-  border-bottom: 1px solid $orange;
+  border-bottom: 1px solid $gold;
 
   .cf-icon-left {
     font-size: 0.75em;

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 %}
@@ -132,7 +153,7 @@ <h2 class="toc-type">Regulation Timeline</h2>
                 {% for version in history %}
                     <li class="{% if version.version == active_version %}current {% endif %}status-list" data-base-version="{{version.version}}">
                     <a href="{% url version_switch_view label_id version.version %}" class="version-link" data-version="{{ version.version }}" id="link-{{ version.version }}">
-                        {% if version.timeline == 'current' %}
+                        {% if version.timeline.is_present %}
                             <h3>Current Law</h3>
                         {% endif %}
                         <span class="version-date">{{ version.by_date|date:"n/j/Y" }}</span>

regulations/templates/regulations/diff-chrome.html

@@ -71,7 +71,7 @@ <h2 class="toc-type">Regulation versions</h2>
                       (Right)
                     {% endif %}-->
                     <a href="{% url 'chrome_section_view' label_id version.version %}" class="version-link" data-version="{{ version.version }}">
-                        {% if version.timeline == 'current' %}
+                        {% if version.timeline.is_present %}
                             <h3>Current Law</h3>
                         {% endif %}
                         <span class="version-date">{{ version.by_date|date:"n/j/Y" }}</span>

regulations/tests/generator_versions_tests.py

@@ -35,9 +35,9 @@ def test_fetch_grouped_history(self, reader):
         self.assertEqual(3, len(history))
         v1, v2, v3 = history
 
-        self.assertEqual('future', v1['timeline'])
-        self.assertEqual('current', v2['timeline'])
-        self.assertEqual('past', v3['timeline'])
+        self.assertEqual(versions.Timeline.future, v1['timeline'])
+        self.assertEqual(versions.Timeline.present, v2['timeline'])
+        self.assertEqual(versions.Timeline.past, v3['timeline'])
 
         self.assertEqual(versions.convert_to_python([n6, n5, n4]),
                          v1['notices'])