diff options
Diffstat (limited to 'pyblackbird_cc/templates')
| -rw-r--r-- | pyblackbird_cc/templates/base.html | 61 | ||||
| -rw-r--r-- | pyblackbird_cc/templates/pages/home.html | 18 | ||||
| -rw-r--r-- | pyblackbird_cc/templates/resources/resource_detail.html | 169 |
3 files changed, 146 insertions, 102 deletions
diff --git a/pyblackbird_cc/templates/base.html b/pyblackbird_cc/templates/base.html index b02c52c..36c8c5a 100644 --- a/pyblackbird_cc/templates/base.html +++ b/pyblackbird_cc/templates/base.html @@ -51,40 +51,39 @@ </head> <body> <header> - <div class="container text-center"> - <div> </div> - <div class="row"> - <div class="col"> - <h1>Joanna Lemon Learning</h1> - <p class="text-black-50"> - Experienced primary school teacher, dedicated to creating colourful and - clear educational learning resources. - </p> + <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"> + <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> + </ul> </div> </div> - <div class="row"> - <p class="text-black-50"> - For information: please contact <a href="mailto:joanna@joannalemon.com">joanna@joannalemon.com</a> - </p> - </div> - <div class="row"> - <div class="col"> - <a href="https://www.tes.com/teaching-resources/shop/joannalemon" - target="_blank">TES Shop</a> - </div> - <div class="col"> - <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a> - </div> - <div class="col"> - <a href="{% url "resources:resource_list" %}">Resources</a> - </div> - <div class="col"> - <a href="https://blog.joannalemon.com" target="_blank">Blog</a> - </div> - </div> - </div> + </nav> + <div class="border-bottom border-dark border-1"></div> </header> -<hr/> <main> {% block body %} {% if messages %} diff --git a/pyblackbird_cc/templates/pages/home.html b/pyblackbird_cc/templates/pages/home.html index 2d60d83..1b557f4 100644 --- a/pyblackbird_cc/templates/pages/home.html +++ b/pyblackbird_cc/templates/pages/home.html @@ -90,6 +90,24 @@ </div> </div> + + {# Image section#} + <div class="container my-5"> + <div class="row"> + <div class="col-lg-6 mx-auto"> + <h2 class="display-5 fw-bold text-center mb-4">Sample Resources</h2> + <div class="ratio ratio-16x9 mb-4"> + <img src="{% static 'images/placeholder-image.jpg' %}" class="img-fluid rounded" + alt="Sample Resource"> + </div> + <p class="lead text-center">This is a sample of the high-quality educational resources you can + access with our membership plans. Our resources are carefully crafted by experienced educators + to engage and inspire young learners.</p> + </div> + </div> + </div> + + <div class="feature-divider"></div> <div class="row"> diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html index a68c321..64747a2 100644 --- a/pyblackbird_cc/templates/resources/resource_detail.html +++ b/pyblackbird_cc/templates/resources/resource_detail.html @@ -4,103 +4,130 @@ {% block content %} <div class="container"> + + <div class="row my-4"> <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <h1 class="mb-4">{{ resource.name }}</h1> - <div class="d-flex flex-row justify-content-between my-3"> - <div> - <span class="fw-bold">Subject:</span> {{ resource.main_resource_category }} - </div> - <div class="px-2"> - <span class="fw-bold">Age range:</span> {{ resource.age_range }} - </div> - <div class="px-2"> - <span class="fw-bold">Resource type:</span> {{ resource.resource_type }} + <div class="card mb-4"> + <div class="card-header bg-success text-white"> + <h1 class="card-title mb-0 text-center">{{ resource.name }}</h1> </div> - <div class="px-2"> - <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }} - </div> - </div> - <div class="d-flex flex-row justify-content-between my-3 flex-wrap"> - <div> - <span class="fw-bold">Created:</span> {{ resource.created|date:"D d M Y" }} - </div> - <div> - {% if request.user.is_authenticated and request.user.is_staff %} - <a href="{% url "resources:resource_update_metadata" resource.id %}" - class="text-danger">Edit this resource</a> - {% endif %} + <div class="card-body"> + <table class="table table-bordered mx-auto"> + <tbody> + <tr> + <th>Subject</th> + <td>{{ resource.main_resource_category }}</td> + </tr> + <tr> + <th>Age range</th> + <td>{{ resource.age_range }}</td> + </tr> + <tr> + <th>Resource type</th> + <td>{{ resource.resource_type }}</td> + </tr> + <tr> + <th>Number of files</th> + <td>{{ resource.pdf_filenames|length }}</td> + </tr> + <tr> + <th>Created</th> + <td>{{ resource.created|date:"D d M Y" }}</td> + </tr> + </tbody> + </table> + <div class="my-4"> + <h5 class="card-title bg-success text-white p-2">Resource Description</h5> + <div>{{ resource.description | markdown | safe }}</div> + </div> + + <div class="d-flex justify-content-end"> + {% if request.user.is_authenticated and request.user.is_staff %} + <a href="{% url "resources:resource_update_metadata" resource.id %}" + class="text-danger">Edit this resource</a> + {% endif %} + </div> </div> </div> </div> </div> + <div class="row my-4"> <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <h4>Feature images</h4> - <div class="d-flex flex-row justify-content-between"> - {% for tn_url, tn_filename in resource.thumbnails %} - <div class="m-2"> - <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/> + <div class="card mb-4"> + <div class="card-header bg-success text-white"> + <h4 class="card-title mb-0">Feature Images</h4> + </div> + <div class="card-body"> + <div class="d-flex flex-row justify-content-between"> + {% for tn_url, tn_filename in resource.thumbnails %} + <div class="m-2"> + <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/> + </div> + {% endfor %} </div> - {% endfor %} + </div> </div> </div> </div> + <!-- Here be the carousel stuff --> + {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} - <div class="row my-4"> + <div class="row justify-content-center my-4"> <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - {% if resource.snapshot_urls.items|length > 1 %} - <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4> - {% else %} - <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4> - {% endif %} - - <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> - <div class="carousel-inner"> - - {% for snapshot_url in snapshot_urls %} - {% if forloop.first %} - <!-- We must have an active class otherwise the carousel will not show up --> - <div class="carousel-item active"> - {% else %} - <div class="carousel-item"> + <div class="card mb-4"> + <div class="card-header bg-success text-white"> + {% if resource.snapshot_urls.items|length > 1 %} + <h4 class="card-title mb-0 text-center">File + preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }}</h4> + {% else %} + <h4 class="card-title mb-0 text-center">File preview: {{ snapshot_filename|cut:".pdf" }}</h4> + {% endif %} + </div> + <div class="card-body"> + <div id="carouselPreview{{ forloop.counter }}" class="carousel slide" data-bs-ride="carousel"> + <div class="carousel-inner"> + {% for snapshot_url in snapshot_urls %} + {% if forloop.first %} + <div class="carousel-item active"> + {% else %} + <div class="carousel-item"> + {% endif %} + <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded" + alt="{{ snapshot_name }}"> + </div> + {% endfor %} + </div> + <button class="carousel-control-prev" type="button" + data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="prev"> + <span class="carousel-control-prev-icon" aria-hidden="true"></span> + <span class="visually-hidden">Previous</span> + </button> + <button class="carousel-control-next" type="button" + data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="next"> + <span class="carousel-control-next-icon" aria-hidden="true"></span> + <span class="visually-hidden">Next</span> + </button> + </div> + {% if request.user.is_authenticated and request.user.is_staff %} + <div class="d-flex justify-content-between my-2 p-2"> + <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a> + <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a> + </div> {% endif %} - <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded" - alt="{{ snapshot_name }}"> - </div> - {% endfor %} </div> - <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" - data-bs-slide="prev"> - <span class="carousel-control-prev-icon" aria-hidden="true"></span> - <span class="visually-hidden">Previous</span> - </button> - <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" - data-bs-slide="next"> - <span class="carousel-control-next-icon" aria-hidden="true"></span> - <span class="visually-hidden">Next</span> - </button> </div> - {% if request.user.is_authenticated and request.user.is_staff %} - <div class="d-flex justify-content-between my-2 p-2"> - <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a> - <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a> - </div> - {% endif %} </div> </div> - {% endfor %} -<div class="row my-5"> - <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <div>{{ resource.description | markdown | safe }}</div> - </div> -</div> + + <div class="row"> <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> <div class="resource-download-panel"> |