aboutsummaryrefslogtreecommitdiffstats
path: root/alphabetlearning/templates
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
parent9f09904d56e70c8cf8b0a6b39385dd72b11ec2cb (diff)
wip: remove bootstrap part 1
Diffstat (limited to 'alphabetlearning/templates')
-rw-r--r--alphabetlearning/templates/base.html374
-rw-r--r--alphabetlearning/templates/resources/resource_detail.html46
-rw-r--r--alphabetlearning/templates/resources/resource_list.html58
3 files changed, 215 insertions, 263 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>
diff --git a/alphabetlearning/templates/resources/resource_detail.html b/alphabetlearning/templates/resources/resource_detail.html
index 334f4ed..5012c5b 100644
--- a/alphabetlearning/templates/resources/resource_detail.html
+++ b/alphabetlearning/templates/resources/resource_detail.html
@@ -4,21 +4,21 @@
{% block content %}
-<div class="row my-4">
- <div class="col-md-7">
+<div>
+ <div>
{% for tn_url, tn_filename in resource.thumbnails %}
<div>
- <img class="img-fluid rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+ <img src="{{ tn_url }}" alt="{{ tn_filename }}"/>
</div>
{% endfor %}
</div>
- <div class="col-md-5">
- <div class="row">
- <div class="col">
- <p class="my-1 fw-bold fs-3">{{ resource.name }}</p>
+ <div>
+ <div>
+ <div>
+ <p>{{ resource.name }}</p>
</div>
</div>
- <div class="d-flex justify-content-between align-items-center">
+ <div>
<div>
<p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
</div>
@@ -27,36 +27,36 @@
</div>
</div>
- <div class="col">
+ <div>
{% if resource.pdf_filenames|length > 1 %}
- <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p>
+ <p>Contains {{ resource.pdf_filenames|length }} PDF files.</p>
{% else %}
- <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
+ <p>Contains {{ resource.pdf_filenames|length }} PDF file.</p>
{% endif %}
</div>
- <div class="col">
- <p class="fs-3 fw-semibold">£{{ resource.price|floatformat:2 }} (or 1 credit)</p>
+ <div>
+ <p>£{{ resource.price|floatformat:2 }} (or 1 credit)</p>
</div>
<hr>
- <div class="row">
- <div class="col">
- <p class="my-1 fw-semibold fs-5">Product summary</p>
+ <div>
+ <div>
+ <p>Product summary</p>
<p>{{resource.card_description}}</p>
</div>
</div>
- <div class="row align-items-end">
- <div class="my-4 d-flex">
+ <div>
+ <div>
{% if resource.in_cart %}
<form action="{% url 'payments:add_to_basket' resource.id %}" method="get" accept-charset="utf-8">
- <button class="btn btn-primary" disabled>
+ <button>
In basket
</button>
</form>
{% else %}
<form action="{% url 'payments:add_to_basket' resource.id %}" method="get" accept-charset="utf-8">
- <button class="btn btn-primary">
+ <button>
Add to basket
</button>
</form>
@@ -69,7 +69,7 @@
<!-- Here be the carousel stuff -->
<!-- except we are doing away with the carousel in this design -->
-<div class="d-flex justify-content-start">
+<div class="flex justify-content-start">
{% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
{% for snapshot_url in snapshot_urls %}
<div>
@@ -80,8 +80,8 @@
</div>
<!-- detailed description row -->
-<div class="row py-4">
- <div class="col-12">
+<div>
+ <div>
<h4>Product detail</h4>
{{ resource.description | markdown | safe }}
</div>
diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html
index fdd0394..9ea9177 100644
--- a/alphabetlearning/templates/resources/resource_list.html
+++ b/alphabetlearning/templates/resources/resource_list.html
@@ -6,24 +6,24 @@
{% endblock title %}
{% block content %}
- <div class="row my-4">
+ <div>
{% include "resources/admin_bar.html" %}
</div>
{# featured resources #}
{% if featured_resources %}
- <div class="row my-4 text-center">
- <h5 class="display-6">Featured resources</h5>
+ <div>
+ <h1>Featured resources</h1>
</div>
- <div class="row">
+ <div>
{% for featured_resource in featured_resources %}
{% if featured_resources|length == 1 %}
- <div class="col-lg-12 col-md-12 col-sm-12 mb-4 resource-card">
+ <div>
{% elif featured_resources|length == 2 %}
- <div class="col-lg-6 col-md-6 col-sm-12 mb-4 resource-card">
+ <div>
{% elif featured_resources|length == 3 %}
- <div class="col-lg-4 col-md-6 col-sm-12 mb-4 resource-card">
+ <div>
{% endif %}
{% include "resources/resource_card_featured.html" with resource=featured_resource %}
</div>
@@ -34,19 +34,19 @@
{% endif %}
{# standard resources #}
- <div class="row my-4 text-center">
- <div class="col">
- <h5 class="display-6 text-display-secondary">Standard resources</h5>
+ <div>
+ <div>
+ <h1>Standard resources</h1>
</div>
</div>
<!-- Tabbed navigation bar for filtering -->
- <ul class="nav nav-tabs mb-4" id="resourceTabs" role="tablist">
- <li class="nav-item">
- <a class="nav-link {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
+ <ul id="resourceTabs" role="tablist">
+ <li>
+ <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
</li>
{% for category in categories %}
- <li class="nav-item">
+ <li>
<a class="nav-link {% if selected_category == category.name %}active{% endif %}"
href="?category={{ category.name }}">{{ category.name|title }}</a>
</li>
@@ -54,9 +54,9 @@
</ul>
- <div class="row">
+ <div>
{% for resource in page_obj.object_list %}
- <div class="col-md-6 mb-4" data-type="{{ resource.main_resource_category_name }}">
+ <div data-type="{{ resource.main_resource_category_name }}">
{% include "resources/resource_card_standard.html" with resource=resource %}
</div>
{% endfor %}
@@ -64,41 +64,41 @@
{# Pagination #}
{% if page_obj.has_other_pages %}
- <div class="row my-4">
- <div class="col">
+ <div>
+ <div>
<nav aria-label="Page navigation">
- <ul class="pagination justify-content-center">
+ <ul>
{% if page_obj.has_previous %}
- <li class="page-item">
- <a class="page-link" href="?page=
+ <li>
+ <a href="?page=
{{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
</li>
{% else %}
- <li class="page-item disabled">
- <span class="page-link">Previous</span>
+ <li>
+ <span>Previous</span>
</li>
{% endif %}
{% for page_num in page_obj.paginator.page_range %}
{% if page_obj.number == page_num %}
- <li class="page-item active">
+ <li>
<span class="page-link">{{ page_num }}</span>
</li>
{% else %}
- <li class="page-item">
- <a class="page-link" href="?page=
+ <li>
+ <a href="?page=
{{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
- <li class="page-item">
- <a class="page-link" href="?page=
+ <li>
+ <a href="?page=
{{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
</li>
{% else %}
- <li class="page-item disabled">
+ <li>
<span class="page-link">Next</span>
</li>
{% endif %}