Zoom background on perma

app/assets/images/picture-zoom.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.7 11.3c-.9 0-1.6.7-1.6 1.6s.7 1.6 1.6 1.6 1.6-.7 1.6-1.6-.7-1.6-1.6-1.6z" fill="none"/><path d="m10.4 19.8 2.7-4 3.1 5.1h-6.5c0-.1.7-1.1.7-1.1zm-2.8-2.1 1.2 1.7-1 1.5h-2.6z" fill="none"/><path d="m19.2 12.1v9.9s0 .2-.1.2c0 0-.1 0-.3 0h-16.8v-13.7c0-.2 0-.4.4-.4h7.2c-.2-.6-.4-1.2-.4-1.8h-7.8c-.7.2-1.2.7-1.3 1.3v.5 14c0 1 .8 1.8 1.8 1.8h17.9c.7-.2 1.2-.7 1.3-1.3 0-.1 0-.3 0-.5v-8.2l-1.9-1.9s0 0 0 0z"/><path d="m10.2 9.5h-5.4c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s.7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s1 .3 1.3.7l3.1 5v-7.3c-.4 0-.8.1-1.2.1-2.5 0-4.7-1.3-5.9-3.3zm-3.5 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m8.8 19.4-1.2-1.7-2.4 3.2h2.6z"/><path d="m16.2 20.9-3.1-5.1-2.7 4-.7 1 .1.1z"/><path d="m23.7 12.2-3-3c1.9-2.5 1.3-6.1-1.2-8s-6.1-1.3-8 1.2-1.3 6.1 1.2 8c2 1.5 4.7 1.5 6.7 0l3 3c.3.3.9.3 1.2 0s.3-.9 0-1.2zm-7.6-2.5c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9s-1.8 3.9-3.9 3.9z"/><path d="m17.9 5.1h-1.1v-1.1c0-.4-.3-.7-.7-.7s-.7.3-.7.7v1.1h-1.1c-.4 0-.7.3-.7.7s.3.7.7.7 1.1 0 1.1 0v1.1c0 .4.3.7.7.7s.7-.3.7-.7v-1.1h1.1c.4 0 .7-.3.7-.7s-.3-.7-.7-.7z"/></svg>

app/assets/stylesheets/card-columns.css

@@ -86,7 +86,7 @@
     .card__background {
       .card:has(& img:not([src=""])) {
         .card__body,
-        .card__footer,
+        .card__meta,
         .workflow-stage:not(.workflow-stage--current) {
           opacity: 0;
           transition: opacity 0.2s ease-in-out;

app/assets/stylesheets/icons.css

@@ -55,6 +55,7 @@
   .icon--picture-add { --svg: url("picture-add.svg "); }
   .icon--picture-double { --svg: url("picture-double.svg "); }
   .icon--picture-remove { --svg: url("picture-remove.svg "); }
+  .icon--picture-zoom { --svg: url("picture-zoom.svg "); }
   .icon--pinned { --svg: url("pinned.svg "); }
   .icon--qr-code { --svg: url("qr-code.svg "); }
   .icon--reaction { --svg: url("reaction.svg "); }

app/views/cards/_container.html.erb

@@ -21,9 +21,8 @@
 
       <footer class="card__footer full-width flex align-start gap">
         <%= render "cards/display/perma/meta", card: card %>
+        <%= render "cards/display/perma/background", card: card %>
       </footer>
-
-      <%= render "cards/display/common/background", card: card %>
     <% end %>
   </div>
 

app/views/cards/display/_preview.html.erb

@@ -25,10 +25,9 @@
 
     <footer class="card__footer">
       <%= render "cards/display/preview/meta", card: card %>
+      <%= render "cards/display/common/background", card: card %>
     </footer>
 
-    <%= render "cards/display/common/background", card: card %>
-
     <% if card.entropic? %>
       <%= render "cards/display/preview/bubble", card: card %>
     <% end %>

app/views/cards/display/common/_background.html.erb

@@ -2,6 +2,8 @@
   <div class="card__background">
     <%= image_tag card.image.presence || "", size: 120, data: { upload_preview_target: "image" } %>
   </div>
+
+  <%= yield %>
 <% end %>
 
 <% if card.closed? %>

app/views/cards/display/perma/_background.html.erb

@@ -0,0 +1,7 @@
+<%= render "cards/display/common/background", card: card do %>
+  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end", data: { action: "lightbox#open:prevent", lightbox_target: "image" } do %>
+    <%= icon_tag "picture-zoom" %>
+    <span class="for-screen-reader">Zoom background image</span>
+  <% end %>
+<% end %>
+