Improve image table design (#367)

rubyforgood · Dec 11, 2023 · 9af0386 · 9af0386
1 parent bb694a2
commit 9af0386
Showing 1 changed file with 31 additions and 22 deletions.
diff --git a/app/views/components/_image_attachment_table.html.erb b/app/views/components/_image_attachment_table.html.erb
@@ -3,34 +3,43 @@
   <div class="table-responsive overflow-y-hidden">
     <table class="table mb-0 text-nowrap table-hover table-centered">
       <thead>
-      <tr>
-        <th scope="col"></th>
-        <th scope="col"></th>
-      </tr>
+        <tr>
+          <th scope="col">Image</th>
+          <th scope="col">Filename</th>
+          <th scope="col"></th>
+        </tr>
       </thead>
       <tbody>
-      <% if @pet.images.attached? %>
-        <% @pet.images.each do |image| %>
-          <tr>
-            <td>
-              <div class="d-flex align-items-center">
-                <div class="icon-shape icon-xxxl rounded-3 d-flex flex-column">
-                  <%= image_tag image, class: 'card-img' %>
-                  <%= image.filename %>
+        <% if @pet.images.attached? %>
+          <% @pet.images.each do |image| %>
+            <tr>
+              <td>
+                <div class="d-flex align-items-center">
+                  <div class="icon-shape img-4by3-lg rounded-3">
+                    <%= link_to(image_tag(image, class: 'card-img'), rails_blob_path(image, disposition: 'attachment')) %>
+                  </div>
                 </div>
-              </div>
-            </td>
-            <td>
-              <%= link_to t('general.delete'),
-                    purge_attachment_path(image.id),
-                    data: {
-                      turbo_confirm: "Do you want to delete this image?", 
-                      turbo_method: "delete" },
-                    class: 'btn btn-outline-danger' %>
+              </td>
+              <td>
+                <%= link_to image.filename.to_s, rails_blob_path(image, disposition: 'attachment') %>
+              </td>
+              <td>
+                <%= link_to t('general.delete'),
+                      purge_attachment_path(image.id),
+                      data: {
+                        turbo_confirm: "Do you want to delete this image?",
+                        turbo_method: "delete" },
+                      class: 'btn btn-outline-danger' %>
+              </td>
+            </tr>
+          <% end %>
+        <% else %>
+          <tr>
+            <td colspan="3">
+              No images attached.
             </td>
           </tr>
         <% end %>
-      <% end %>
       </tbody>
     </table>
   </div>