From e5f71d33d0358ffa122dc757d01893acd18229a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 28 Jul 2020 19:34:44 +0200
Subject: [PATCH] Fix poll answer images not being displayed

After updating foundation-rails in commit 58071fd6, the orbit slider
stopped working properly. That's because the `.orbit-slide` elements now
use a `position: absolute` rule, and so our rule for `.orbit-container`
elements making their height 100% (which we added in order to be able to
add images with different heights) makes them have a height of 0px,
since now the `.orbit-slide` elements are not part of the document flow
anymore.

Making the `.orbit-slide` elements have relative position fixes this
issue, but introduces a different one, producing a really bad-looking
animation when changing a slide.

So we're disabling the animation as well in order to avoid this jump.

This change also fixes another issue introduced in commit 58071fd6 which
caused slide controls to stop working when changing slides back and
forth.
---
 app/assets/stylesheets/participation.scss |  1 +
 app/views/polls/_gallery.html.erb         |  2 +-
 spec/system/polls/polls_spec.rb           | 27 +++++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 8485b5468..94890e7dc 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1769,6 +1769,7 @@
 
 .orbit-slide {
   max-height: none !important;
+  position: relative;
 }
 
 .orbit-caption {
diff --git a/app/views/polls/_gallery.html.erb b/app/views/polls/_gallery.html.erb
index 9082e8901..1cfc4c116 100644
--- a/app/views/polls/_gallery.html.erb
+++ b/app/views/polls/_gallery.html.erb
@@ -1,4 +1,4 @@
-<div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false">
+<div class="orbit margin-bottom" role="region" aria-label="<%= answer.title %>" data-orbit data-auto-play="false" data-use-m-u-i="false">
   <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>
diff --git a/spec/system/polls/polls_spec.rb b/spec/system/polls/polls_spec.rb
index ed5da64d9..4dc0b8693 100644
--- a/spec/system/polls/polls_spec.rb
+++ b/spec/system/polls/polls_spec.rb
@@ -190,6 +190,33 @@ describe "Polls" do
       end
     end
 
+    scenario "Answer images are shown", :js do
+      question = create(:poll_question, :yes_no, poll: poll)
+      create(:image, imageable: question.question_answers.first, title: "The yes movement")
+
+      visit poll_path(poll)
+
+      expect(page).to have_css "img[alt='The yes movement']"
+    end
+
+    scenario "Buttons to slide through images work back and forth", :js do
+      question = create(:poll_question, :yes_no, poll: poll)
+      create(:image, imageable: question.question_answers.last, title: "The no movement")
+      create(:image, imageable: question.question_answers.last, title: "No movement planning")
+
+      visit poll_path(poll)
+
+      within(".orbit-bullets") do
+        find("[data-slide='1']").click
+
+        expect(page).to have_css ".is-active[data-slide='1']"
+
+        find("[data-slide='0']").click
+
+        expect(page).to have_css ".is-active[data-slide='0']"
+      end
+    end
+
     scenario "Non-logged in users" do
       create(:poll_question, :yes_no, poll: poll)