aboutsummaryrefslogtreecommitdiffstats
path: root/alphabetlearning/templates/base.html
diff options
context:
space:
mode:
authorMatthew Lemon <y@yulqen.org>2024-10-21 17:28:41 +0100
committerMatthew Lemon <y@yulqen.org>2024-10-21 17:28:41 +0100
commit1a34a9f78641d868f7445c3f4cabbef7c563b78c (patch)
treeb1752369a52571afa45c311bad746b21df4c06ce /alphabetlearning/templates/base.html
parent9f09904d56e70c8cf8b0a6b39385dd72b11ec2cb (diff)
wip: remove bootstrap part 1
Diffstat (limited to 'alphabetlearning/templates/base.html')
-rw-r--r--alphabetlearning/templates/base.html374
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">&copy; 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>&copy; 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>