From f1f00257efa6602fa4b6ce56fb81a37ba5fbc674 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Fri, 16 Feb 2024 12:36:59 +0000
Subject: [PATCH] FEATURE: Added modal for product photos

---
 static/css/alerts.css   |  4 ++--
 static/css/products.css |  6 ++++++
 templates/product.html  | 24 +++++++++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/static/css/alerts.css b/static/css/alerts.css
index 376567a..5cda052 100644
--- a/static/css/alerts.css
+++ b/static/css/alerts.css
@@ -115,8 +115,8 @@
     right: 0;
     bottom: 0;
     left: 0;
-    width: 25rem;
-    height: 10rem;
+    width: fit-content;
+    height: fit-content;
     margin: auto;
     overflow: auto;
     background: var(--bg);
diff --git a/static/css/products.css b/static/css/products.css
index 8ad60de..f65c25b 100644
--- a/static/css/products.css
+++ b/static/css/products.css
@@ -82,6 +82,12 @@
     max-width: 500px;
 }
 
+
+.product-image-full {
+    height: min-content;
+    max-width: 800px;
+}
+
 .product-title {
     font-size: 120%;
     font-weight: bold;
diff --git a/templates/product.html b/templates/product.html
index 01bef92..b0dfb8e 100644
--- a/templates/product.html
+++ b/templates/product.html
@@ -5,7 +5,10 @@
     {% if user.id == product.sellerID or user.role == "Admin" %}
         <!-- Form -->
         <form class="product-fs" method="POST" action="{{ url_for('main.seller.update', id=product.id) }}" enctype="multipart/form-data">
-            <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Brake Disks"/>
+            
+            <label for="productModal">
+                <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
+            </label>
             <div class="product-details">
                 <div class="form-row">
                     <input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required>
@@ -75,7 +78,7 @@
             </div>
         </form>
         
-        <!-- Modal -->
+        <!-- Delete Modal -->
         <input class="modal-state" id="deleteModal" type="checkbox" />
         <div class="modal">
             <label class="modal__bg" for="deleteModal"></label>
@@ -92,7 +95,9 @@
         </div>
     {% else %}
         <div class="product-fs">
-            <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Brake Disks"/>
+            <label for="productModal">
+                <img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
+            </label>
             <div class="product-details">
                 <div class="product-title">{{product.name}}</div>
                 <div class="product-description">{{product.description}}</div>
@@ -113,6 +118,19 @@
             </div>
         </div>
     {% endif %}
+
+
+    
+    <!-- Product Modal -->
+    <input class="modal-state" id="productModal" type="checkbox" />
+    <div class="modal">
+        <label class="modal__bg" for="productModal"></label>
+        <div class="modal__inner">
+            <label class="modal__close" for="productModal"></label>
+            <h2>{{product.name}}</h2>
+            <img class="product-image-full" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
+        </div>
+    </div>
 {% endif %}
 
     
\ No newline at end of file