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; vertical-align: top;
} }
.aling-middle {
vertical-align: middle;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}
// 02. Header // 02. Header
// ---------- // ----------

View File

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

View File

@@ -33,23 +33,30 @@
<span class="show-for-sr"><%= t("polls.index.cant_answer") %></span> <span class="show-for-sr"><%= t("polls.index.cant_answer") %></span>
</div> </div>
<% end %> <% end %>
<div class="row"> <div class="row" data-equalizer>
<div class="small-12 column"> <div class="small-12 medium-3 column" data-equalizer-watch>
<div class="dates"><%= poll_dates(poll) %></div> <!-- 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 %> <% if poll.questions.count == 1 %>
<% poll.questions.each do |question| %> <% 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 %> <% end %>
<% else %> <% else %>
<h4 class="inline-block"><%= link_to poll.name, poll %></h4> <h4><%= link_to poll.name, poll %></h4>
<ul> <%= poll_dates(poll) %>
<ul class="margin-top">
<% poll.questions.each do |question| %> <% poll.questions.each do |question| %>
<li><%= link_to question.title, question_path(question) %></li> <li><%= link_to question.title, question_path(question) %></li>
<% end %> <% end %>
</ul> </ul>
<% end %> <% end %>
<% if poll.geozones.any? %> <% if poll.geozones.any? %>
<p class="inline-block"> <p>
<small><%= t("polls.index.geozone_info") %></small> <small><%= t("polls.index.geozone_info") %></small>
</p> </p>
<% end %> <% end %>
@@ -59,16 +66,18 @@
<% end %> <% end %>
</ul> </ul>
</div> </div>
<div class="small-12 medium-6 large-4 column end"> <div class="small-12 medium-3 column table" data-equalizer-watch>
<%= link_to poll, class: "button expanded" do %> <div class="table-cell aling-middle">
<% if poll.expired? %> <%= link_to poll, class: "button hollow expanded" do %>
<%= t("polls.index.participate_button_expired") %> <% if poll.expired? %>
<% elsif poll.incoming? %> <%= t("polls.index.participate_button_expired") %>
<%= t("polls.index.participate_button_incoming") %> <% elsif poll.incoming? %>
<% else %> <%= t("polls.index.participate_button_incoming") %>
<%= t("polls.index.participate_button") %> <% else %>
<%= t("polls.index.participate_button") %>
<% end %>
<% end %> <% end %>
<% end %> </div>
</div> </div>
</div> </div>
</div> </div>

View File

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