Create dedicate templates for card previews

To remove links and customize as we need to
2025-06-10 10:17:19 +02:00
parent 265124cc7d
commit e5f7d252fe
8 changed files with 103 additions and 5 deletions
@@ -94,6 +94,11 @@
    white-space: normal;
  }

+  /* Mouse pointer */
+  .non-clickable {
+    cursor: default;
+  }
+
  /* Padding */
  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-double { padding: var(--block-space-double) var(--inline-space-double); }
@@ -12,8 +12,16 @@ module AvatarsHelper

  def avatar_tag(user, hidden_for_screen_reader: false, **options)
    link_to user_path(user), class: "btn avatar", data: { turbo_frame: "_top" },
-        aria: { hidden: hidden_for_screen_reader, label: user.name },
-        tabindex: hidden_for_screen_reader ? -1 : nil do
+      aria: { hidden: hidden_for_screen_reader, label: user.name },
+      tabindex: hidden_for_screen_reader ? -1 : nil do
+      avatar_image_tag(user, **options)
+    end
+  end
+
+  def avatar_preview_tag(user, hidden_for_screen_reader: false, **options)
+    tag.span class: "avatar",
+      aria: { hidden: hidden_for_screen_reader, label: user.name },
+      tabindex: hidden_for_screen_reader ? -1 : nil do
      avatar_image_tag(user, **options)
    end
  end
@@ -0,0 +1,39 @@
+<% cache cacheable_preview_parts_for(card) do %>
+  <%= card_article_tag card, class: "card" do %>
+    <div class="flex gap">
+      <div class="flex flex-column flex-item-grow">
+        <header class="card__header">
+
+          <div class="card__collection flex align-start">
+            <span class="card__id"><%= card.id %></span>
+            <span class="card__collection-name overflow-ellipsis"><%= card.collection.name %></span>
+          </div>
+
+          <%= render "cards/display/preview/tags", card: card %>
+        </header>
+
+        <div class="card__body justify-space-between">
+          <div class="card__content">
+            <h1 class="card__title overflow-line-clamp">
+              <%= card.title %>
+            </h1>
+
+            <span class="for-screen-reader"><%= card.title %></span>
+          </div>
+        </div>
+      </div>
+
+      <%= render "cards/display/public_preview/stages", card: card if card.doing? %>
+    </div>
+
+    <footer class="card__footer">
+      <%= render "cards/display/public_preview/meta", card: card %>
+    </footer>
+
+    <%= render "cards/display/common/background", card: card %>
+
+    <% if card.entropic? %>
+      <%= render "cards/display/preview/bubble", card: card %>
+    <% end %>
+  <% end %>
+<% end %>
@@ -0,0 +1,38 @@
+<div class="card__meta" id="<%= dom_id(card, :meta) %>">
+  <%= avatar_preview_tag card.creator %>
+
+  <div class="card__meta-grid">
+    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
+      Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
+      <% if card.drafted? %>
+        <strong>(Draft)</strong>
+      <% end %>
+    </span>
+    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
+      Updated
+      <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
+    </span>
+    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
+      By <strong><%= card.creator.familiar_name %></strong>
+    </span>
+    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
+      <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
+      <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
+    </span>
+  </div>
+
+  <div class="margin-inline-start flex-item-no-shrink">
+    <div class="flex" id="<%= dom_id(card, :assignees) %>">
+      <% card.assignees.each do |assignee| %>
+        <%= avatar_preview_tag assignee, class: "avatar" %>
+      <% end %>
+
+      <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+        <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+          <%= icon_tag "person-add" %>
+          <span class="for-screen-reader">Assign</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,8 @@
+<% if workflow = card.collection.workflow %>
+  <div id="<%= dom_id(card, :stages) %>" class="card__stages">
+    <% workflow.stages.each do |stage| %>
+      <%= tag.div stage.name,
+                class: ["overflow-ellipsis flex align-center gap-half btn non-clickable justify-start workflow-stage txt-uppercase no-hover", { "workflow-stage--current": stage == card.stage }] %>
+    <% end %>
+  </div>
+<% end %>
@@ -1,6 +1,6 @@
 <section id="closed-cards" class="cards cards--closed">
  <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: true %>

    <% unless page.last? %>
      <%= public_collection_cards_next_page_link collection, "closed-cards", fetch_on_visible: true, page: page %>
@@ -4,7 +4,7 @@
  </h2>

  <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: true %>

    <% unless page.last? %>
      <%= public_collection_cards_next_page_link collection, "considering-cards", page: page %>
@@ -4,7 +4,7 @@
  </h2>

  <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: ->(card) { cacheable_preview_parts_for(card) } %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: ->(card) { cacheable_preview_parts_for(card) } %>

    <% unless page.last? %>
      <%= public_collection_cards_next_page_link collection, "doing-cards", page: page %>