diff options
author | Matthew Lemon <y@yulqen.org> | 2024-10-21 17:28:41 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-10-21 17:28:41 +0100 |
commit | 1a34a9f78641d868f7445c3f4cabbef7c563b78c (patch) | |
tree | b1752369a52571afa45c311bad746b21df4c06ce /alphabetlearning/templates/base.html | |
parent | 9f09904d56e70c8cf8b0a6b39385dd72b11ec2cb (diff) |
wip: remove bootstrap part 1
Diffstat (limited to '')
-rw-r--r-- | alphabetlearning/templates/base.html | 374 |
1 files changed, 163 insertions, 211 deletions
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html index 8bc9416..4b21f74 100644 --- a/alphabetlearning/templates/base.html +++ b/alphabetlearning/templates/base.html @@ -3,229 +3,181 @@ <!DOCTYPE html> {% get_current_language as LANGUAGE_CODE %} <html lang="{{ LANGUAGE_CODE }}"> -<head> - <meta charset="utf-8"/> - <meta http-equiv="x-ua-compatible" content="ie=edge"/> - <title> - {% block title %} - Alphabet Learning - {% endblock title %} - </title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <meta name="description" content="Joanna Lemon Resources"/> - <meta name="author" content="Matthew Lemon"/> - <link rel="icon" href="{% static 'images/favicons/al.png' %}"/> - {% block extra_css %} - {% endblock extra_css %} - {% block css %} - <!--Latest compiled and minified Bootstrap CSS --> - {# <link rel="stylesheet"#} - {# href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"#} - {# integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA=="#} - {# crossorigin="anonymous"#} - {# referrerpolicy="no-referrer" />#} - <!-- Your stuff: Third-party CSS libraries go here --> - <!-- This file stores project-specific CSS --> - <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}"/> - <link rel="stylesheet" href="{% static 'css/custom.css' %}"/> + <head> + <meta charset="utf-8"/> + <meta http-equiv="x-ua-compatible" content="ie=edge"/> + <title> + {% block title %} + Alphabet Learning + {% endblock title %} + </title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta name="description" content="Joanna Lemon Resources"/> + <meta name="author" content="Matthew Lemon"/> + <link rel="icon" href="{% static 'images/favicons/al.png' %}"/> + {% block extra_css %} + {% endblock extra_css %} + {% block css %} <link rel="stylesheet" href="{% static 'css/project.css' %}"/> - <link rel="stylesheet" href="{% static 'css/features.css' %}"> - {# <link rel="stylesheet" href="{% static "css/wrapper.css" %}" type="text/css" media="screen" charset="utf-8" />#} - {% endblock css %} - <!-- Le javascript - ================================================== --> - {# Placed at the top of the document so pages load faster with defer #} - {% block javascript %} - <!-- Bootstrap JS --> - {# <script defer#} - {# src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"#} - {# integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g=="#} - {# crossorigin="anonymous"#} - {# referrerpolicy="no-referrer"></script>#} - <!-- Your stuff: Third-party javascript libraries go here --> - <!-- place project specific Javascript in this file --> + {% endblock css %} + {% block javascript %} <script defer src="{% static 'js/project.js' %}"></script> - <script src="{% static "bootstrap/js/bootstrap.js" %}"></script> <script src="{% static "js/htmx.min.js" %}"></script> <script src="https://js.stripe.com/v3/"></script> - {% endblock javascript %} -</head> -<body> + {% endblock javascript %} + </head> + <body> -<header> - <nav class="navbar navbar-expand-lg navbar-light bg-white"> - <div class="container-fluid"> - <a class="navbar-brand" href="{% url "home" %}"> - <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo"> - </a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" - aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - - - <div class="collapse navbar-collapse" id="navbarNav"> - - <ul class="navbar-nav ms-auto"> - <li class="nav-item"> - <!-- <div class="d-flex align-items-end mx-1 p-1 px-3 text-white rounded rounded-sm bg-primary"> --> - <!-- <div> --> - <!-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2" width="32" height="32"> --> - <!-- <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> --> - <!-- </svg> --> - <!-- </div> --> - <!-- <div class="fw-bold"> --> - <!-- Cart --> - <!-- </div> --> - <!-- </div> --> - </li> - <li class="nav-item"> - {% if request.user.is_authenticated %} - <a class="nav-link text-gray fw-bold" href="{% url "users:detail" request.user.id %}">{{ request.user }}</a> - {% else %} - <a class="nav-link text-dark fw-bold" href="{% url "account_login" %}">Log in</a> - {% endif %} - </li> - - <li class="nav-item"> - <a class="nav-link text-dark fw-bold" href="{% url "resources:resource_list" %}">Resources</a> - </li> - <li class="nav-item"> - <a class="nav-link text-dark fw-bold" - href="https://www.tes.com/teaching-resources/shop/joannalemon" - target="_blank">TES Shop</a> - </li> - <li class="nav-item"> - <a class="nav-link text-dark fw-bold" href="https://joannalemon.etsy.com/" - target="_blank">Etsy</a> - </li> - <li class="nav-item"> - <a class="nav-link text-dark fw-bold" href="https://blog.joannalemon.com" - target="_blank">Blog</a> - </li> - <li> - {% if request.user.is_authenticated %} - <a class="nav-link text-gray fw-bold" href="{% url "account_logout" %}">Log out</a> - {% endif %} - </li> - <li class="nav-item"> - - {% if request.user.shoppingcart %} - - <!- TODO - fix this, the logic should be different button if no cart -> - <! this is a problem because it seems you can have an empty cart -> - <div class="mx-2 gray-icon"> - <a href="{% url "payments:cart_detail" %}" class="full-basket-button"> - <span class="fw-bold px-1"> - Items in cart ( - {{ request.user.shoppingcart.items.count }} - ) - </span> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"> - <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/> - </svg> - </a> - </div> - - {% else %} + <header> + <nav> + <a href="{% url "home" %}"> + <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo"> + </a> + <div> + <ul> + <li> + {% if request.user.is_authenticated %} + <a href="{% url "users:detail" request.user.id %}">{{ request.user }}</a> + {% else %} + <a href="{% url "account_login" %}">Log in</a> + {% endif %} + </li> - <div class="mx-2 gray-icon"> - <button class="empty-basket-button" disabled><span class="fw-bold px-1">Empty Basket</span> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/> - <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/> - </svg> - </button> - </div> - {% endif %} - </li> - </ul> - </div> - </div> - </nav> - <div class="border-bottom border-dark border-1"></div> -</header> -<main> - {% block body %} - {% if messages %} - {% for message in messages %} - <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}"> - {{ message }} - <button type="button" - class="btn-close" - data-bs-dismiss="alert" - aria-label="Close"></button> - </div> - {% endfor %} - {% endif %} - {% block main %} - <div class="container"> - {% block content %} - {% endblock content %} - <footer class="pt-4 my-md-5 pt-md-5 border-top"> - <div class="row"> - <div class="col-12 col-md"> - <img class="mb-2" src="#" alt="" width="24" height="19"> - <small class="d-block mb-3 text-muted">© 2024</small> - </div> - <div class="col-6 col-md"> - <h5>Features</h5> - <ul class="list-unstyled text-small"> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a> + <li> + <a href="{% url "resources:resource_list" %}">Resources</a> </li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random - feature</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team - feature</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for - developers</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a> + <li> + <a href="https://www.tes.com/teaching-resources/shop/joannalemon" + target="_blank">TES Shop</a> </li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a> + <li> + <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a> </li> - </ul> - </div> - <div class="col-6 col-md"> - <h5>Pages on this site</h5> - <ul class="list-unstyled text-small"> - <li class="mb-1"><a class="link-secondary text-decoration-none" - href="{% url "resources:resource_list" %}">Resources</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource - name</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another - resource</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final - resource</a></li> - </ul> - </div> - <div class="col-6 col-md"> - <h5>About</h5> - <ul class="list-unstyled text-small"> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a> + <li> + <a href="https://blog.joannalemon.com" target="_blank">Blog</a> </li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a> + <li> + {% if request.user.is_authenticated %} + <a href="{% url "account_logout" %}">Log out</a> + {% endif %} + </li> + <li> + + {% if request.user.shoppingcart %} + + <!- TODO - fix this, the logic should be different button if no cart -> + <! this is a problem because it seems you can have an empty cart -> + <div> + <a href="{% url "payments:cart_detail" %}" class="full-basket-button"> + <span> + Items in cart ( + {{ request.user.shoppingcart.items.count }} + ) + </span> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"> + <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/> + </svg> + </a> + </div> + + {% else %} + + <div> + <button disabled><span class="fw-bold px-1">Empty Basket</span> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/> + <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/> + </svg> + </button> + </div> + {% endif %} </li> - <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li> </ul> </div> + </nav> + <div></div> + </header> + <main> + {% block body %} + {% if messages %} + {% for message in messages %} + <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}"> + {{ message }} + <button type="button" + class="btn-close" + data-bs-dismiss="alert" + aria-label="Close"></button> </div> - </footer> + {% endfor %} + {% endif %} + {% block main %} + <div class="main"> + {% block content %} + {% endblock content %} + <footer> + <div> + <div> + <img src="#" alt="" width="24" height="19"> + <small>© 2024</small> + </div> + <div> + <h5>Features</h5> + <ul> + <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a> + </li> + <li><a class="link-secondary text-decoration-none" href="#">Random + feature</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Team + feature</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Stuff for + developers</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Another one</a> + </li> + <li><a class="link-secondary text-decoration-none" href="#">Last time</a> + </li> + </ul> + </div> + <div> + <h5>Pages on this site</h5> + <ul> + <li><a class="link-secondary text-decoration-none" + href="{% url "resources:resource_list" %}">Resources</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Resource + name</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Another + resource</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Final + resource</a></li> + </ul> + </div> + <div> + <h5>About</h5> + <ul> + <li><a class="link-secondary text-decoration-none" href="#">Team</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Locations</a> + </li> + <li><a class="link-secondary text-decoration-none" href="#">Privacy</a> + </li> + <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li> + </ul> + </div> + </div> + </footer> - </div> - {% endblock main %} - {% endblock body %} -</main> -<!-- /container --> -{% block modal %} -{% endblock modal %} -{% block inline_javascript %} -{% comment %} -Script tags with only code, no src (defer by default). To run -with a "defer" so that you run inline code: -<script> - # + </div> + {% endblock main %} + {% endblock body %} + </main> + <!-- /container --> + {% block modal %} + {% endblock modal %} + {% block inline_javascript %} + {% comment %} + Script tags with only code, no src (defer by default). To run + with a "defer" so that you run inline code: + <script> + # } { # window.addEventListener('DOMContentLoaded', () => { # @@ -236,8 +188,8 @@ with a "defer" so that you run inline code: }); # } -</script> -{% endcomment %} -{% endblock inline_javascript %} -</body> + </script> + {% endcomment %} + {% endblock inline_javascript %} + </body> </html> |