aboutsummaryrefslogtreecommitdiffstats
path: root/alphabetlearning/templates
diff options
context:
space:
mode:
Diffstat (limited to 'alphabetlearning/templates')
-rw-r--r--alphabetlearning/templates/base.html4
-rw-r--r--alphabetlearning/templates/resources/admin_bar.html12
-rw-r--r--alphabetlearning/templates/resources/resource_card_featured.html73
-rw-r--r--alphabetlearning/templates/resources/resource_card_standard.html55
-rw-r--r--alphabetlearning/templates/resources/resource_create.html4
-rw-r--r--alphabetlearning/templates/resources/resource_list.html135
6 files changed, 130 insertions, 153 deletions
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index 4b21f74..a0b2424 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -27,8 +27,6 @@
{% endblock javascript %}
</head>
<body>
-
-
<header>
<nav>
<a href="{% url "home" %}">
@@ -112,7 +110,7 @@
{% endfor %}
{% endif %}
{% block main %}
- <div class="main">
+ <div>
{% block content %}
{% endblock content %}
<footer>
diff --git a/alphabetlearning/templates/resources/admin_bar.html b/alphabetlearning/templates/resources/admin_bar.html
index ddb8e00..be49e65 100644
--- a/alphabetlearning/templates/resources/admin_bar.html
+++ b/alphabetlearning/templates/resources/admin_bar.html
@@ -1,20 +1,20 @@
{# admin block #}
{% if request.user.is_authenticated and request.user.is_staff %}
- <div class="row p-4 rounded border border-danger border-opacity-50 border-3">
- <h5 class="bg-primary text-white px-2 py-1 rounded">Admin bar</h5>
+ <div>
+ <h5>Admin bar</h5>
<p>
Only you will see this bar - normal users will not see it. It allows us to
include buttons for adding new resources, etc.
</p>
- <div class="col d-flex flex-column flex-md-row justify-content-between align-items-md-center">
- <a class="btn btn-primary my-2" href="{% url 'resources:create_resource' %}">Add a new resource</a>
- <div class="bg-danger p-2 my-2 text-dark bg-white border border-1 border-danger">
+ <div>
+ <a href="{% url 'resources:create_resource' %}">Add a new resource</a>
+ <div>
Logged in as
<strong>{{ request.user.email }}</strong>
</div>
<form action="{% url 'account_logout' %}" method="post" class="my-2">
{% csrf_token %}
- <button type="submit" class="btn btn-primary">Log out</button>
+ <button type="submit">Log out</button>
</form>
</div>
</div>
diff --git a/alphabetlearning/templates/resources/resource_card_featured.html b/alphabetlearning/templates/resources/resource_card_featured.html
index 0782b0c..2145eb4 100644
--- a/alphabetlearning/templates/resources/resource_card_featured.html
+++ b/alphabetlearning/templates/resources/resource_card_featured.html
@@ -1,59 +1,48 @@
{% load static %}
{% load markdown_extras %}
-<div class="card mx-2 mt-2 my-card-shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;" onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
- <img class="card-img-top"
- src="{{ resource.thumbnail_urls|first }}"
- alt="{{ resource.thumbnail_filename }}">
- <div class="card-body">
- <div class="d-flex flex-row justify-content-start align-content-center">
- <h5 class="card-title"><a
- href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
+<div class="featured-card" style="border-color: {{ resource.main_resource_category_colour_css_class }};">
+ <img class="featured-img" src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+ <div>
+ <div>
+ <h5><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
</div>
- <div class="d-flex flex-row justify-content-start align-items-center mt-2">
- <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+ <div>
+ <span>{{ resource.age_range }}</span>
{% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
- <span class="badge me-2"
- style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+ <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
{% else %}
- <span class="badge me-2"
- style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+ <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
{% endif %}
{% if request.user.is_authenticated and request.user.is_staff %}
- <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
+ <span>Feature slot: {{ resource.feature_slot }}</span>
{% endif %}
</div>
- {% if resource.card_description %}
- <div class="text-body-secondary my-2">
- <p>{{ resource.card_description | markdown | safe }}</p>
- </div>
- {% else %}
- <p class="card-text my-2">{{ resource.description | markdown | safe }}</p>
- {% endif %}
- <div class="d-flex flex-row justify-content-between align-items-end mt-2">
- <p class="card-text m-1"><small class="text-muted">1 credit</small></p>
- {% if resource.in_cart %}
- <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
- {% csrf_token %}
- <button type="submit" class="btn btn-success fs-6 px-2 py-0" disabled>In basket</button>
- </form>
- {% else %}
- <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
- {% csrf_token %}
- <button type="submit" class="btn btn-success fs-6 px-2 py-0">Add to basket</button>
- </form>
- {% endif %}
+ <div>
+ <p class="featured-card-description">{{ resource.card_description }}</p>
+ </div>
+ <div>
+ <p class="card-credit">1 credit</p>
+ <p>{{ resource.price }}</p>
+ {% if resource.in_cart %}
+ <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+ {% csrf_token %}
+ <button type="submit" class="add-to-basket-button-disabled" disabled>In basket</button>
+ </form>
+ {% else %}
+ <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+ {% csrf_token %}
+ <button type="submit" class="add-to-basket-button">Add to basket</button>
+ </form>
+ {% endif %}
</div>
</div>
{% if request.user.is_authenticated and request.user.is_staff %}
- <div class="card-footer">
- <a href="{% url 'resources:resource_update_metadata' resource.id %}"
- class="btn btn-outline-primary btn-sm">Edit</a>
- <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
- class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
- <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
- class="btn btn-outline-primary btn-sm">Add PDFs</a>
+ <div>
+ <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
+ <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
+ <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
</div>
{% endif %}
</div>
diff --git a/alphabetlearning/templates/resources/resource_card_standard.html b/alphabetlearning/templates/resources/resource_card_standard.html
index 640f75d..cf2b786 100644
--- a/alphabetlearning/templates/resources/resource_card_standard.html
+++ b/alphabetlearning/templates/resources/resource_card_standard.html
@@ -3,67 +3,56 @@
<!-- Card 1 -->
-<div class="card mx-2 mt-2 my-card-shadow-sm"
- style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
+<div style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
- <div class="row g-0">
- <div class="col-4">
- <img class="img-fluid rounded-start"
- src="{{ resource.thumbnail_urls|first }}"
- alt="{{ resource.thumbnail_filename }}">
+ <div>
+ <div>
+ <img src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
</div>
- <div class="col-8">
- <div class="card-body">
- <div class="d-flex flex-row justify-content-start align-items-center">
- <h5 class="card-title"><a
+ <div>
+ <div>
+ <div>
+ <h5><a
href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
</h5>
</div>
- <div class="d-flex flex-row justify-content-start align-items-center mt-2">
- <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+ <div>
+ <span>{{ resource.age_range }}</span>
{% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
- <span class="badge me-2"
- style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+ <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
{% else %}
- <span class="badge me-2"
- style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+ <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
{% endif %}
{% if request.user.is_authenticated and request.user.is_staff %}
- <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
+ <span>Feature slot: {{ resource.feature_slot }}</span>
{% endif %}
</div>
- <div class="text-body-secondary my-2">
+ <div>
<p>{{ resource.card_description }}</p>
</div>
- <div class="d-flex flex-row justify-content-between align-items-end mt-2">
- <p class="card-text m-1"><small class="text-muted">1 credit</small></p>
+ <div>
+ <p><small class="text-muted">1 credit</small></p>
{% if resource.in_cart %}
<form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
{% csrf_token %}
- <button type="submit" class="btn btn-success fs-6 px-2 py-0" disabled>In basket</button>
+ <button type="submit">In basket</button>
</form>
{% else %}
<form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
{% csrf_token %}
- <button type="submit" class="btn btn-success fs-6 px-2 py-0">Add to basket</button>
+ <button type="submit">Add to basket</button>
</form>
{% endif %}
-
-
</div>
</div>
</div>
{% if request.user.is_authenticated and request.user.is_staff %}
- <div class="card-footer">
- <a href="{% url 'resources:resource_update_metadata' resource.id %}"
- class="btn btn-outline-primary btn-sm">Edit</a>
- <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
- class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
- <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
- class="btn btn-outline-primary btn-sm">Add PDFs</a>
+ <div>
+ <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
+ <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
+ <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
</div>
{% endif %}
</div>
-
</div>
diff --git a/alphabetlearning/templates/resources/resource_create.html b/alphabetlearning/templates/resources/resource_create.html
index d428e46..59f9ec3 100644
--- a/alphabetlearning/templates/resources/resource_create.html
+++ b/alphabetlearning/templates/resources/resource_create.html
@@ -7,8 +7,8 @@
{# <link rel="stylesheet" href="{% static 'css/forms.css' %}">#}
{# {% endblock %}#}
{% block content %}
- <div class="row d-flex justify-content-center">
- <div class="col bg-light mt-lg-4 p-4 border border-success border-opacity-25 rounded">
+ <div>
+ <div>
<h2>Upload a new resource</h2>
<p>{% lorem %}</p>
<form action="{% url 'resources:create_resource' %}"
diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html
index 9ea9177..bb32d90 100644
--- a/alphabetlearning/templates/resources/resource_list.html
+++ b/alphabetlearning/templates/resources/resource_list.html
@@ -2,109 +2,110 @@
{% load static %}
{% load markdown_extras %}
{% block title %}
- Alphabet Learning - Resource List
+Alphabet Learning - Resource List
{% endblock title %}
{% block content %}
-
+<div class="container">
<div>
{% include "resources/admin_bar.html" %}
</div>
{# featured resources #}
{% if featured_resources %}
- <div>
- <h1>Featured resources</h1>
- </div>
+ <div>
+ <h1>Featured resources</h1>
+ </div>
- <div>
+ <div class="featured-container">
{% for featured_resource in featured_resources %}
- {% if featured_resources|length == 1 %}
- <div>
+ {% if featured_resources|length == 1 %}
+ <div>
{% elif featured_resources|length == 2 %}
+ <div>
+ {% elif featured_resources|length == 3 %}
<div>
- {% elif featured_resources|length == 3 %}
- <div>
+ {% endif %}
+ {% include "resources/resource_card_featured.html" with resource=featured_resource %}
+ </div>
+ {% endfor %}
+ </div>
+ {% else %}
+ <p>There are no featured resources</p>
{% endif %}
- {% include "resources/resource_card_featured.html" with resource=featured_resource %}
- </div>
- {% endfor %}
- </div>
- {% else %}
- <p>There are no featured resources</p>
- {% endif %}
- {# standard resources #}
- <div>
- <div>
- <h1>Standard resources</h1>
- </div>
- </div>
+ {# standard resources #}
+ <div>
+ <div>
+ <h1>Standard resources</h1>
+ </div>
+ </div>
- <!-- Tabbed navigation bar for filtering -->
- <ul id="resourceTabs" role="tablist">
- <li>
- <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
- </li>
- {% for category in categories %}
- <li>
- <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
- href="?category={{ category.name }}">{{ category.name|title }}</a>
- </li>
- {% endfor %}
- </ul>
+ <!-- Tabbed navigation bar for filtering -->
+ <ul id="resourceTabs" role="tablist">
+ <li>
+ <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
+ </li>
+ {% for category in categories %}
+ <li>
+ <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
+ href="?category={{ category.name }}">{{ category.name|title }}</a>
+ </li>
+ {% endfor %}
+ </ul>
- <div>
- {% for resource in page_obj.object_list %}
- <div data-type="{{ resource.main_resource_category_name }}">
- {% include "resources/resource_card_standard.html" with resource=resource %}
+ <div>
+ {% for resource in page_obj.object_list %}
+ <div data-type="{{ resource.main_resource_category_name }}">
+ {% include "resources/resource_card_standard.html" with resource=resource %}
+ </div>
+ {% endfor %}
</div>
- {% endfor %}
- </div>
- {# Pagination #}
- {% if page_obj.has_other_pages %}
- <div>
+ {# Pagination #}
+ {% if page_obj.has_other_pages %}
<div>
- <nav aria-label="Page navigation">
- <ul>
- {% if page_obj.has_previous %}
+ <div>
+ <nav aria-label="Page navigation">
+ <ul>
+ {% if page_obj.has_previous %}
<li>
<a href="?page=
- {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
+ {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
</li>
- {% else %}
+ {% else %}
<li>
<span>Previous</span>
</li>
- {% endif %}
+ {% endif %}
- {% for page_num in page_obj.paginator.page_range %}
+ {% for page_num in page_obj.paginator.page_range %}
{% if page_obj.number == page_num %}
- <li>
- <span class="page-link">{{ page_num }}</span>
- </li>
+ <li>
+ <span class="page-link">{{ page_num }}</span>
+ </li>
{% else %}
- <li>
- <a href="?page=
- {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
- </li>
+ <li>
+ <a href="?page=
+ {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
+ </li>
{% endif %}
- {% endfor %}
+ {% endfor %}
- {% if page_obj.has_next %}
+ {% if page_obj.has_next %}
<li>
<a href="?page=
- {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
+ {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
</li>
- {% else %}
+ {% else %}
<li>
<span class="page-link">Next</span>
</li>
- {% endif %}
- </ul>
- </nav>
+ {% endif %}
+ </ul>
+ </nav>
+ </div>
</div>
+ {% endif %}
+ {% endblock content %}
</div>
- {% endif %}
-{% endblock content %}