From 9ccdf5aa6a43f3cdbff3e5aff6e5c76d05828b23 Mon Sep 17 00:00:00 2001
From: b4-sharp <Bradley2.Sharp@live.uwe.ac.uk>
Date: Thu, 13 Apr 2023 05:02:40 +0100
Subject: [PATCH] Redo footer and header
---
store/forms.py | 5 +-
store/static/_main.css | 224 ------------------------------
store/templates/_formhelpers.html | 15 +-
store/templates/base.html | 121 ++++++++++------
4 files changed, 88 insertions(+), 277 deletions(-)
diff --git a/store/forms.py b/store/forms.py
index 7f088a7..2f2361f 100644
--- a/store/forms.py
+++ b/store/forms.py
@@ -6,6 +6,7 @@ from wtforms import (
SubmitField,
SelectField,
IntegerField,
+ SearchField,
validators,
)
from wtforms.validators import DataRequired # Basic example.#
@@ -43,7 +44,9 @@ class LoginForm(FlaskForm):
class SearchForm(FlaskForm):
- query = StringField("Query", [validators.DataRequired()])
+ query = SearchField(
+ "Search", [validators.DataRequired()], render_kw={"placeholder": "Search"}
+ )
submit = SubmitField("Submit")
diff --git a/store/static/_main.css b/store/static/_main.css
index c8a47b1..e69de29 100644
--- a/store/static/_main.css
+++ b/store/static/_main.css
@@ -1,224 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-
- Reseting css for all browsers in order
- to look the same for each browser the
- user is going to use
-
- Alfret Imeri
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
- display: block;
-}
-
-[class*="col-"] {
- float: left;
- padding: 15px;
- border: 0px;
- width: 100%;
- margin: 0 auto;
-}
-
-body {
- line-height: 1;
-}
-
-ol,
-ul {
- list-style: none;
-}
-
-blockquote,
-q {
- quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
- content: '';
- content: none;
-}
-
-/* table {
- border-collapse: collapse;
- border-spacing: 0;
-} */
-
-
-/* End of resetting */
-
-
-footer {
- background-color: black;
- color: white;
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
-}
-
-
-
-.navbar li a {
- color: white;
- display: block;
- text-align: center;
- text-decoration: none;
- padding: 14px 16px;
-}
-
-.navbar ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
- background-color: black;
-}
-
-
-input[type=text] {
- float: left;
- padding: 6px;
- border: none;
- margin-top: 8px;
- margin-right: 16px;
- font-size: 17px;
-}
-
-.navbar li {
- float: left;
-}
-
-.navbar li a:hover {
- background-color: white;
- color: black;
-}
-
-* {
- text-align: center;
- font-family: sans-serif;
-}
-
-h1 {
- color: black;
- font-size: 30px;
-}
-
-.error {
- text-decoration: none;
- color: red;
- font-size: 30px;
-}
-
-li {
- list-style-type: none;
-}
-
-.loginTable {
- margin-left: auto;
- margin-right: auto;
-}
\ No newline at end of file
diff --git a/store/templates/_formhelpers.html b/store/templates/_formhelpers.html
index f69931b..c1e5154 100644
--- a/store/templates/_formhelpers.html
+++ b/store/templates/_formhelpers.html
@@ -4,14 +4,13 @@ https://flask.palletsprojects.com/en/2.2.x/patterns/wtforms/#forms-in-templates
-->
{% macro render_field(field) %}
-<dt>{{ field.label }}
-<dd>{{ field(**kwargs)|safe }}
+<div class="form-group">
+ {{ field.label }}
+ {{ field(**kwargs)|safe }}
{% if field.errors %}
- <ul class=errors>
- {% for error in field.errors %}
- <li>{{ error }}</li>
- {% endfor %}
- </ul>
+ {% for error in field.errors %}
+ <div class="invalid-feedback">{{ error }}</div>
+ {% endfor %}
{% endif %}
-</dd>
+</div>
{% endmacro %}
\ No newline at end of file
diff --git a/store/templates/base.html b/store/templates/base.html
index 078786a..c2bb68f 100644
--- a/store/templates/base.html
+++ b/store/templates/base.html
@@ -3,60 +3,93 @@
<html lang="en">
<head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock%}</title>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+ integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='_main.css') }}"> <!-- Load the CSS. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
+
</head>
<body>
- <header class="header">
- <a href="{{ url_for('index')}}">ANTIQUES ONLINE</a>
- </header>
-
- <nav class="navbar">
- <ul class="navbar-list">
- <li><a href="{{ url_for('basket')}}">Basket</a></li>
- <li><a href="{{ url_for('items')}}">Items</a></li>
- <li><a href="{{ url_for('item_sets')}}">Item Sets</a></li>
-
- {% if current_user.is_authenticated %}
- <li><a href="{{ url_for('account')}}">Account</a></li>
- <li><a href="{{ url_for('logout')}}">Logout</a></li>
- <li><a class="welcome">Welcome, {{ current_user.username }}!</a></li>
- {% else %}
- <li><a href="{{ url_for('login')}}">Login</a></li>
- <li><a href="{{ url_for('register')}}">Register</a></li>
- {% endif %}
-
- <form method="POST" action="{{url_for('search')}}" class="search">
+ <nav class="navbar navbar-dark" style="background-color: #090809;">
+ <a class="navbar-brand" href="{{ url_for('index')}}">ANTIQUES ONLINE</a>
+ </nav>
+
+ <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #26282a">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+ aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('basket')}}">Basket</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('items')}}">Items</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('item_sets')}}">Item Sets</a>
+ </li>
+ {% if current_user.is_authenticated %}
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('account')}}">Account</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('logout')}}">Logout</a>
+ </li>
+ <li class="nav-item">
+
+ </li>
+ {% else %}
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('login')}}">Login</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('register')}}">Register</a>
+ </li>
+ {% endif %}
+ </ul>
+ <span class="navbar-text" style="margin-right: 1em;">
+ Welcome, {{ current_user.username }}!
+ </span>
+ <form method="POST" action="{{url_for('search')}}" class="form-inline my-2 my-lg-0">
{{search_form.hidden_tag()}}
- {{render_field(search_form.query) }}
- {{search_form.submit()}}
+ {{ search_form.query(class="form-control mr-sm-2")|safe}}
+ {% if search_form.query.errors %}
+ {% for error in search_form.query.errors %}
+ <div class="invalid-feedback">{{ error }}</div>
+ {% endfor %}
+ {% endif %}
+ {{search_form.submit(class="btn btn-outline-success my-2 my-sm-0")}}
</form>
- </ul>
+ </div>
</nav>
- {% with messages = get_flashed_messages() %}
- {% if messages %}
- <ul class="flashes">
- {% for message in messages %}
- <li class="error">{{ message }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- {% endwith %}
-
- {% block content %}
-
- {% endblock %} <!-- Where HTML will go when extended. -->
-
- <footer class="footer">
- <br>
- <p>Contact Info: mail@mail.com</p>
- <p>Phone Number 0000 000 0000</p>
- <br>
+ {% block content %} <!-- Where HTML will go when extended. -->
+ {% endblock %}
+
+ <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+ <p class="col-md-4 mb-0 text-muted">© 2023 Antique's Online</p>
+
+ <ul class="nav col-md-4 justify-content-end">
+ <li class="px-2 text-muted">Email: admin@antiquesonline.com</li>
+ <li class="px-2 text-muted">|</li>
+ <li class="px-2 text-muted">Phone Number: 0000 000 0000</li>
+ </ul>
</footer>
+
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+ integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+ crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
+ integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+ crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+ integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+ crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
--
GitLab