diff options
| -rw-r--r-- | pyblackbird_cc/resources/views.py | 1 | ||||
| -rw-r--r-- | pyblackbird_cc/templates/resources/resource_detail.html | 246 |
2 files changed, 151 insertions, 96 deletions
diff --git a/pyblackbird_cc/resources/views.py b/pyblackbird_cc/resources/views.py index ca7ce73..1b3312e 100644 --- a/pyblackbird_cc/resources/views.py +++ b/pyblackbird_cc/resources/views.py @@ -289,6 +289,7 @@ def resource_detail(request, resource_id): "id": resource_obj.id, "name": resource_obj.name, "description": resource_obj.description, + "card_description": resource_obj.card_description, "resource_type": resource_obj.resource_type.name, "main_resource_category": resource_obj.main_resource_category.name, "additional_resource_category": ( diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html index 64747a2..33096a0 100644 --- a/pyblackbird_cc/templates/resources/resource_detail.html +++ b/pyblackbird_cc/templates/resources/resource_detail.html @@ -3,18 +3,93 @@ {% load markdown_extras %} {% block content %} - <div class="container"> +<div class="d-flex justify-content-between"> + <div class="border border-danger px-1"> + <p>This should be left.</p> + </div> + <div class="border border-danger px-1"> + <p>This should be right.</p> + </div> +</div> - <div class="row my-4"> - <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <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="card-body"> - <table class="table table-bordered mx-auto"> - <tbody> + +<div class="d-flex flex-wrap justify-content-start"> + <div class="border border-danger"> + {% for tn_url, tn_filename in resource.thumbnails %} + <div class="m-2"> + <img class="image-thumbnail rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/> + </div> + {% endfor %} + </div> + <div class="border border-success"> + <div class="row"> + <div class="col"> + <h2 class="my-1">{{ resource.name }}</h2> + </div> + </div> + <div class="row"> + <div class="col"> + <p class="my-1">{{ resource.main_resource_category }}</p> + </div> + </div> + <div class="row"> + <div class="col"> + <p class="my-1">{{ resource.age_range }}</p> + </div> + </div> + <div class="row"> + <div class="col"> + <p class="my-1">Number of PDF files: {{ resource.pdf_filenames|length }}</p> + </div> + </div> + <div class="row"> + <div class="col"> + <h4>Product summary</h4> + + <p>{{resource.card_description}}</p> + </div> + </div> + <div> + <div class="my-4 d-flex justify-content-center"> + <button class="btn btn-primary"> + Add to cart + </button> + </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> + +<div class="row my-4"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <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="card-body"> + <table class="table table-bordered mx-auto"> + <tbody> <tr> <th>Subject</th> <td>{{ resource.main_resource_category }}</td> @@ -35,114 +110,93 @@ <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> + </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 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"> - <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 class="row my-4"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <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> </div> </div> </div> +</div> - <!-- Here be the carousel stuff --> - - - {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} - <div class="row justify-content-center my-4"> - <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <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"> +<!-- Here be the carousel stuff --> +{% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} +<div class="row justify-content-center my-4"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <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 }}"> + <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 %} + <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 %} </div> </div> </div> + </div> {% endfor %} - - - -<div class="row"> - <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> - <div class="resource-download-panel"> - <h4>Download the resource</h4> - <div> - Click - <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}" - hx-target="next #download-reveal">here - </button> - to download the resource - </div> - <div id="download-reveal"></div> - </div> - </div> - <div>Logged in as {{ request.user.username }}</div> -</div> </div> {% endblock content %} |