Merge pull request #1971 from consul/polls-show

Polls show

app/assets/fonts/icons.svg

@@ -63,4 +63,6 @@
 <glyph glyph-name="telegram" unicode="&#49;" d="M504 509c6-5 9-11 8-18l-73-439c-1-6-4-10-10-13-2-2-5-2-8-2-3 0-5 0-7 1l-130 53-69-84c-3-5-8-7-14-7-2 0-4 0-6 1-4 1-7 4-9 7-2 3-3 6-3 10l0 100 247 303-306-265-113 47c-7 2-10 7-11 15 0 8 3 14 9 17l476 274c2 2 5 3 9 3 4 0 7-1 10-3z"/>
 <glyph glyph-name="instagram" unicode="&#50;" d="M426 105l0 185-39 0c4-12 6-25 6-38 0-24-6-46-18-66-13-20-29-36-50-48-21-12-44-18-69-18-37 0-69 13-96 39-27 26-40 57-40 93 0 13 2 26 6 38l-41 0 0-185c0-5 2-10 5-13 4-3 8-5 13-5l305 0c5 0 9 2 13 5 3 3 5 8 5 13z m-81 152c0 23-9 44-26 60-18 17-38 25-63 25-24 0-45-8-62-25-17-16-26-37-26-60 0-24 9-44 26-61 17-16 38-25 62-25 25 0 45 9 63 25 17 17 26 37 26 61z m81 103l0 47c0 5-2 10-6 14-4 4-8 6-14 6l-50 0c-5 0-10-2-14-6-4-4-5-9-5-14l0-47c0-6 1-10 5-14 4-4 9-6 14-6l50 0c6 0 10 2 14 6 4 4 6 8 6 14z m49 59l0-326c0-16-5-29-16-40-11-11-24-16-40-16l-326 0c-16 0-29 5-40 16-11 11-16 24-16 40l0 326c0 16 5 29 16 40 11 11 24 16 40 16l326 0c16 0 29-5 40-16 11-11 16-24 16-40z"/>
 <glyph glyph-name="image" unicode="&#51;" d="M165 347c0-15-6-28-16-38-11-11-24-16-39-16-16 0-28 5-39 16-11 10-16 23-16 38 0 16 5 29 16 39 11 11 23 16 39 16 15 0 28-5 39-16 10-10 16-23 16-39z m292-109l0-128-402 0 0 55 91 91 46-46 146 147z m28 201l-458 0c-2 0-4-1-6-3-2-2-3-4-3-6l0-348c0-2 1-4 3-6 2-2 4-3 6-3l458 0c2 0 4 1 6 3 2 2 3 4 3 6l0 348c0 2-1 4-3 6-2 2-4 3-6 3z m45-9l0-348c0-12-4-23-13-32-9-9-20-13-32-13l-458 0c-12 0-23 4-32 13-9 9-13 20-13 32l0 348c0 12 4 23 13 32 9 9 20 13 32 13l458 0c12 0 23-4 32-13 9-9 13-20 13-32z"/>
+<glyph glyph-name="search-plus" unicode="&#52;" d="M311 283l0-18c0-2-1-4-3-6-2-2-4-3-6-3l-64 0 0-64c0-2-1-5-3-6-2-2-4-3-6-3l-19 0c-2 0-4 1-6 3-2 1-3 4-3 6l0 64-64 0c-2 0-4 1-6 3-2 2-3 4-3 6l0 18c0 3 1 5 3 7 2 2 4 3 6 3l64 0 0 64c0 2 1 4 3 6 2 2 4 3 6 3l19 0c2 0 4-1 6-3 2-2 3-4 3-6l0-64 64 0c2 0 4-1 6-3 2-2 3-4 3-7z m36-9c0 36-12 66-37 91-25 25-55 37-91 37-35 0-65-12-90-37-25-25-38-55-38-91 0-35 13-65 38-90 25-25 55-38 90-38 36 0 66 13 91 38 25 25 37 55 37 90z m147-237c0-11-4-19-11-26-7-7-16-11-26-11-10 0-19 4-26 11l-98 98c-34-24-72-36-114-36-27 0-53 5-78 16-25 11-46 25-64 43-18 18-32 39-43 64-10 25-16 51-16 78 0 28 6 54 16 78 11 25 25 47 43 65 18 18 39 32 64 43 25 10 51 15 78 15 28 0 54-5 79-15 24-11 46-25 64-43 18-18 32-40 43-65 10-24 16-50 16-78 0-42-12-80-36-114l98-98c7-7 11-15 11-25z"/>
+<glyph glyph-name="search-minus" unicode="&#53;" d="M311 283l0-18c0-2-1-4-3-6-2-2-4-3-6-3l-165 0c-2 0-4 1-6 3-2 2-3 4-3 6l0 18c0 3 1 5 3 7 2 2 4 3 6 3l165 0c2 0 4-1 6-3 2-2 3-4 3-7z m36-9c0 36-12 66-37 91-25 25-55 37-91 37-35 0-65-12-90-37-25-25-38-55-38-91 0-35 13-65 38-90 25-25 55-38 90-38 36 0 66 13 91 38 25 25 37 55 37 90z m147-237c0-11-4-19-11-26-7-7-16-11-26-11-10 0-19 4-26 11l-98 98c-34-24-72-36-114-36-27 0-53 5-78 16-25 11-46 25-64 43-18 18-32 39-43 64-10 25-16 51-16 78 0 28 6 54 16 78 11 25 25 47 43 65 18 18 39 32 64 43 25 10 51 15 78 15 28 0 54-5 79-15 24-11 46-25 64-43 18-18 32-40 43-65 10-24 16-50 16-78 0-42-12-80-36-114l98-98c7-7 11-15 11-25z"/>
 </font></defs></svg>

app/assets/stylesheets/foundation_and_overrides.scss

@@ -4,6 +4,7 @@
 @import 'consul_settings';
 @import 'custom_settings';
 @import 'foundation';
+@import 'motion-ui/motion-ui';
 
 @include foundation-global-styles;
 @include foundation-grid;
@@ -37,3 +38,7 @@
 @include foundation-title-bar;
 @include foundation-top-bar;
 @include foundation-menu-icon;
+@include foundation-orbit;
+
+@include motion-ui-transitions;
+@include motion-ui-animations;

app/assets/stylesheets/icons.scss

@@ -260,3 +260,11 @@
 .icon-image::before {
   content: '\33';
 }
+
+.icon-search-plus::before {
+  content: '\34';
+}
+
+.icon-search-minus::before {
+  content: '\35';
+}

app/assets/stylesheets/layout.scss

@@ -303,6 +303,10 @@ a {
   float: left;
 }
 
+.back:not([class^="icon-"]) {
+  text-decoration: underline;
+}
+
 .tabs-content {
   border: 0;
 }

app/assets/stylesheets/participation.scss

@@ -310,10 +310,7 @@
 .budget-investment-new,
 .proposal-form,
 .proposal-edit,
-.new_poll_question,
-.edit_poll_question,
-.new_poll,
-.edit_poll,
+.polls-form,
 .poll-question-form {
   @include direct-uploads;
 }
@@ -1548,18 +1545,8 @@
 // 08. Polls
 // ----------------------
 
-.dark-heading {
-  background: #2d3e50;
-  color: #fff;
-
-  .title {
-    color: #92ba48;
-  }
-
-  .button {
-    background: #fff;
-    color: $brand;
-  }
+.polls-show-header {
+  background: #fafafa;
 
   .callout {
 
@@ -1575,29 +1562,86 @@
       color: $color-alert;
     }
   }
+}
 
-  .info {
-    background: #314253;
-    padding: $line-height;
+.poll-more-info,
+.poll-more-info-answers {
+  border-top: 1px solid #eee;
+}
 
-    @include breakpoint(medium) {
-      border-top: rem-calc(6) solid #92ba48;
+.poll-more-info-answers {
+  background: #fafafa;
+  border-bottom: 1px solid #eee;
+
+  .column:nth-child(odd) {
+    border-right: 1px solid #eee;
+  }
+}
+
+.orbit-bullets button {
+  background-color: #ccc;
+  height: $line-height / 2;
+  width: $line-height / 2;
+
+  &.is-active {
+    background-color: $brand;
+  }
+}
+
+.orbit-container {
+  height: 100% !important;
+  max-height: none !important;
+}
+
+.orbit-slide {
+  max-height: none !important;
+}
+
+.orbit-caption {
+  background: #eee;
+  color: $text;
+}
+
+.zoom-link {
+  background: #fff;
+  border-radius: rem-calc(48);
+  color: #000;
+  font-size: rem-calc(24);
+  font-weight: bold;
+  height: rem-calc(48);
+  line-height: rem-calc(48);
+  right: 12px;
+  padding-top: rem-calc(4);
+  position: absolute;
+  text-align: center;
+  top: 24px;
+  width: rem-calc(48);
+  z-index: 9;
+
+  &:hover {
+    background: $dark;
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.image-container {
+  background: #fafafa;
+  overflow: hidden;
+  position: relative;
+}
+
+.poll {
+
+  &.with-image {
+    padding: 0 $line-height / 2 0 0;
+
+    img {
+      height: 100%;
+      max-width: none;
+      position: absolute;
     }
   }
-
-  a:not(.button) {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  .back,
-  .icon-angle-left {
-    color: #fff;
-  }
-
-  &.polls-show-header {
-    min-height: $line-height * 8;
-  }
 }
 
 .poll,

app/views/admin/poll/polls/edit.html.erb

@@ -2,4 +2,6 @@
 
 <h2><%= t("admin.polls.edit.title") %></h2>
 
-<%= render "form" %>
+<div class="polls-form">
+  <%= render "form" %>
+</div>

app/views/admin/poll/polls/new.html.erb

@@ -2,4 +2,6 @@
 
 <h2><%= t("admin.polls.new.title") %></h2>
 
-<%= render "form" %>
+<div class="polls-form">
+  <%= render "form" %>
+</div>

app/views/polls/_gallery.html.erb

@@ -0,0 +1,46 @@
+<div class="orbit margin-bottom" role="region" aria-label="Answer 1" data-orbit data-auto-play="false">
+  <a data-toggle="answer_1" class="zoom-link show-for-medium-up">
+    <span class="icon-search-plus"></span>
+    <span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
+  </a>
+
+  <ul class="orbit-container">
+    <li>
+      <button class="orbit-previous">
+        <span class="show-for-sr"><%= t("shared.orbit.previous_slide") %></span>&#9664;&#xFE0E;
+      </button>
+    </li>
+    <li>
+      <button class="orbit-next">
+        <span class="show-for-sr"><%= t("shared.orbit.next_slide") %></span>&#9654;&#xFE0E;
+      </button>
+    </li>
+    <!-- each image do -->
+    <li class="is-active orbit-slide">
+      <%= link_to "/assets/example_vertical.jpg", target: "_blank" do %>
+        <%= image_tag "example_horizontal.jpg", class: "orbit-image" %>
+      <% end %>
+      <!-- replace this with image title -->
+      <span class="orbit-caption">Image title 1</span>
+      <!-- /. replace this with image title -->
+    </li>
+    <!-- end -->
+    <li class="orbit-slide">
+      <%= link_to "/assets/example_vertical.jpg", target: "_blank" do %>
+        <%= image_tag "example_vertical.jpg", class: "orbit-image" %>
+      <% end %>
+      <span class="orbit-caption">Image title 2</span>
+    </li>
+  </ul>
+
+  <nav class="orbit-bullets">
+    <button class="is-active" data-slide="0">
+      <!-- replace this with image title -->
+      <span class="show-for-sr">Image title 1</span>
+      <!-- /. replace this with image title -->
+    </button>
+    <button data-slide="1">
+      <span class="show-for-sr">Image title 2</span>
+    </button>
+  </nav>
+</div>

app/views/polls/_poll_group.html.erb

@@ -1,5 +1,5 @@
 <% poll_group.each do |poll| %>
-  <div class="poll">
+  <div class="poll with-image">
     <% if poll.answerable_by?(current_user) && poll.votable_by?(current_user) %>
       <%= link_to poll,
               class: "icon-poll-answer can-answer",
@@ -34,10 +34,14 @@
       </div>
     <% end %>
     <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 class="small-12 medium-3 column">
+        <div class="image-container" data-equalizer-watch>
+          <% if poll.image.present? %>
+            <%= image_tag poll.image_url(:large), alt: poll.image.title %>
+          <% else %>
+            <div class="no-image"></div>
+          <% end %>
+        </div>
       </div>
       <div class="small-12 medium-6 column" data-equalizer-watch>
         <div class="dates"></div>

app/views/polls/show.html.erb

@@ -1,36 +1,38 @@
 <% provide :title do %><%= @poll.name %><% end %>
 
 <div class="polls-show">
-  <div class="expanded no-margin-top dark-heading polls-show-header">
+  <div class="expanded no-margin-top polls-show-header">
     <div class="row">
       <div class="small-12 medium-9 column padding">
-        <%= back_link_to polls_path %>
+        <%= back_link_to polls_path, t("polls.show.back") %>
 
         <h2><%= @poll.name %></h2>
-        <ul class="no-bullet margin-top tags">
-          <% @poll.geozones.each do |g| %>
-            <li class="inline-block"><span><%= g.name %></span></li>
-          <% end %>
-        </ul>
 
-        <%= render "callout" %>
-      </div>
-      <div class="small-12 medium-3 column">
-        <div class="info">
-          <p>
-            <span class="title">
-              <strong><%= t("polls.show.dates_title") %></strong>
-            </span>
-            <br>
-            <%= poll_dates(@poll) %>
-          </p>
-        </div>
+        <%= safe_html_with_links simple_format(@poll.summary) %>
+
+        <% if @poll.geozones.any? %>
+          <ul class="no-bullet margin-top tags">
+            <% @poll.geozones.each do |g| %>
+              <li class="inline-block"><span><%= g.name %></span></li>
+            <% end %>
+          </ul>
+        <% end %>
       </div>
+
+      <aside class="small-12 medium-3 column margin-top">
+        <%= render partial: 'shared/social_share', locals: {
+          share_title: t("shared.share"),
+          title: @poll.name,
+          url: poll_url
+        } %>
+      </aside>
     </div>
   </div>
 
-  <div class="row margin-top">
+  <div class="row margin">
     <div class="small-12 medium-9 column">
+      <%= render "callout" %>
+
       <% if @poll.voted_in_booth?(current_user) %>
         <div class="callout warning">
           <%= t("polls.show.already_voted_in_booth") %>
@@ -41,13 +43,46 @@
         <% end %>
       <% end %>
     </div>
+  </div>
+
+  <div class="expanded poll-more-info">
+    <div class="row margin">
+      <div class="small-12 medium-9 column">
+        <h3><%= t("polls.show.more_info_title") %></h3>
+        <%= safe_html_with_links simple_format(@poll.description) %>
+      </div>
+
+      <aside class="small-12 medium-3 column">
+          <div class="sidebar-divider"></div>
+          <h2><%= t("polls.show.documents") %></h2>
+      </aside>
+    </div>
+  </div>
+
+  <div class="expanded poll-more-info-answers">
+    <div class="row padding">
+
+      <!-- EACH ANSWER DO -->
+      <div class="small-12 medium-6 column end" id="answer_1" data-toggler=".medium-6">
+
+        <!-- REPLACE THIS WITH answer title -->
+        <h3>Answer 1</h3>
+        <!-- /. REPLACE THIS WITH answer title -->
+
+        <!-- If Answer have images render this:
+          Maybe something like <%# render "gallery", gallery: answer.gallery %> -->
+        <%= render "gallery" %>
+        <!-- If Answer have images render this -->
+
+        <!-- REPLACE THIS WITH answer description -->
+        <div class="margin-top">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+        <!-- /. REPLACE THIS WITH answer description -->
+
+      </div>
+    </div>
+    <!-- /. EACH ANSWER DO -->
 
-    <aside class="small-12 medium-3 column">
-      <%= render partial: 'shared/social_share', locals: {
-        share_title: t("proposals.show.share"),
-        title: @poll.name,
-        url: poll_url
-      } %>
-    </aside>
   </div>
 </div>

config/locales/en/general.yml

@@ -482,7 +482,7 @@ en:
         help_text_2: "To participate in the next vote you have to sign up on %{org} and verify your account. All registered voters in the city over 16 years old can vote. The results of all votes are binding on the government."
     show:
       already_voted_in_booth: "You have already participated in a booth for this poll."
-      dates_title: "Participation dates"
+      back: Back to voting
       cant_answer_not_logged_in: "You must %{signin} or %{signup} to participate."
       signin: Sign in
       signup: Sign up
@@ -490,6 +490,9 @@ en:
       verify_link: "verify your account"
       cant_answer_incoming: "This poll has not yet started."
       cant_answer_expired: "This poll has finished."
+      more_info_title: "More information"
+      documents: Documents
+      zoom_plus: Expand image
   poll_questions:
     create_question: "Create question"
     default_valid_answers: "Yes, No"
@@ -598,6 +601,10 @@ en:
       budget: Participatory budget
       searcher: Searcher
     go_to_page: "Go to page of "
+    share: Share
+    orbit:
+      previous_slide: Previous Slide
+      next_slide: Next Slide
   social:
     blog: "%{org} Blog"
     facebook: "%{org} Facebook"

config/locales/es/general.yml

@@ -482,7 +482,7 @@ es:
         help_text_2: "Para participar en la próxima votación tienes que registrarte en %{org} y verificar tu cuenta. Pueden votar todas las personas empadronadas en la ciudad mayores de 16 años. Los resultados de todas las votaciones serán vinculantes para el gobierno."
     show:
       already_voted_in_booth: "Ya has participado en esta votación en una urna."
-      dates_title: "Fechas de participación"
+      back: Volver a votaciones
       cant_answer_not_logged_in: "Necesitas %{signin} o %{signup} para participar."
       signin: iniciar sesión
       signup: registrarte
@@ -490,6 +490,9 @@ es:
       verify_link: "verifica tu cuenta"
       cant_answer_incoming: "Esta votación todavía no ha comenzado."
       cant_answer_expired: "Esta votación ha terminado."
+      more_info_title: "Más información"
+      documents: Documentación
+      zoom_plus: Ampliar imagen
   poll_questions:
     create_question: "Crear pregunta para votación"
     default_valid_answers: "Sí, No"
@@ -598,6 +601,10 @@ es:
       budget: Presupuestos participativos
       searcher: Buscador
     go_to_page: "Ir a la página de "
+    share: Compartir
+    orbit:
+      previous_slide: Imagen anterior
+      next_slide: Siguiente imagen
   social:
     blog: "Blog de %{org}"
     facebook: "Facebook de %{org}"