From da1f72ee7ce92b5372a56e819f03ce239ebf647e Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Mon, 4 Sep 2017 18:39:58 +0200
Subject: [PATCH] improves legislation processes header layout

---
 .../stylesheets/legislation_process.scss      | 39 +---------
 .../legislation/processes/_header.html.erb    |  4 +-
 .../processes/_header_full.html.erb           |  4 +-
 .../legislation/processes/_key_dates.html.erb | 76 +++++++++----------
 4 files changed, 45 insertions(+), 78 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index eda341185..8adcee4c6 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -25,11 +25,6 @@ $epigraph-line-height: rem-calc(22);
 // 02. Hero
 // -----------------
 .legislation-hero {
-  padding-top: 1.5rem;
-
-  @include breakpoint(medium) {
-    padding-top: 3.5rem;
-  }
 
   h4 {
     text-transform: uppercase;
@@ -52,8 +47,8 @@ $epigraph-line-height: rem-calc(22);
   }
 
   .debate-add-info {
-    margin-top: 3rem;
-    padding-top: 4rem;
+    margin-top: $line-height;
+    padding-top: $line-height;
     border-top: 1px solid darken($border, 10%);
 
     @include breakpoint(medium) {
@@ -72,28 +67,12 @@ $epigraph-line-height: rem-calc(22);
     }
   }
 
-  .half-gradient {
-    background: #e6e6e6;
-    background: linear-gradient(to bottom, #e6e6e6 0%, #e6e6e6 50%, #fff 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#fff', GradientType=0);
-  }
-
   .text-center .button {
     background: $brand;
     margin-bottom: 0;
   }
 
-  .headline {
-    margin-bottom: 1rem;
-
-    @include breakpoint(medium) {
-      margin-bottom: 4rem;
-
-    }
-  }
-
   .description {
-    margin-bottom: 1rem;
 
     p {
       font-size: $epigraph-font-size;
@@ -150,25 +129,13 @@ $epigraph-line-height: rem-calc(22);
   .legislation-process-list {
     border-bottom: 1px solid $medium-gray;
     margin: 0 1rem 1rem;
-    padding-top: 4rem;
-
-    @include breakpoint(medium) {
-      margin-left: 0;
-    }
 
     ul {
-      position: relative;
-      max-width: 75rem;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 0 auto;
       list-style: none;
       padding-left: 0;
       margin-bottom: 0;
 
-      @include breakpoint(medium) {
-        padding-left: 1rem;
-      }
-
       svg {
         position: absolute;
         top: 1.25rem;
diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb
index a369f8c88..6ce35bb98 100644
--- a/app/views/legislation/processes/_header.html.erb
+++ b/app/views/legislation/processes/_header.html.erb
@@ -1,5 +1,5 @@
 <% if header == :small %>
-  <div class="legislation-hero legislation-allegation no-margin-top grey-heading" data-target="legislation-header-small">
+  <div class="legislation-hero jumbo grey-heading" data-target="legislation-header-small">
     <div class="row headline">
       <div class="small-12 medium-8 column">
         <h3 class="headline-small"><%= process.title %></h3>
@@ -23,7 +23,7 @@
     </div>
 
     <% if process.description.present? || process.additional_info.present? %>
-      <div class="text-center half-gradient">
+      <div class="text-center">
         <a class="button big text-center button-circle" title="<%= t('.view_process_information') %>" id="js-toggle-small-debate">
           <span class="icon-angle-down" aria-hidden="true"></span>
         </a>
diff --git a/app/views/legislation/processes/_header_full.html.erb b/app/views/legislation/processes/_header_full.html.erb
index b6e9a23cd..8abf6b7b0 100644
--- a/app/views/legislation/processes/_header_full.html.erb
+++ b/app/views/legislation/processes/_header_full.html.erb
@@ -1,4 +1,4 @@
-<div class="legislation-hero no-margin-top grey-heading" style="display:<%= hidden ? 'none' : 'block' %>" data-target="legislation-header-full">
+<div class="legislation-hero jumbo grey-heading" style="display:<%= hidden ? 'none' : 'block' %>" data-target="legislation-header-full">
   <div class="row headline">
     <div class="small-12 medium-8 column">
       <%= back_link_to legislation_processes_path %>
@@ -25,7 +25,7 @@
   </div>
 
   <% if process.additional_info.present? %>
-    <div class="text-center half-gradient">
+    <div class="text-center">
       <a id="js-toggle-debate" class="button big text-center" title="<%= t('.more_info') %>">
         <strong><%= t('.more_info') %></strong>
       </a>
diff --git a/app/views/legislation/processes/_key_dates.html.erb b/app/views/legislation/processes/_key_dates.html.erb
index 375be7d51..f1fde827a 100644
--- a/app/views/legislation/processes/_key_dates.html.erb
+++ b/app/views/legislation/processes/_key_dates.html.erb
@@ -3,45 +3,45 @@
     <div class="row">
       <div class="small-12 column">
         <h3><%= t("legislation.processes.shared.key_dates") %></h3>
+
+        <ul>
+          <% if process.debate_phase.enabled? %>
+            <li <%= "class=active" if phase == :debate_phase %>>
+              <%= link_to debate_legislation_process_path(process) do %>
+                <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
+                <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
+              <% end %>
+            </li>
+          <% end %>
+
+          <% if process.draft_publication.enabled? %>
+            <li <%= "class=active" if phase == :draft_publication %>>
+              <%= link_to draft_publication_legislation_process_path(process) do %>
+                <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
+                <p><%= format_date(process.draft_publication_date) %></p>
+              <% end %>
+            </li>
+          <% end %>
+
+          <% if process.allegations_phase.enabled? %>
+            <li <%= "class=active" if phase == :allegations_phase %>>
+              <%= link_to allegations_legislation_process_path(process) do %>
+                <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
+                <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
+              <% end %>
+            </li>
+          <% end %>
+
+          <% if process.result_publication.enabled? %>
+            <li <%= "class=active" if phase == :result_publication %>>
+              <%= link_to result_publication_legislation_process_path(process) do %>
+                <h4><%= t('legislation.processes.shared.result_publication_date') %></h4>
+                <p><%= format_date(process.result_publication_date) %></p>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
       </div>
     </div>
-
-    <ul>
-      <% if process.debate_phase.enabled? %>
-        <li <%= "class=active" if phase == :debate_phase %>>
-          <%= link_to debate_legislation_process_path(process) do %>
-            <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
-            <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
-          <% end %>
-        </li>
-      <% end %>
-
-      <% if process.draft_publication.enabled? %>
-        <li <%= "class=active" if phase == :draft_publication %>>
-          <%= link_to draft_publication_legislation_process_path(process) do %>
-            <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
-            <p><%= format_date(process.draft_publication_date) %></p>
-          <% end %>
-        </li>
-      <% end %>
-
-      <% if process.allegations_phase.enabled? %>
-        <li <%= "class=active" if phase == :allegations_phase %>>
-          <%= link_to allegations_legislation_process_path(process) do %>
-            <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
-            <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
-          <% end %>
-        </li>
-      <% end %>
-
-      <% if process.result_publication.enabled? %>
-        <li <%= "class=active" if phase == :result_publication %>>
-          <%= link_to result_publication_legislation_process_path(process) do %>
-            <h4><%= t('legislation.processes.shared.result_publication_date') %></h4>
-            <p><%= format_date(process.result_publication_date) %></p>
-          <% end %>
-        </li>
-      <% end %>
-    </ul>
   </div>
 </nav>