Jason Zimdars
50 lines
1.9 KiB
Plaintext
50 lines
1.9 KiB
Plaintext
<% @page_title = @filter.plain_summary %>
|
|
|
|
<% content_for :header do %>
|
|
<nav class="align-start">
|
|
<%= link_to root_path, class: "btn flex-item-justify-start" do %>
|
|
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Go back</span>
|
|
<% end %>
|
|
|
|
<header class="txt-align-center">
|
|
<%= render "bubbles/filters", filter: @filter %>
|
|
</header>
|
|
|
|
<% if @filter.buckets.any? %>
|
|
<%= button_to bucket_bubbles_path(@filter.buckets.first), method: :post, class: "btn", form_class: "flex-item-justify-end" do %>
|
|
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
|
|
<span class="for-screen-reader">Create a new bubble</span>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="btn btn--placeholder flex-item-justify-end"></span>
|
|
<% end %>
|
|
</nav>
|
|
<% end %>
|
|
|
|
<section class="windshield flex-inline flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= params[:filter_id] %>">
|
|
<% if @bubbles.any? %>
|
|
<%= render partial: "bubbles/bubble", collection: @bubbles.limit(10), cached: true %>
|
|
<% else %>
|
|
<p><strong>Nothing here.</strong></p>
|
|
<% end %>
|
|
</section>
|
|
|
|
<section class="bubbles-list unpad-inline center margin-block-start">
|
|
<ul class="unpad margin-none flex flex-column txt-align-start center">
|
|
<li class="bubbles-list__divider flex align-center gap-half full-width">
|
|
<button class="bubbles-list__handle btn btn--reversed">
|
|
<%= image_tag "drag.svg", aria: { hidden: true }, size: 16 %>
|
|
<span class="for-screen-reader">Drag to change number of bubbles shown above</span>
|
|
</button>
|
|
<hr class="separator--horizontal flex-item-grow">
|
|
<strong class="bubbles-list__count border-radius">
|
|
Top 10
|
|
</strong>
|
|
<hr class="separator--horizontal flex-item-grow">
|
|
<span></span>
|
|
</li>
|
|
<%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
|
|
</ul>
|
|
</section>
|