e5f71d33d0
After updating foundation-rails in commit58071fd6, 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 commit58071fd6which caused slide controls to stop working when changing slides back and forth.
40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
<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>
|
|
</a>
|
|
|
|
<ul class="orbit-container">
|
|
<li>
|
|
<button class="orbit-previous">
|
|
<span class="show-for-sr"><%= t("shared.orbit.previous_slide") %></span>◀︎
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="orbit-next">
|
|
<span class="show-for-sr"><%= t("shared.orbit.next_slide") %></span>▶︎
|
|
</button>
|
|
</li>
|
|
|
|
<% answer.images.reverse.each_with_index do |image, index| %>
|
|
<li class="orbit-slide <%= is_active_class(index) %>">
|
|
<%= link_to image.attachment.url(:original), target: "_blank" do %>
|
|
<%= image_tag image.attachment.url(:original),
|
|
class: "orbit-image",
|
|
alt: image.title.unicode_normalize %>
|
|
<% end %>
|
|
<span class="orbit-caption"><%= image.title.unicode_normalize %></span>
|
|
</li>
|
|
<% end %>
|
|
|
|
</ul>
|
|
|
|
<nav class="orbit-bullets">
|
|
<% answer.images.each_with_index do |image, index| %>
|
|
<button class="<%= is_active_class(index) %>" data-slide="<%= index %>">
|
|
<span class="show-for-sr"><%= image.title.unicode_normalize %></span>
|
|
</button>
|
|
<% end %>
|
|
</nav>
|
|
</div>
|