First attempt at properly formatting the resource show page

1 files changed, 44 insertions, 12 deletions

diff --git a/app/views/pdfresources/show.html.erb b/app/views/pdfresources/show.html.erb
index 3c4fe66..a4e1d04 100644
--- a/app/views/pdfresources/show.html.erb
+++ b/app/views/pdfresources/show.html.erb
@@ -1,15 +1,47 @@
-<div class="mx-auto md:w-2/3 w-full flex">
-  <div class="mx-auto">
-    <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-    <% end %>
-
-    <%= render @pdfresource %>
-
-    <%= link_to "Edit this pdfresource", edit_pdfresource_path(@pdfresource), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%= link_to "Back to pdfresources", pdfresources_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <div class="inline-block ml-2">
-      <%= button_to "Destroy this pdfresource", @pdfresource, method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+<div class="container mx-auto px-4 py-8">
+  <div class="flex flex-col lg:flex-row gap-8">
+    <%# Left side - Main thumbnail %>
+    <div class="lg:w-1/2">
+      <%= image_tag @pdfresource.thumbnails.first, 
+          class: "w-full rounded-lg shadow-lg", 
+          alt: @pdfresource.name %>
+    </div>
+
+    <%# Right side - Product details %>
+    <div class="lg:w-1/2">
+      <h1 class="text-3xl font-bold mb-4"><%= @pdfresource.name %></h1>
+      
+      <div class="mb-4">
+        <span class="text-gray-600">Maths</span>
+        <span class="float-right text-gray-600">Year 1 (5-6yrs)</span>
+      </div>
+      
+      <div class="mb-4">
+        <p class="text-gray-600">Contains <%= @pdfresource.pdfs.count %> PDF file<%= 's' if @pdfresource.pdfs.count != 1 %>.</p>
+      </div>
+
+      <div class="text-2xl font-bold mb-6">
+        £<%= number_with_precision(@pdfresource.price || 0.00, precision: 2) %> 
+      </div>
+
+      <div class="mb-8">
+        <h2 class="text-xl font-semibold mb-2">Product summary</h2>
+        <p class="text-gray-700"><%= @pdfresource.description %></p>
+      </div>
+
+      <%= button_to "Add to basket", '#', 
+          class: "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg" %>
+    </div>
+  </div>
+
+  <%# Bottom thumbnails gallery %>
+  <div class="mt-8">
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+      <% @pdfresource.pdf_snapshots.each do |snapshot| %>
+        <%= image_tag snapshot, 
+            class: "w-full rounded-lg shadow cursor-pointer hover:opacity-75 transition-opacity",
+            alt: "PDF preview" %>
+      <% end %>
     </div>
   </div>
 </div>