From 9292aae8fe1876fe98c90ae0216fb4ea8917b38a Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Thu, 14 Nov 2024 17:00:19 +0000
Subject: Tidied up the cards on the index page

---
 app/views/pdfresources/_form.html.erb        |  15 +---
 app/views/pdfresources/_pdfresource.html.erb | 101 ++++++++-------------------
 2 files changed, 33 insertions(+), 83 deletions(-)

diff --git a/app/views/pdfresources/_form.html.erb b/app/views/pdfresources/_form.html.erb
index a3922c9..f75f20d 100644
--- a/app/views/pdfresources/_form.html.erb
+++ b/app/views/pdfresources/_form.html.erb
@@ -80,7 +80,7 @@
 
   <div class="my-5">
     <%= form.label :price, class: "font-bold" %>
-    <%= form.number_field :price, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.number_field :price, step: "0.01", min: "0", class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
     <p class="text-sm text-gray-700">This is what we will sell it for!</p>
   </div>
 
@@ -111,17 +111,8 @@
   </div>
 
   <div class="my-5">
-    <%= form.label :feature_slot, "Feature Position", class: "font-bold" %>
-    <%= form.select :feature_slot,
-                   options_for_select([
-                     ["Not Featured", nil],
-                     ["Position 1", 1],
-                     ["Position 2", 2],
-                     ["Position 3", 3]
-                   ], pdfresource.feature_slot),
-                   { include_blank: false },
-                   class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-    <p class="text-sm text-gray-700">Select a position to feature this resource, or "Not Featured" to remove from featured items. Only three resources can be featured at a time.</p>
+    <%= form.label :feature_slot, class: "font-bold" %>
+    <%= form.number_field :feature_slot, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="flex gap-4 mt-8">
diff --git a/app/views/pdfresources/_pdfresource.html.erb b/app/views/pdfresources/_pdfresource.html.erb
index 7ce1807..5edbd35 100644
--- a/app/views/pdfresources/_pdfresource.html.erb
+++ b/app/views/pdfresources/_pdfresource.html.erb
@@ -1,76 +1,35 @@
-<div id="<%= dom_id pdfresource %>" class="h-full rounded overflow-hidden shadow-lg border p-5">
-
-  <div class="aspect-w-16 aspect-h-9 mb-4">
-    <%= image_tag url_for(pdfresource.thumbnails.first), class: "w-full h-full object-cover rounded-t-lg" %>
-  </div>
-
-  <p class="my-5">
-    <%= link_to pdfresource.name, pdfresource, class: "text-blue-500 font-bold" %>
-  </p>
-
-  <div class="px-6 pt-4 pb-2">
-    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
-    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
-    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
-  </div>
-
-  <p class="my-5 text-gray-500 text-base">
-    <%= pdfresource.card_description %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Stripe product:</strong>
-    <%= pdfresource.stripe_product_id %>
-  </p>
-
-  <div class="my-5">
-    <strong class="block font-medium mb-1">PDFs:</strong>
-    <% pdfresource.pdfs.each do |pdf| %>
-      <div><%= link_to pdf.filename, pdf %></div>
-    <% end %>
+<div id="<%= dom_id pdfresource %>" class="h-full rounded-lg overflow-hidden shadow-lg border">
+  <%# Image section %>
+  <div class="aspect-w-16 aspect-h-9">
+    <%= image_tag url_for(pdfresource.thumbnails.first), class: "w-full h-full object-cover" %>
   </div>
 
-  <div class="my-5">
-    <strong class="block font-medium mb-1">Snapshots:</strong>
-    <% pdfresource.pdf_snapshots.each do |image| %>
-      <div>
-        <%= image_tag url_for(image) %>
-        <%= link_to image.filename, image %>
+  <%# Content section %>
+  <div class="p-4">
+    <%# Title %>
+    <h2 class="text-xl font-semibold mb-2">
+      <%= link_to pdfresource.name, pdfresource %>
+    </h2>
+
+    <%# Tags/badges %>
+    <div class="flex gap-2 mb-3">
+      <span class="px-2 py-1 bg-gray-200 text-sm rounded">Reception (4-5yrs)</span>
+      <span class="px-2 py-1 bg-blue-500 text-white text-sm rounded">EYs Maths</span>
+      <span class="px-2 py-1 bg-purple-500 text-white text-sm rounded">Feature slot: <%= pdfresource.feature_slot %></span>
+    </div>
+
+    <%# Description %>
+    <p class="text-gray-600 mb-4">
+      <%= pdfresource.card_description %>
+    </p>
+
+    <%# Footer with price and add to cart %>
+    <div class="flex items-center justify-between mt-auto">
+      <div class="flex gap-4 text-gray-600 font-bold">
+        <span>£<%= number_with_precision(pdfresource.price, precision: 2) %></span>
+        <span class="border-l pl-4"><%= pdfresource.credits %> credits</span>
       </div>
-    <% end %>
+      <%= button_to "Add to basket", "#", class: "bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded" %>
+    </div>
   </div>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Resource type:</strong>
-    <%= pdfresource.resource_type&.name if pdfresource.respond_to?(:resource_type) %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Price:</strong>
-    <%= pdfresource.price %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Age range:</strong>
-    <%= pdfresource.age_range %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Curriculum:</strong>
-    <%= pdfresource.curriculum %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Feature slot:</strong>
-    <%= pdfresource.feature_slot %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= pdfresource.description %>
-  </p>
-
-  <p>
-    <%= link_to "Show this pdfresource", pdfresource, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  </p>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3