Moved alerts to the bottom middle of every page

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

View File

@ -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)
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)

View File

@ -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;
}
}

View File

@ -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>
{% 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 %}

View File

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

View File

@ -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>