Logo and new navbar and new detail design

- logo in place
- new navbar - removed Joanna Lemon, etc
- tidying up the detail page, using cards and nicer titles
- better detail panel at the top of the page with a table in it

1 files changed, 98 insertions, 71 deletions

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">