diff options
Diffstat (limited to 'pyblackbird_cc/templates/resources/resource_detail.html')
| -rw-r--r-- | pyblackbird_cc/templates/resources/resource_detail.html | 104 |
1 files changed, 60 insertions, 44 deletions
diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html index 6f8f3be..605f6bb 100644 --- a/pyblackbird_cc/templates/resources/resource_detail.html +++ b/pyblackbird_cc/templates/resources/resource_detail.html @@ -2,63 +2,79 @@ {% block content %} <div class="container"> - <div class="row mt-4"> - <div class="col-md"> - <div class="my-4 p-2"> - <h1 class="display-6 text-dark">{{ resource.name }}</h1> - <div>Subject: {{ resource.main_resource_category }}</div> - <div>Age range: {{ resource.age_range }}</div> - <div>Resource type: {{ resource.resource_type }}</div> + <div class="row my-4"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <h3>{{ resource.name }}</h3> + <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> </div> </div> </div> - <div class="row mt-3"> - <div class="col-md"> - <h3>Feature images</h3> - <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 %} - <img class="img-thumbnail rounded" - src="{{ tn_url }}" - alt="{{ tn_filename }}" /> + <div class="m-2"> + <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}" /> + </div> {% endfor %} </div> </div> </div> - <div class="row mt-3"> - <div class="col-md"> - <h3>Resource preview</h3> - <div> - {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} - <div>{{ snapshot_filename }}</div> - <div> + <div class="row my-4"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <h4>Resource files preview</h4> + {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} + <div>{{ snapshot_filename }}</div> + <div> + <div class="d-flex flex-row justify-content-between"> {% for snapshot_url in snapshot_urls %} - <img class="img-thumbnail rounded" - src="{{ snapshot_url }}" - alt="{{ snapshot_filename }}" /> - {% endfor %} - <div class="resource-description-panel"> - <h3>What's included?</h3> - <div>{{ resource.description }}</div> - <h3>What's it for?</h3> - <div>{% lorem %}</div> - <h3>Resource Details</h3> - <div>{% lorem %}</div> - </div> - <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 class="m-2"> + <img class="img-thumbnail rounded" + src="{{ snapshot_url }}" + alt="{{ snapshot_filename }}" /> </div> - <div id="download-reveal"></div> - </div> + {% endfor %} </div> - {% endfor %} - <div>Logged in as {{ request.user.username }}</div> + </div> + </div> + {% endfor %} + </div> + <div class="row my-5"> + <div class="col bg-white pt-3 border border-success border-opacity-25 rounded"> + <div> + <h3>What's included?</h3> + <div>{{ resource.description }}</div> + <h3>What's it for?</h3> + <div>{% lorem %}</div> + <h3>Resource Details</h3> + <div>{% lorem %}</div> + </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"> + <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 %} |