luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved alerts to the bottom middle of every page

Browse Source
This commit is contained in:
Luke Else 2024-01-05 21:40:32 +00:00
parent 2cf3fc9fbf
commit 8702aa86a5
5 changed files with 64 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
controllers/web/product.py
View File

@ -1,10 +1,11 @@
from flask import Blueprint 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 from controllers.database.product import ProductController
blueprint = Blueprint("products", __name__, url_prefix="/products") blueprint = Blueprint("products", __name__, url_prefix="/products")
# Loads the front product page
@blueprint.route('/') @blueprint.route('/')
def index(): def index():
database = ProductController() database = ProductController()
@ -14,4 +15,15 @@ def index():
if products == None: if products == None:
flash("No Products available") flash("No Products available")
return render_template('index.html', content="content.html", user = session.get('user'), products = products) 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)

50
static/css/alerts.css
View File

@ -1,7 +1,9 @@
.alert { .alert {
position: relative; position: fixed;
top: 10; bottom: 3em;
left: 0; left: 50%;
transform: translate(-50%, 50%);
z-index: 1;
width: auto; width: auto;
height: auto; height: auto;
padding: 10px; padding: 10px;
@ -12,59 +14,59 @@
cursor: pointer; cursor: pointer;
font-family: sans-serif; font-family: sans-serif;
font-weight: 400; font-weight: 400;
} }
.alertCheckbox { .alertCheckbox {
display: none; display: none;
} }
:checked + .alert { :checked + .alert {
display: none; display: none;
} }
.alertText { .alertText {
display: table; display: table;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
} }
.alertClose { .alertClose {
float: right; float: right;
padding-top: 5px; padding-top: 5px;
font-size: 10px; font-size: 10px;
} }
.clear { .clear {
clear: both; clear: both;
} }
.info { .info {
background-color: #EEE; background-color: #EEE;
border: 1px solid #DDD; border: 1px solid #DDD;
color: #999; color: #999;
} }
.success { .success {
background-color: #EFE; background-color: #EFE;
border: 1px solid #DED; border: 1px solid #DED;
color: #9A9; color: #9A9;
} }
.notice { .notice {
background-color: #EFF; background-color: #EFF;
border: 1px solid #DEE; border: 1px solid #DEE;
color: #9AA; color: #9AA;
} }
.warning { .warning {
background-color: #FDF7DF; background-color: #FDF7DF;
border: 1px solid #FEEC6F; border: 1px solid #FEEC6F;
color: #C9971C; color: #C9971C;
} }
.error { .error {
background-color: #FEE; background-color: #FEE;
border: 1px solid #EDD; border: 1px solid #EDD;
color: #A66; color: #A66;
} }

30
templates/header.html
View File

@ -14,13 +14,27 @@
<centre> <centre>
<div class="categories"> <div class="categories">
<a href="CarParts" class="category">Car Parts</a> <a href="/products/CarParts" class="category">Car Parts</a>
<a href="Animals" class="category">Animals</a> <a href="/products/Animals" class="category">Animals</a>
<a href="Sports" class="category">Sports</a> <a href="/products/Sports" class="category">Sports</a>
<a href="Books" class="category">Books</a> <a href="/products/Books" class="category">Books</a>
<a href="Phones" class="category">Phones</a> <a href="/products/Phones" class="category">Phones</a>
<a href="Music" class="category">Music</a> <a href="/products/Music" class="category">Music</a>
</div> </div>
</centre> </centre>
</div>
</div> {% 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 %}

2
templates/index.html
View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
{% include 'header.html' %} {% include 'header.html' %}
<div class="container container-fixed"> <div class="container">
{% include content %} {% include content %}
</div> </div>
</body> </body>

15
templates/login.html
View File

@ -5,20 +5,7 @@
<input type="password" id="password" name="password" placeholder="Password" required> <input type="password" id="password" name="password" placeholder="Password" required>
<input type="submit" id="login" value="Login"> <input type="submit" id="login" value="Login">
</form> </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"> <div id="create-account-wrap">
<p>Not a member? <a href="signup">Create Account</a><p> <p>Not a member? <a href="signup">Create Account</a><p>
</div> </div>