From 7217f933f300e442309d41ebebb823d3042f2f18 Mon Sep 17 00:00:00 2001
From: b4-sharp <Bradley2.Sharp@live.uwe.ac.uk>
Date: Fri, 14 Apr 2023 03:45:14 +0100
Subject: [PATCH] Update to bootstrap 5, improve footer and header
---
store/templates/base.html | 143 ++++++++++++++++++++------------------
1 file changed, 77 insertions(+), 66 deletions(-)
diff --git a/store/templates/base.html b/store/templates/base.html
index c2bb68f..7da443f 100644
--- a/store/templates/base.html
+++ b/store/templates/base.html
@@ -5,75 +5,91 @@
<head>
<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. -->
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='_main.css') }}">
</head>
-<body>
- <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>
+<body class="d-flex flex-column min-vh-100">
+ <!-- https://getbootstrap.com/docs/4.0/components/navbar/ -->
+ <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: black">
+ <div class="container-fluid">
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
+ <!-- Once in mobile mode we want the home text to be inline with the burger menu. -->
+ <a href="/" class="text-light text-decoration-none d-block d-lg-none">
+ <span class="fs-4">ANTIQUES ONLINE</span>
+ </a>
- </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()}}
- {{ 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>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <div class="container">
+ <!-- Use a row for columns to perfectly centre the title. -->
+ <div class="row">
+ <div class="col-lg d-flex justify-content-start text-nowrap">
+ <ul class="navbar-nav">
+ <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>
+ {% 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>
+ </div>
+ <div class="col-lg d-flex justify-content-center">
+ <!-- Just force it into the centre, it's basically already there anyway. -->
+ <a href="/" class="text-light text-decoration-none d-none d-lg-block"
+ style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+ <span class="fs-4">ANTIQUES ONLINE</span>
+ </a>
+ </div>
+ <div class="col-lg d-flex justify-content-end">
+ <form method="POST" action="{{url_for('search')}}" class="d-flex">
+ {{search_form.hidden_tag()}}
+ {{ 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")}}
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</nav>
{% 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>
-
+ <!-- https://getbootstrap.com/docs/5.2/examples/footers/ -->
+ <!-- mt-auto will handle put the footer at the bottom if the content doesn't fill the viewport.
+ It requires the body to be d-flex flex-column min-vh-100 -->
+ <footer class="mt-auto 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 px-2">© 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>
@@ -81,15 +97,10 @@
</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"
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
+
</body>
</html>
\ No newline at end of file
--
GitLab