Merge pull request #81 from medialab-prado/80-fix-small-header

Refactor header toggle and show additional info on the small header
This commit is contained in:
Amaia Castro
2017-01-18 12:50:15 +01:00
committed by GitHub
4 changed files with 26 additions and 7 deletions

View File

@@ -3,11 +3,11 @@ App.Legislation =
initialize: -> initialize: ->
$('#js-toggle-debate').on $('#js-toggle-debate').on
click: -> click: ->
$('#debate-info').toggle() $('#debate-show').toggle()
$('#js-toggle-small-debate').on $('#js-toggle-small-debate').on
click: -> click: ->
$('#debate-info').toggle() $('#debate-show').toggle()
$('span').toggleClass('icon-angle-up') $('span').toggleClass('icon-angle-up')
$('form#new_legislation_answer input.button').hide() $('form#new_legislation_answer input.button').hide()

View File

@@ -62,9 +62,12 @@ $epigraph-font-size: rem-calc(15);
color: #8AA8BE; color: #8AA8BE;
} }
} }
#debate-info { #debate-show {
display: none; display: none;
}
.debate-add-info {
margin-top: 3rem; margin-top: 3rem;
padding-top: 4rem; padding-top: 4rem;
border-top: 1px solid darken($border, 10%); border-top: 1px solid darken($border, 10%);
@@ -437,6 +440,10 @@ $epigraph-font-size: rem-calc(15);
// ----------------- // -----------------
.legislation-allegation { .legislation-allegation {
padding-top: 1rem; padding-top: 1rem;
#debate-show {
margin-top: 2rem;
}
.headline { .headline {
margin-bottom: 0; margin-bottom: 0;

View File

@@ -12,8 +12,20 @@
</div> </div>
</div> </div>
<div class="row description"> <div id="debate-show" class="row description">
<div id="debate-info" style="display: none" class="small-12 column"> <div class="small-12 medium-4 column">
<h4><%= t('legislation.processes.header_full.description') %></h4>
<%= markdown process.description %>
</div>
<div class="small-12 medium-4 column">
<h4><%= t('legislation.processes.header_full.target') %></h4>
<%= markdown process.target %>
</div>
<div class="small-12 medium-4 column">
<h4><%= t('legislation.processes.header_full.how_to_participate') %></h4>
<%= markdown process.how_to_participate %>
</div>
<div class="small-12 column debate-add-info">
<div class="debate-info-wrapper"> <div class="debate-info-wrapper">
<%= markdown process.additional_info if process.additional_info %> <%= markdown process.additional_info if process.additional_info %>
</div> </div>

View File

@@ -27,7 +27,7 @@
<h4><%= t('.how_to_participate') %></h4> <h4><%= t('.how_to_participate') %></h4>
<%= markdown process.how_to_participate %> <%= markdown process.how_to_participate %>
</div> </div>
<div id="debate-info" class="small-12 column"> <div id="debate-show" class="small-12 column debate-add-info">
<div class="debate-info-wrapper"> <div class="debate-info-wrapper">
<%= markdown process.additional_info if process.additional_info %> <%= markdown process.additional_info if process.additional_info %>
</div> </div>