improves legislation processes header layout

This commit is contained in:
decabeza
2017-09-04 18:39:58 +02:00
parent 1d17e0cb58
commit da1f72ee7c
4 changed files with 45 additions and 78 deletions

View File

@@ -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;

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>