improves layout for polls index view

This commit is contained in:
decabeza
2017-10-02 12:24:31 +02:00
parent c3d5041717
commit f497227e3f
4 changed files with 51 additions and 22 deletions

View File

@@ -354,6 +354,18 @@ a {
vertical-align: top;
}
.aling-middle {
vertical-align: middle;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
// 02. Header
// ----------

View File

@@ -1701,9 +1701,13 @@
}
.section-title-divider {
border-bottom: 2px solid $brand;
color: $brand;
margin-bottom: $line-height;
border-bottom: 1px solid #eee;
color: #000;
margin: $line-height 0;
span {
border-bottom: 1px solid #000;
}
}
.poll-question {

View File

@@ -33,23 +33,30 @@
<span class="show-for-sr"><%= t("polls.index.cant_answer") %></span>
</div>
<% end %>
<div class="row">
<div class="small-12 column">
<div class="dates"><%= poll_dates(poll) %></div>
<div class="row" data-equalizer>
<div class="small-12 medium-3 column" data-equalizer-watch>
<!-- PENDING TO REPLACE THIS BLOCK WITH POLL MAIN IMAGE -->
<div style="background: #eee; width: 100%; height: 100%; display: block; margin: -12px;">&nbsp;</div>
<!-- /. PENDING TO REPLACE THIS BLOCK WITH POLL MAIN IMAGE -->
</div>
<div class="small-12 medium-6 column" data-equalizer-watch>
<div class="dates"></div>
<% if poll.questions.count == 1 %>
<% poll.questions.each do |question| %>
<h4 class="inline-block"><%= link_to question.title, poll %></h4>
<h4><%= link_to question.title, poll %></h4>
<%= poll_dates(poll) %>
<% end %>
<% else %>
<h4 class="inline-block"><%= link_to poll.name, poll %></h4>
<ul>
<h4><%= link_to poll.name, poll %></h4>
<%= poll_dates(poll) %>
<ul class="margin-top">
<% poll.questions.each do |question| %>
<li><%= link_to question.title, question_path(question) %></li>
<% end %>
</ul>
<% end %>
<% if poll.geozones.any? %>
<p class="inline-block">
<p>
<small><%= t("polls.index.geozone_info") %></small>
</p>
<% end %>
@@ -59,16 +66,18 @@
<% end %>
</ul>
</div>
<div class="small-12 medium-6 large-4 column end">
<%= link_to poll, class: "button expanded" do %>
<% if poll.expired? %>
<%= t("polls.index.participate_button_expired") %>
<% elsif poll.incoming? %>
<%= t("polls.index.participate_button_incoming") %>
<% else %>
<%= t("polls.index.participate_button") %>
<div class="small-12 medium-3 column table" data-equalizer-watch>
<div class="table-cell aling-middle">
<%= link_to poll, class: "button hollow expanded" do %>
<% if poll.expired? %>
<%= t("polls.index.participate_button_expired") %>
<% elsif poll.incoming? %>
<%= t("polls.index.participate_button_incoming") %>
<% else %>
<%= t("polls.index.participate_button") %>
<% end %>
<% end %>
<% end %>
</div>
</div>
</div>
</div>

View File

@@ -6,18 +6,22 @@
<%= render "shared/section_header", i18n_namespace: "polls.index.section_header", image: "polls" %>
<div class="row">
<div class="small-12 medium-9 column">
<div class="small-12 column">
<%= render 'shared/filter_subnav', i18n_namespace: "polls.index" %>
<% polls_by_geozone_restriction = @polls.group_by(&:geozone_restricted) %>
<% if polls_by_geozone_restriction[false].present? %>
<h3 class="section-title-divider"><%= t("polls.index.no_geozone_restricted") %></h3>
<h3 class="section-title-divider">
<span><%= t("polls.index.no_geozone_restricted") %></span>
</h3>
<%= render partial: 'poll_group', locals: {poll_group: polls_by_geozone_restriction[false]} %>
<% end %>
<% if polls_by_geozone_restriction[true].present? %>
<h3 class="section-title-divider"><%= t("polls.index.geozone_restricted") %></h3>
<h3 class="section-title-divider">
<span><%= t("polls.index.geozone_restricted") %></span>
</h3>
<%= render partial: 'poll_group', locals: {poll_group: polls_by_geozone_restriction[true]} %>
<% end %>