adds styles to polls index and show views

app/assets/stylesheets/participation.scss

@@ -6,6 +6,7 @@
 // 04. List participation
 // 05. Featured
 // 06. Proposals successful
+// 07. Polls
 //
 
 // 01. Votes and supports
@@ -945,37 +946,6 @@
 // 06. Proposals successful
 // -------------------------
 
-.dark-heading {
-  background: #2D3E50;
-  color: white;
-
-  @include breakpoint(medium) {
-    padding-bottom: $line-height;
-  }
-
-  &.enquiries {
-    background: #2D3E50 image-url('heading_enquiries.jpg') no-repeat;
-    background-position: 70%;
-  }
-
-  p {
-    margin-bottom: 0;
-
-    &.title {
-      color: #FFD200;
-    }
-  }
-
-  .info {
-    background: #314253;
-    padding-top: $line-height;
-
-    @include breakpoint(medium) {
-      border-top: rem-calc(6) solid #FFD200;
-    }
-  }
-}
-
 .sucessfull-proposals-banner {
   background: #2D3E50 image-url("ballot_tiny.gif") no-repeat;
   background-position: 75% 0;
@@ -1045,3 +1015,50 @@
     }
   }
 }
+
+// 07. Polls
+// ----------------------
+
+.dark-heading {
+  background: #2D3E50;
+  color: white;
+
+  .title {
+    color: #FFD200;
+  }
+
+  .info {
+    background: #314253;
+    padding: $line-height;
+
+    @include breakpoint(medium) {
+      border-top: rem-calc(6) solid #FFD200;
+    }
+
+    a {
+      color: white;
+      text-decoration: underline;
+    }
+
+  }
+
+  &.poll-show {
+    min-height: $line-height*8;
+  }
+}
+
+.poll, .poll-question {
+  background: white;
+  border-bottom: 1px solid $border;
+  margin-bottom: $line-height/2;
+  padding: $line-height;
+
+  .date {
+    color: $brand;
+    font-size: $small-font-size;
+  }
+
+  h3 a {
+    color: $text;
+  }
+}

app/views/polls/index.html.erb

@@ -1,7 +1,31 @@
-<%= render 'shared/filter_subnav', i18n_namespace: "polls.index" %>
+<% provide :title do %><%= t("polls.index.title") %><% end %>
+<% content_for :wrapper_class, "light" %>
 
-<% @polls.each do |poll| %>
+<div class="expanded no-margin-top dark-heading">
-  <%= link_to poll.name, poll %> (<%= poll_dates(poll) %>)
+  <div class="row">
-<% end %>
+    <div class="small-12 medium-6 column padding">
+      <h1><%= t("polls.index.title") %></h1>
+    </div>
+  </div>
+</div>
 
-<%= paginate @polls %>
+<div class="row">
+  <div class="small-12 medium-3 column">
+    <%= render 'shared/filter_subnav_vertical', i18n_namespace: "polls.index" %>
+  </div>
+
+  <div class="small-12 medium-9 column margin-top">
+    <% @polls.each do |poll| %>
+      <div class="poll">
+        <h3><%= poll.name %></h3>
+        <p><%= poll_dates(poll) %></p>
+        <%= link_to t("polls.index.button"),
+                    poll,
+                    class: "button",
+                    title: t("polls.index.button") + " " + (poll.name) %>
+      </div>
+    <% end %>
+
+    <%= paginate @polls %>
+  </div>
+</div>

app/views/polls/show.html.erb

@@ -1,8 +1,27 @@
-<h1><%= @poll.name %></h1>
+<% provide :title do %><%= @poll.name %><% end %>
-<p><strong><%= t("polls.show.dates_title") %>: <%= poll_dates(@poll) %></strong></p>
+<% content_for :wrapper_class, "light" %>
 
-<% unless can?(:answer, @poll) %>
+<div class="expanded no-margin-top dark-heading poll-show">
+  <div class="row">
+    <div class="small-12 medium-6 column padding">
+      <%= render "shared/back_link" %>
+
+      <h2><%= @poll.name %></h2>
+    </div>
+    <div class="small-12 medium-4 column padding info">
+      <p class="title">
+        <strong><%= t("polls.show.dates_title") %></strong>
+      </p>
+      <p>
+        <strong><%= poll_dates(@poll) %></strong>
+      </p>
+    </div>
+  </div>
+</div>
+
+<div class="row margin-top">
   <div class="small-12 column">
+    <% unless can?(:answer, @poll) %>
       <% if current_user.nil? %>
         <div class="callout primary">
           <%= t("polls.show.cant_answer_not_logged_in",
@@ -23,32 +42,21 @@
           <%= t('polls.show.cant_answer_expired') %>
         </div>
       <% end %>
-  </div>
+    <% end %>
-<% end %>
 
-<% @answerable_questions.each do |question| %>
+    <% @answerable_questions.each do |question| %>
-  <div id="<%= dom_id(question) %>">
+      <%= render 'polls/questions/question', question: question %>
-    <%= link_to question.title, question_path(question) %>
+    <% end %>
 
-    <div class="row margin-top text-center" id="<%= dom_id(question) %>_answers">
+    <% if can?(:answer, @poll) &&
-      <%= render 'polls/questions/answers', question: question %>
-    </div>
-  </div>
-<% end %>
-
-<% if can?(:answer, @poll) &&
           @non_answerable_questions.present? %>
       <div class="callout warning">
         <%= t('polls.show.cant_answer_wrong_geozone') %>
       </div>
-<% end %>
+    <% end %>
 
-<% @non_answerable_questions.each do |question| %>
+    <% @non_answerable_questions.each do |question| %>
-  <div id="<%= dom_id(question) %>">
+      <%= render 'polls/questions/question', question: question %>
-    <%= link_to question.title, question_path(question) %>
+    <% end %>
-
-    <div class="row margin-top text-center" id="<%= dom_id(question) %>_answers">
-      <%= render 'polls/questions/answers', question: question %>
   </div>
-  </div>
+</div>
-<% end %>

config/locales/en.yml

@@ -387,6 +387,8 @@ en:
         current: "Open"
         incoming: "Incoming"
         expired: "Expired"
+      title: "Polls"
+      button: "Participate in this polls"
     show:
       dates_title: "Participation dates"
       cant_answer_not_logged_in: "You must %{signin} or %{signup} to participate."

config/locales/es.yml

@@ -387,6 +387,8 @@ es:
         current: "Abiertas"
         incoming: "Próximamente"
         expired: "Terminadas"
+      title: "Votaciones"
+      button: "Participar en esta votación"
     show:
       dates_title: "Fechas de participación"
       cant_answer_not_logged_in: "Necesitas %{signin} o %{signup} para participar."