Files
fizzy/app/views/splats/index.html.erb
T
2024-08-22 10:22:09 -05:00

52 lines
2.4 KiB
Plaintext

<% content_for :header do %>
<nav>
<%= button_to session_path, method: :delete, class: "btn", form_class: "flex-item-justify-start" do %>
<%= image_tag "logout.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Sign out</span>
<% end %>
<h1 class="txt-xx-large margin-none flex align-center gap-half">
Bubbled up
<% if @category %>
in <%= @category.title %>
<%= link_to splats_path, class: "btn txt-small" do %>
<%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Clear</span>
<% end %>
<% end %>
</h1>
<%= link_to new_splat_path, class: "btn btn--plain flex-item-justify-end" do %>
<%= image_tag "bubble-add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new splat</span>
<% end %>
</nav>
<% end %>
<section class="windshield flex-inline flex-wrap gap-half justify-center align-end">
<%= render @splats.last(10) %>
</section>
<section class="splats-list unpad-inline center margin-block-start">
<ul class="unpad margin-none flex flex-column txt-align-start center">
<% @splats.each do | splat | %>
<li class="flex align-center gap margin-none">
<div class="splat" style="--splat-color: <%= splat.color %>; --splat-size: 2cqi; <%= splat_rotation(splat) %>">
<svg class="splat__svg" style="fill: <%= splat.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
</div>
<%= link_to splat, class: "splat__title-link flex align-center gap flex-item-grow" do %>
<strong><%= splat.title %></strong>
<% end %>
<small class="flex align-center gap flex-item-no-shrink">
<% splat.categories.each do |category| %>
<%= link_to "# #{ category.title }", splats_path(category_id: category.id), style: "color: #{ splat.color }" %>
<% end %>
<time class="txt-nowrap flex-item-justify-end"><%= splat.created_at.strftime("%b %d").html_safe %></time>
</small>
</li>
<% end %>
</ul>
</section>