wip: fixing list page

2 files changed, 75 insertions, 48 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index bc41010..6daa42b 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -4,7 +4,7 @@
   <div class="container">
     <div class="row my-4">
       <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <h3 class="mb-4">{{ resource.name }}</h3>
+        <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 }}
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 5b11ff6..fabc6a8 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -4,58 +4,85 @@
   Joanna Lemon Resources - Resource List
 {% endblock title %}
 {% block content %}
-  <div class="cella">
-    {% if request.user.is_authenticated %}
-      <div class="admin-links">
-        <div>
-          <a href="{% url 'resources:create_resource' %} ">Add a new resource</a>
-        </div>
-        <div>
-          <form action="{% url 'account_logout' %}" method="post">
-            {% csrf_token %}
-            <button type="submit">Log out</button>
-          </form>
-        </div>
-      </div>
-    {% endif %}
-    {% if resource_list %}
-      {% for resource in resource_list %}
-        <div class="resource-metadata-panel">
+
+  <div class="container">
+
+    <div class="row bg-white">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        {% if request.user.is_authenticated %}
           <div>
-            <a class="no-underline"
-               href="{% url 'resources:resource_detail' resource_id=resource.id %}">
-              <h1 class="resource-title">{{ resource.name }}</h1>
-            </a>
+            <a href="{% url 'resources:create_resource' %} ">Add a new resource</a>
           </div>
           <div>
-            <div>Main category: {{ resource.main_resource_category_name }}</div>
-            {% if resource.additional_resource_category_name %}
-              <div>Additional category: {{ resource.additional_resource_category_name }}</div>
-            {% endif %}
-          </div>
-        </div>
-        <div>
-          <div class="resource-img-detail">
-            {% for img in resource.thumbnail_urls %}
-              <img style="max-height: 400px;
-                          width: auto"
-                   src="{{ img }}"
-                   alt="{{ resource.thumbnail_filename }}" />
-            {% endfor %}
+            Logged in as {{ request.user.email }}
           </div>
           <div>
-            Click
-            <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}"
-                    hx-target="next #download-reveal">here</button>
-            to download the resource
+            <form action="{% url 'account_logout' %}" method="post">
+              {% csrf_token %}
+              <button type="submit">Log out</button>
+            </form>
           </div>
-          <div id="download-reveal"></div>
-          <hr />
-        </div>
-      {% endfor %}
-    {% else %}
-      <p>There are no resources</p>
-    {% endif %}
+        {% endif %}
+      </div>
+    </div>
+
+
+    <div class="row my-4">
+      <div class="col-6 bg-white pt-3 border border-success border-opacity-25 rounded">
+        {% if resource_list %}
+          {% for resource in resource_list %}
+            <div>
+              <div>
+                <a class="no-underline"
+                   href="{% url 'resources:resource_detail' resource_id=resource.id %}">
+                  <h1 class="resource-title">{{ resource.name }}</h1>
+                </a>
+              </div>
+              <div>
+                <div class="card" style="width: 18rem;">
+                  <img class="card-img-top" src="{{ resource.thumbnail_urls|first }}"
+                       alt="{{ resource.thumbnail_filename }}">
+                  <div class="card-body">
+                    <h5 class="card-title">{{ resource.name }}</h5>
+                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
+                      card's content.</p>
+                    <a href="{% url 'resources:resource_detail' resource_id=resource.id %}" class="btn btn-primary">More...</a>
+                  </div>
+                </div>
+
+
+                <div>Main category: {{ resource.main_resource_category_name }}</div>
+                {% if resource.additional_resource_category_name %}
+                  <div>Additional category: {{ resource.additional_resource_category_name }}</div>
+                {% endif %}
+              </div>
+            </div>
+            <div>
+              <div class="resource-img-detail">
+                {#            {% for img in resource.thumbnail_urls %}#}
+                {#              <img style="max-height: 400px;#}
+                {#                          width: auto"#}
+                {#                   src="{{ img }}"#}
+                {#                   alt="{{ resource.thumbnail_filename }}" />#}
+                {#            {% endfor %}#}
+                <img style="max-height: 300px; width: auto" src="{{ resource.thumbnail_urls|first }}"
+                     alt="{{ resource.thumbnail_filename }}">
+              </div>
+              <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>
+          {% endfor %}
+        {% else %}
+          <p>There are no resources</p>
+        {% endif %}
+
+      </div>
+    </div>
   </div>
-  <div>Logged in as {{ request.user.username }}</div>
 {% endblock content %}