Merge pull request #2015 from consul/polls-design

Polls design

app/assets/stylesheets/participation.scss

@@ -1615,6 +1615,10 @@
 
 .orbit-slide {
   max-height: none !important;
+
+  img {
+    image-rendering: pixelated;
+  }
 }
 
 .orbit-caption {
@@ -1622,6 +1626,11 @@
   color: $text;
 }
 
+.orbit-next,
+.orbit-previous {
+  background: rgba(34, 34, 34, 0.25);
+}
+
 .zoom-link {
   background: #fff;
   border-radius: rem-calc(48);
@@ -1654,7 +1663,10 @@
 .poll {
 
   &.with-image {
-    padding: 0 $line-height / 2 0 0;
+
+    @include breakpoint(medium) {
+      padding: 0 $line-height / 2 0 0;
+    }
 
     img {
       height: 100%;

app/views/polls/_gallery.html.erb

@@ -1,5 +1,5 @@
 <div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false">
-  <a data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link show-for-medium-up">
+  <a data-toggle="answer_<%= answer.id %> zoom_<%= answer.id %>" class="zoom-link hide-for-small-only">
     <span id="zoom_<%= answer.id %>" class="icon-search-plus" data-toggler="icon-search-plus icon-search-minus"></span>
     <span class="show-for-sr"><%= t("polls.show.zoom_plus") %></span>
   </a>

app/views/polls/_poll_group.html.erb

@@ -5,7 +5,7 @@
         <span class="show-for-sr"><%= t("polls.index.already_answer") %></span>
       </div>
     <% end %>
-    <div class="row" data-equalizer>
+    <div class="row" data-equalizer data-equalize-on="medium">
       <div class="small-12 medium-3 column">
         <div class="image-container" data-equalizer-watch>
           <% if poll.image.present? %>