diff options
Diffstat (limited to 'alphabetlearning/templates/resources')
11 files changed, 450 insertions, 0 deletions
diff --git a/alphabetlearning/templates/resources/admin_bar.html b/alphabetlearning/templates/resources/admin_bar.html new file mode 100644 index 0000000..ddb8e00 --- /dev/null +++ b/alphabetlearning/templates/resources/admin_bar.html @@ -0,0 +1,21 @@ + {# 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> + <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"> + 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> + </form> + </div> + </div> + {% endif %} diff --git a/alphabetlearning/templates/resources/create_featured_resource.html b/alphabetlearning/templates/resources/create_featured_resource.html new file mode 100644 index 0000000..19022fc --- /dev/null +++ b/alphabetlearning/templates/resources/create_featured_resource.html @@ -0,0 +1,26 @@ +{% extends "base.html" %} + +{% load static %} + +{% block title %} + Add featured resource +{% endblock title %} +{% block content %} + {% if messages %} + <ul class="messages"> + {% for message in messages %} + <li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li> + {% endfor %} + </ul> + {% endif %} + {% if request.user.is_authenticated and request.user.is_staff %} + <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"> + <h2>Configure featured resources</h2> + <p>You can select three resources to be "featured" on the main page</p> + </div> + </div> + {% else %} + <p>You must be a super-user to access this page.</p> + {% endif %} +{% endblock content %} diff --git a/alphabetlearning/templates/resources/hx_download_button.html b/alphabetlearning/templates/resources/hx_download_button.html new file mode 100644 index 0000000..1c956a5 --- /dev/null +++ b/alphabetlearning/templates/resources/hx_download_button.html @@ -0,0 +1,3 @@ +<p> + <a href="{{ pdf_url }}">Download the resource</a> +</p> diff --git a/alphabetlearning/templates/resources/resource_card_featured.html b/alphabetlearning/templates/resources/resource_card_featured.html new file mode 100644 index 0000000..8a92729 --- /dev/null +++ b/alphabetlearning/templates/resources/resource_card_featured.html @@ -0,0 +1,49 @@ +{% 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> + <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> + {% 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> + {% 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> + {% endif %} + {% if request.user.is_authenticated and request.user.is_staff %} + <span class="badge bg-info me-2">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> + <button type="button" class="btn btn-success fs-6 px-2 py-0">Add to basket</button> + </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> + {% endif %} +</div> diff --git a/alphabetlearning/templates/resources/resource_card_standard.html b/alphabetlearning/templates/resources/resource_card_standard.html new file mode 100644 index 0000000..f8a557b --- /dev/null +++ b/alphabetlearning/templates/resources/resource_card_standard.html @@ -0,0 +1,56 @@ +{% load static %} +{% load markdown_extras %} + +<!-- 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;" + 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 class="col-8"> + <div class="card-body"> + <div class="d-flex flex-row justify-content-start align-items-center"> + <h5 class="card-title"><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> + {% 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> + {% 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> + {% endif %} + {% if request.user.is_authenticated and request.user.is_staff %} + <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span> + {% endif %} + </div> + <div class="text-body-secondary my-2"> + <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> + <button type="button" class="btn btn-success fs-6 px-2 py-0">Add to basket</button> + </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> + {% endif %} + </div> + +</div> diff --git a/alphabetlearning/templates/resources/resource_create.html b/alphabetlearning/templates/resources/resource_create.html new file mode 100644 index 0000000..d428e46 --- /dev/null +++ b/alphabetlearning/templates/resources/resource_create.html @@ -0,0 +1,22 @@ +{% extends "base.html" %} + +{% load static %} +{% load crispy_forms_tags %} + +{# {% block extra_css %}#} +{# <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"> + <h2>Upload a new resource</h2> + <p>{% lorem %}</p> + <form action="{% url 'resources:create_resource' %}" + method="post" + enctype="multipart/form-data"> + {% csrf_token %} + {% crispy form form.helper %} + </form> + </div> + </div> +{% endblock content %} diff --git a/alphabetlearning/templates/resources/resource_detail.html b/alphabetlearning/templates/resources/resource_detail.html new file mode 100644 index 0000000..6c6ceda --- /dev/null +++ b/alphabetlearning/templates/resources/resource_detail.html @@ -0,0 +1,82 @@ +{% extends 'base.html' %} + +{% load markdown_extras %} + +{% block content %} + +<div class="row my-4"> + <div class="col-md-7"> + {% for tn_url, tn_filename in resource.thumbnails %} + <div> + <img class="img-fluid rounded mx-1" 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 class="d-flex justify-content-between align-items-center"> + <div> + <p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p> + </div> + <div> + <p class="text-secondary my-1 fw-semibold fs-5">{{ resource.age_range }}</p> + </div> + </div> + + <div class="col"> + {% if resource.pdf_filenames|length > 1 %} + <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p> + {% else %} + <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p> + {% endif %} + </div> + <div class="col"> + <p class="fs-3 fw-semibold">£1.50 (or 1 credit)</p> + </div> + + <hr> + + <div class="row"> + <div class="col"> + <p class="my-1 fw-semibold fs-5">Product summary</p> + <p>{{resource.card_description}}</p> + </div> + </div> + <div class="row align-items-end"> + <div class="my-4 d-flex justify-content-center"> + <form action="{% url 'payments:add_to_cart' resource.id %}" method="get" accept-charset="utf-8"> + <button class="btn btn-primary w-100"> + Add to cart + </button> + </form> + </div> + </div> + </div> +</div> + +<!-- Here be the carousel stuff --> +<!-- except we are doing away with the carousel in this design --> +<div class="d-flex justify-content-start"> + {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} + {% for snapshot_url in snapshot_urls %} + <div> + <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}"> + </div> + {% endfor %} + {% endfor %} +</div> + +<!-- detailed description row --> +<div class="row py-4"> + <div class="col-12"> + <h4>Product detail</h4> + {{ resource.description | markdown | safe }} + </div> +</div> + +{% endblock content %} + diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html new file mode 100644 index 0000000..fdd0394 --- /dev/null +++ b/alphabetlearning/templates/resources/resource_list.html @@ -0,0 +1,110 @@ +{% extends "base.html" %} +{% load static %} +{% load markdown_extras %} +{% block title %} + Alphabet Learning - Resource List +{% endblock title %} +{% block content %} + + <div class="row my-4"> + {% 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> + + <div class="row"> + {% 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"> + {% elif featured_resources|length == 2 %} + <div class="col-lg-6 col-md-6 col-sm-12 mb-4 resource-card"> + {% elif featured_resources|length == 3 %} + <div class="col-lg-4 col-md-6 col-sm-12 mb-4 resource-card"> + {% 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 class="row my-4 text-center"> + <div class="col"> + <h5 class="display-6 text-display-secondary">Standard resources</h5> + </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> + </li> + {% for category in categories %} + <li class="nav-item"> + <a class="nav-link {% if selected_category == category.name %}active{% endif %}" + href="?category={{ category.name }}">{{ category.name|title }}</a> + </li> + {% endfor %} + </ul> + + + <div class="row"> + {% for resource in page_obj.object_list %} + <div class="col-md-6 mb-4" data-type="{{ resource.main_resource_category_name }}"> + {% include "resources/resource_card_standard.html" with resource=resource %} + </div> + {% endfor %} + </div> + + {# Pagination #} + {% if page_obj.has_other_pages %} + <div class="row my-4"> + <div class="col"> + <nav aria-label="Page navigation"> + <ul class="pagination justify-content-center"> + {% if page_obj.has_previous %} + <li class="page-item"> + <a class="page-link" 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> + {% endif %} + + {% for page_num in page_obj.paginator.page_range %} + {% if page_obj.number == page_num %} + <li class="page-item active"> + <span class="page-link">{{ page_num }}</span> + </li> + {% else %} + <li class="page-item"> + <a class="page-link" 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= + {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a> + </li> + {% else %} + <li class="page-item disabled"> + <span class="page-link">Next</span> + </li> + {% endif %} + </ul> + </nav> + </div> + </div> + {% endif %} +{% endblock content %} diff --git a/alphabetlearning/templates/resources/resource_metadata_update.html b/alphabetlearning/templates/resources/resource_metadata_update.html new file mode 100644 index 0000000..2c6daa1 --- /dev/null +++ b/alphabetlearning/templates/resources/resource_metadata_update.html @@ -0,0 +1,25 @@ +{% extends "base.html" %} + +{% load static %} +{% load crispy_forms_tags %} + +{% block title %} + Joanna Lemon Learning - Update Resource +{% endblock title %} +{# {% block extra_css %}#} +{# <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"> + <h2>Update this resource</h2> + <p>{% lorem %}</p> + <form action="{% url 'resources:resource_update_metadata' resource.id %}" + method="post"> + {% csrf_token %} + {% crispy form form.helper %} + {# now for the submit button #} + </form> + </div> + </div> +{% endblock content %} diff --git a/alphabetlearning/templates/resources/update_pdfs.html b/alphabetlearning/templates/resources/update_pdfs.html new file mode 100644 index 0000000..b490b4f --- /dev/null +++ b/alphabetlearning/templates/resources/update_pdfs.html @@ -0,0 +1,27 @@ +{% extends "base.html" %} +{% load static %} +{% load crispy_forms_tags %} + +{% 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"> + <h1>Update PDFs for <strong>{{ resource.name }}</strong> resource</h1> + + <p>The current PDFs for this resource are:</p> + + <ul> + {% for pdf in resource.get_pdf_file_names %} + <li><em>{{ pdf }}</em></li> + {% endfor %} + </ul> + + <form action="{% url "resources:resource_update_pdfs" resource.id %}" + method="post" enctype="multipart/form-data"> + {% csrf_token %} + {% crispy form form.helper %} + </form> + </div> + </div> + + +{% endblock %} diff --git a/alphabetlearning/templates/resources/update_thumbnails.html b/alphabetlearning/templates/resources/update_thumbnails.html new file mode 100644 index 0000000..e473a00 --- /dev/null +++ b/alphabetlearning/templates/resources/update_thumbnails.html @@ -0,0 +1,29 @@ +{% extends "base.html" %} +{% load static %} +{% load crispy_forms_tags %} + +{% 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"> + <h1>Update feature images for <strong>{{ resource.name }}</strong> resource</h1> + + <p>The current thumbnails for this resource are:</p> + + <ul> + {% for t in resource.thumbnail_filenames %} + <li><em>{{ t }}</em></li> + {% endfor %} + </ul> + + <form action="{% url "resources:resource_update_thumbnails" resource.id %}" + method="post" enctype="multipart/form-data"> + {% csrf_token %} + {% crispy form form.helper %} + </form> + + <button class="btn btn-danger" onclick="location.href='{{ resource.get_absolute_url }}';">Cancel</button> + </div> + </div> + + +{% endblock %} |