Merge pull request #1811 from consul/legislation-processes

Legislation processes
This commit is contained in:
BertoCQ
2017-09-05 17:06:53 +02:00
committed by GitHub
10 changed files with 146 additions and 226 deletions

View File

@@ -13,37 +13,29 @@
//
// 01. Utils
// -----------------
// ---------
$grey-heading: #e6e6e6;
$border-dark: darken($border, 10%);
.grey-heading {
background: #e6e6e6;
background: $grey-heading;
}
$epigraph-font-size: rem-calc(15);
$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;
}
ul {
list-style: none;
margin-left: 0;
li::before {
vertical-align: text-bottom;
padding-right: 0.5rem;
content: '';
color: #8aa8be;
content: '';
padding-right: $line-height / 4;
vertical-align: text-bottom;
}
}
@@ -52,79 +44,33 @@ $epigraph-line-height: rem-calc(22);
}
.debate-add-info {
margin-top: 3rem;
padding-top: 4rem;
border-top: 1px solid darken($border, 10%);
border-top: 1px solid $border-dark;
margin-top: $line-height;
padding-top: $line-height;
@include breakpoint(medium) {
margin-bottom: 2rem;
}
.debate-info-wrapper {
h2 {
font-size: $lead-font-size;
@include breakpoint(medium) {
float: left;
}
}
}
}
.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;
}
.title {
font-weight: bold;
text-transform: uppercase;
}
.description {
margin-bottom: 1rem;
p {
font-size: $epigraph-font-size;
line-height: $epigraph-line-height;
}
ul {
font-size: $epigraph-font-size;
line-height: $epigraph-line-height;
}
li {
margin-bottom: 1rem;
p {
display: inline;
margin-bottom: 0;
}
}
h4 {
font-size: $base-font-size;
}
}
.button-subscribe {
margin-top: 1rem;
margin-top: $line-height;
@include breakpoint(medium) {
margin-top: $line-height * 2;
padding: 0.5em 1em;
margin-top: 3rem;
}
h3 {
@@ -132,8 +78,8 @@ $epigraph-line-height: rem-calc(22);
}
p {
margin-bottom: 0;
font-size: $small-font-size;
margin-bottom: 0;
}
&:hover h3 {
@@ -143,41 +89,21 @@ $epigraph-line-height: rem-calc(22);
}
// 03. Legislation process navigation
// -----------------
// ----------------------------------
.legislation-process-categories {
position: relative;
.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;
list-style: none;
padding-left: 0;
margin: 0 auto;
margin-bottom: 0;
@include breakpoint(medium) {
padding-left: 1rem;
}
svg {
position: absolute;
top: 1.25rem;
@include breakpoint(1280px) {
transform: rotate(-6deg);
left: -1rem;
}
}
padding-left: 0;
}
li {
@@ -187,6 +113,10 @@ $epigraph-line-height: rem-calc(22);
transition: all 0.4s;
border-bottom: 2px solid transparent;
@include breakpoint(medium) {
margin-left: $line-height * 2;
}
&:first-of-type {
margin-left: 0;
}
@@ -197,29 +127,25 @@ $epigraph-line-height: rem-calc(22);
border-bottom: 2px solid $brand;
}
@media (min-width: 950px) {
margin: 0 0 0 3rem;
}
a,
h4 {
display: block;
color: #6d6d6d;
margin-bottom: 0;
}
}
a {
&:hover,
&:active {
text-decoration: none;
}
a {
&:hover,
&:active {
text-decoration: none;
}
p {
margin-bottom: 0;
p {
margin-bottom: 0;
@include breakpoint(medium) {
margin-bottom: 1rem;
}
@include breakpoint(medium) {
margin-bottom: 1rem;
}
}
}
@@ -231,7 +157,8 @@ $epigraph-line-height: rem-calc(22);
}
// 04. Debate list
// -----------------
// ----------------
.debate-chooser {
padding: 2rem 1rem;
@@ -277,38 +204,43 @@ $epigraph-line-height: rem-calc(22);
}
// 05. Debate quiz
// -----------------
// ---------------
.debate-questions {
.comments {
margin-top: 4rem;
margin-top: $line-height * 2.5;
}
.quiz-header {
margin-bottom: 2rem;
margin-bottom: $line-height;
.quiz-title,
.quiz-next {
padding: 1rem;
height: 6rem;
padding: $line-height;
@include breakpoint(medium) {
height: $line-height * 4;
}
}
.quiz-title {
background: #e5ecf2;
.quiz-header-title {
font-size: $small-font-size;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-size: $small-font-size;
}
}
h4 a {
color: $brand;
}
h4 a:hover {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
.quiz-next-link {
@@ -318,57 +250,49 @@ $epigraph-line-height: rem-calc(22);
&:active {
text-decoration: none;
}
}
.quiz-next {
background: #ccdbe5;
font-weight: 700;
color: $brand;
font-size: $small-font-size;
text-align: right;
text-transform: uppercase;
transition: background 0.25s ease-out, background 0.25s ease-out;
.quiz-next {
background: #ccdbe5;
color: $brand;
font-size: $small-font-size;
font-weight: bold;
text-align: right;
text-transform: uppercase;
transition: background 0.25s ease-out, background 0.25s ease-out;
.icon-angle-right {
vertical-align: sub;
}
.icon-angle-right {
vertical-align: middle;
}
&:hover,
&:active {
text-decoration: none;
background: $brand;
color: #fff;
.icon-angle-right {
color: #fff;
}
}
&:hover,
&:active {
background: $brand;
color: #fff;
text-decoration: none;
}
}
}
.quiz-question {
margin-bottom: 2rem;
margin-bottom: $line-height;
}
.debate-questions {
position: relative;
list-style: none;
.participation-not-allowed {
padding-bottom: 3rem;
}
.control {
position: relative;
display: inline-block;
color: #555;
cursor: pointer;
background: #fff;
border: 1px solid $border;
border-radius: 4px;
padding: 0.75rem 2.5rem;
margin-right: 1.5rem;
margin-bottom: 0.5rem;
border-radius: rem-calc(4);
color: #555;
cursor: pointer;
display: inline-block;
margin-bottom: $line-height / 2;
margin-right: $line-height;
padding: $line-height / 2 $line-height * 2;
position: relative;
}
.active {
@@ -409,14 +333,15 @@ $epigraph-line-height: rem-calc(22);
}
// 06. Legislation draft
// -----------------
// ---------------------
.debate-draft {
padding: 10rem 2rem 15rem;
display: block;
background: #f2f2f2;
button {
height: 90px;
height: rem-calc(90);
h3 {
margin-bottom: 0;
@@ -430,7 +355,8 @@ $epigraph-line-height: rem-calc(22);
}
// 07. Legislation allegations
// -----------------
// ---------------------------
.legislation-allegation {
padding-top: 1rem;
@@ -449,12 +375,12 @@ $epigraph-line-height: rem-calc(22);
.button-circle {
line-height: 0;
padding: 0;
width: 30px;
height: 30px;
width: rem-calc(30);
height: rem-calc(30);
border-radius: 50%;
span {
padding-left: 1px;
padding-left: rem-calc(1);
&::before {
line-height: 1.55;
@@ -580,7 +506,7 @@ $epigraph-line-height: rem-calc(22);
.calc-comments {
cursor: pointer;
background: #f2f2f2;
width: 50px;
width: rem-calc(50);
.draft-panel {
.panel-title {
@@ -733,7 +659,7 @@ $epigraph-line-height: rem-calc(22);
.comments-on {
.calc-index {
width: 50px;
width: rem-calc(50);
background: #f2f2f2;
cursor: pointer;
@@ -797,11 +723,11 @@ $epigraph-line-height: rem-calc(22);
.comments-box-container {
position: absolute;
top: 230px;
top: rem-calc(230);
}
.comment-box {
width: 375px;
width: rem-calc(375);
padding: 1rem;
background: #f9f9f9;
border: 1px solid $border;
@@ -852,7 +778,7 @@ $epigraph-line-height: rem-calc(22);
.participation-not-allowed {
font-size: 0.875rem;
height: 50px;
height: rem-calc(50);
padding: 0.85rem 0.75rem;
top: -18px;
}
@@ -891,7 +817,7 @@ $epigraph-line-height: rem-calc(22);
border-right: 1px solid #d0d0d0;
border-left: 1px solid #d0d0d0;
width: 100%;
height: 200px;
height: rem-calc(200);
margin-bottom: 0.5rem;
}

View File

@@ -2,7 +2,7 @@
<%= render 'legislation/processes/header', process: @process, header: :small %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations_phase %>
<div class="column row">
<div class="draft-panels small-12 column row">

View File

@@ -2,7 +2,7 @@
<%= render 'legislation/processes/header', process: @process, header: :small %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations_phase %>
<div class="column row">
<div class="draft-panels small-12 column row">

View File

@@ -2,7 +2,7 @@
<%= render 'legislation/processes/header', process: @process, header: :small %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations_phase %>
<div class="column row">
<div class="draft-panels small-12 column row">

View File

@@ -2,7 +2,7 @@
<%= render 'legislation/processes/header', process: @process, header: :small %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations %>
<%= render 'legislation/processes/key_dates', process: @process, phase: :allegations_phase %>
<div class="column row">
<div class="draft-panels small-12 column row">

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>
@@ -9,21 +9,19 @@
<div id="debate-show" class="row description legislation-debate-show">
<div class="small-12 column">
<% if process.description.present? %>
<h4><%= t('legislation.processes.header_full.description') %></h4>
<p class="title"><%= t('legislation.processes.header_full.description') %></p>
<%= markdown process.description %>
<% end %>
</div>
<% if process.additional_info.present? %>
<div class="small-12 column debate-add-info">
<div class="debate-info-wrapper">
<%= markdown process.additional_info if process.additional_info %>
</div>
<%= markdown process.additional_info if process.additional_info %>
</div>
<% end %>
</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,7 +1,7 @@
<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">
<p><%= t('.title') %></p>
<%= back_link_to legislation_processes_path %>
<h2>
<%= process.title %>
</h2>
@@ -11,21 +11,19 @@
<div class="row description">
<div class="small-12 column">
<% if process.description.present? %>
<h4><%= t('.description') %></h4>
<p class="title"><%= t('.description') %></p>
<%= markdown process.description %>
<% end %>
</div>
<% if process.additional_info.present? %>
<div id="debate-show" class="small-12 column debate-add-info legislation-debate-show">
<div class="debate-info-wrapper">
<%= markdown process.additional_info if process.additional_info %>
</div>
<%= markdown process.additional_info if process.additional_info %>
</div>
<% end %>
</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.to_sym == :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.to_sym == :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.to_sym == :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.to_sym == :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>

View File

@@ -53,7 +53,6 @@ en:
empty_questions: There aren't any questions
participate: Participate in the debate
header_full:
title: Participate
description: Description
more_info: More information and context
index:

View File

@@ -53,7 +53,6 @@ es:
empty_questions: No hay preguntas
participate: Realiza tus aportaciones al debate previo participando en los siguientes temas.
header_full:
title: Colabora en la elaboración de la normativa sobre
description: En qué consiste
more_info: Más información y contexto
index: