From 8702aa86a533c22d0f8e861c53e75447f273f9b2 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Fri, 5 Jan 2024 21:40:32 +0000
Subject: [PATCH] Moved alerts to the bottom middle of every page

---
 controllers/web/product.py | 16 ++++++++++--
 static/css/alerts.css      | 50 ++++++++++++++++++++------------------
 templates/header.html      | 30 +++++++++++++++++------
 templates/index.html       |  2 +-
 templates/login.html       | 15 +-----------
 5 files changed, 64 insertions(+), 49 deletions(-)

diff --git a/controllers/web/product.py b/controllers/web/product.py
index 3b1f092..9bbac36 100644
--- a/controllers/web/product.py
+++ b/controllers/web/product.py
@@ -1,10 +1,11 @@
 from flask import Blueprint
 
-from flask import render_template, redirect, request, session, flash
+from flask import render_template, request, session, flash
 from controllers.database.product import ProductController
 
 blueprint = Blueprint("products", __name__, url_prefix="/products")
 
+# Loads the front product page
 @blueprint.route('/')
 def index():
     database = ProductController()
@@ -14,4 +15,15 @@ def index():
     if products == None:
         flash("No Products available")
     
-    return render_template('index.html', content="content.html", user = session.get('user'), products = products)
\ No newline at end of file
+    return render_template('index.html', content="content.html", user = session.get('user'), products = products)
+
+# Loads a given product category page
+@blueprint.route('/<string:category>')
+def category(category: str):
+    return "Category: " + category
+
+# Loads a given product based on ID
+@blueprint.route('/<int:id>')
+def id(id: int):
+    return "ID: " + str(id)
+
diff --git a/static/css/alerts.css b/static/css/alerts.css
index fdafd3a..548acc7 100644
--- a/static/css/alerts.css
+++ b/static/css/alerts.css
@@ -1,7 +1,9 @@
 .alert {
-    position: relative;
-    top: 10;
-    left: 0;
+    position: fixed;
+    bottom: 3em;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 1;
     width: auto;
     height: auto;
     padding: 10px;
@@ -12,59 +14,59 @@
     cursor: pointer;
     font-family: sans-serif;
     font-weight: 400;
-  }
+}
   
-  .alertCheckbox {
+.alertCheckbox {
     display: none;
-  }
+}
   
-  :checked + .alert {
+:checked + .alert {
     display: none;
-  }
+}
   
-  .alertText {
+.alertText {
     display: table;
     margin: 0 auto;
     text-align: center;
     font-size: 16px;
-  }
+}
   
-  .alertClose {
+.alertClose {
     float: right;
     padding-top: 5px;
     font-size: 10px;
-  }
+}
   
-  .clear {
+.clear {
     clear: both;
-  }
+}
   
-  .info {
+.info {
     background-color: #EEE;
     border: 1px solid #DDD;
     color: #999;
-  }
+}
   
-  .success {
+.success {
     background-color: #EFE;
     border: 1px solid #DED;
     color: #9A9;
-  }
+}
   
-  .notice {
+.notice {
     background-color: #EFF;
     border: 1px solid #DEE;
     color: #9AA;
-  }
+}
   
-  .warning {
+.warning {
     background-color: #FDF7DF;
     border: 1px solid #FEEC6F;
     color: #C9971C;
-  }
+}
   
-  .error {
+.error {
     background-color: #FEE;
     border: 1px solid #EDD;
     color: #A66;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
index f46f743..5826d71 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -14,13 +14,27 @@
         
     <centre>
         <div class="categories">
-            <a href="CarParts" class="category">Car Parts</a>
-            <a href="Animals" class="category">Animals</a>
-            <a href="Sports" class="category">Sports</a>
-            <a href="Books" class="category">Books</a>
-            <a href="Phones" class="category">Phones</a>
-            <a href="Music" class="category">Music</a>
+            <a href="/products/CarParts" class="category">Car Parts</a>
+            <a href="/products/Animals" class="category">Animals</a>
+            <a href="/products/Sports" class="category">Sports</a>
+            <a href="/products/Books" class="category">Books</a>
+            <a href="/products/Phones" class="category">Phones</a>
+            <a href="/products/Music" class="category">Music</a>
         </div>
-    </centre>
+    </centre>    
+</div>
 
-</div>
\ No newline at end of file
+{% with messages = get_flashed_messages()%}
+    {% if messages %}
+        {% for message in messages %}
+            <label>
+                <input type="checkbox" class="alertCheckbox" autocomplete="off" />
+                <div class="alert error">
+                    <span class="alertClose">X</span>
+                    <span class="alertText">{{message}}
+                        <br class="clear"/></span>
+                </div>
+            </label>
+        {% endfor%}
+    {% endif %}
+{% endwith %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 3bd24bd..81f990e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,7 +11,7 @@
 </head>
 <body>
     {% include 'header.html' %}
-    <div class="container container-fixed">
+    <div class="container">
         {% include content %}
     </div>
 </body>
diff --git a/templates/login.html b/templates/login.html
index 0ccfd74..30e3137 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,20 +5,7 @@
         <input type="password" id="password" name="password" placeholder="Password" required>
         <input type="submit" id="login" value="Login">
     </form>
-    {% with messages = get_flashed_messages()%}
-        {% if messages %}
-            {% for message in messages %}
-                <label>
-                    <input type="checkbox" class="alertCheckbox" autocomplete="off" />
-                    <div class="alert error">
-                        <span class="alertClose">X</span>
-                        <span class="alertText">{{message}}
-                            <br class="clear"/></span>
-                    </div>
-                </label>
-            {% endfor%}
-        {% endif %}
-    {% endwith %}
+    
     <div id="create-account-wrap">
         <p>Not a member? <a href="signup">Create Account</a><p>
     </div>