From c55fdde3fc59e04f95d5071f19bd7efdbb51210c Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Thu, 8 Feb 2024 20:38:35 +0000
Subject: [PATCH] Massively improved styling of product pages

---
 static/css/style.css   | 11 +++++------
 templates/content.html | 11 +++++++----
 templates/header.html  | 38 ++++++++++++++++++--------------------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index c4dfde2..c3087eb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -20,24 +20,24 @@ html {
     background-color: var(--bg);
     color: var(--fg);
     font-size: 160%;
-    font-family: 'Courier New', Courier, 'Inter';
+    font-weight: lighter;
+    font-family: 'InterVariable', 'Courier New', Courier, 'Inter';
     height: 100%;
 }
 
 body {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
     margin: 0;
     height: 100%;
 }
 
 .navbar {
     flex: 0 1 auto;
-    padding: 30px;
+    padding: 5px 30px;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: .3rem;
 }
 
 /* Navbar styling*/
@@ -163,7 +163,7 @@ a:active {
 }
 
 .category {
-    margin: .5rem 0rem;
+    margin: 0;
     padding: 0rem 1rem;
     border-left: .125rem solid var(--fg);
 }
@@ -178,7 +178,6 @@ a:active {
     justify-content: flex-start;
     align-items: center;
     width: 100%;
-    gap: 1rem;
     flex-direction: column;
     flex-grow: 1;
     height: 1%;
diff --git a/templates/content.html b/templates/content.html
index d6a5525..f44003c 100644
--- a/templates/content.html
+++ b/templates/content.html
@@ -1,7 +1,8 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
 
-<div class="product-container">
-    {% if products != None %}
+{% if products != None %}
+    <p>Showing results for {{products|count}} products</p>
+    <div class="product-container">
         {% for product in products %}
             <a href="/products/{{product.id}}" class="product product-link">
                 <div class="product-title">{{product.name}}</div>
@@ -16,5 +17,7 @@
                 <input type="submit" class="product-add-to-cart" value="Add to Cart" />
             </a>
         {% endfor %}
-    {% endif %}
-</div>
+    </div>
+{% else %}
+    <p>Sorry... We have nothing to show here!</p>
+{% endif %}
diff --git a/templates/header.html b/templates/header.html
index 9f52b79..c1576bd 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -14,28 +14,26 @@
             {% endif %}
         </div>
     </nav>
-    
-    <centre>
-        {% if user != None and user.role == "Seller" %}
-            <div class="categories">
-                {# List all available seller tools #}
-                <a href="{{url_for('main.products.display_add_product')}}" class="category">Create Products</a>
-                <a href="{{url_for('main.products.display_own_products')}}" class="category">View My Products</a>
-                <a href="{{url_for('main.stats.index')}}" class="category">View Seller Stats</a>
-            </div>
-        {% endif %}
-    
+
+    {% if user != None and user.role == "Seller" %}
         <div class="categories">
-            {# List all categories and ensure the selected one is highlighted #}
-            {% for c in categories %}
-                {% if category == c.name %}
-                    <a style="color: cyan" href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
-                {% else %}
-                    <a href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
-                {% endif %}
-            {% endfor %}
+            {# List all available seller tools #}
+            <a href="{{url_for('main.products.display_add_product')}}" class="category">Create Products</a>
+            <a href="{{url_for('main.products.display_own_products')}}" class="category">View My Products</a>
+            <a href="{{url_for('main.stats.index')}}" class="category">View Seller Stats</a>
         </div>
-    </centre>    
+    {% endif %}
+
+    <div class="categories">
+        {# List all categories and ensure the selected one is highlighted #}
+        {% for c in categories %}
+            {% if category == c.name %}
+                <a style="color: cyan" href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
+            {% else %}
+                <a href="{{url_for('main.products.category', category=c.name)}}" class="category">{{c.name}}</a>
+            {% endif %}
+        {% endfor %}
+    </div>   
 </div>
 
 {% with messages = get_flashed_messages(with_categories=true)%}