Files
fizzy/app/views/bubbles/list/_bubble.html.erb
T
2024-11-05 13:04:05 -06:00

34 lines
1.6 KiB
Plaintext

<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
<div class="bubble__shape"></div>
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>
<strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
<% end %>
<% if bubble.due_on.present? %>
<time class="txt-nowrap txt-small fill-black txt-reversed border-radius" style="background-color: <%= bubble.color %>; padding: 0.4em 1em;">
<strong>DUE:</strong> <%= bubble.due_on.strftime("%b %d") %>
</time>
<% end %>
<div class="flex align-center gap flex-item-no-shrink">
<% bubble.assignees.each do |assignee| %>
<span class="txt-small"><%= avatar_tag assignee, loading: :lazy %></span>
<% end %>
</div>
<small class="flex align-center gap flex-item-no-shrink">
<% bubble.tags.each do |tag| %>
<%= button_tag tag.hashtag, type: :button,
class: "btn btn--plain", style: "color: #{bubble.color}", data: {
controller: "query-merger", action: "query-merger#merge",
query_merger_key_param: "tag_ids", query_merger_value_param: tag.id } %>
<% end %>
<%= tag.time bubble.created_at, class: "txt-nowrap flex-item-justify-end" do %>
<%= bubble.created_at.strftime("%b %d") %>
<% end %>
</small>
</li>