From 886aca24778b72edd89726c90783f8c32438db2c Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Mon, 21 Oct 2024 20:51:42 +0100
Subject: wip: have featured cards lined up on resource index page

---
 .../templates/resources/admin_bar.html             |  12 +-
 .../resources/resource_card_featured.html          |  73 +++++------
 .../resources/resource_card_standard.html          |  55 ++++-----
 .../templates/resources/resource_create.html       |   4 +-
 .../templates/resources/resource_list.html         | 135 +++++++++++----------
 5 files changed, 129 insertions(+), 150 deletions(-)

(limited to 'alphabetlearning/templates/resources')

diff --git a/alphabetlearning/templates/resources/admin_bar.html b/alphabetlearning/templates/resources/admin_bar.html
index ddb8e00..be49e65 100644
--- a/alphabetlearning/templates/resources/admin_bar.html
+++ b/alphabetlearning/templates/resources/admin_bar.html
@@ -1,20 +1,20 @@
   {#  admin block #}
   {% if request.user.is_authenticated and request.user.is_staff %}
-    <div class="row p-4 rounded border border-danger border-opacity-50 border-3">
-      <h5 class="bg-primary text-white px-2 py-1 rounded">Admin bar</h5>
+    <div>
+      <h5>Admin bar</h5>
       <p>
         Only you will see this bar - normal users will not see it. It allows us to
         include buttons for adding new resources, etc.
       </p>
-      <div class="col d-flex flex-column flex-md-row justify-content-between align-items-md-center">
-        <a class="btn btn-primary my-2" href="{% url 'resources:create_resource' %}">Add a new resource</a>
-        <div class="bg-danger p-2 my-2 text-dark bg-white border border-1 border-danger">
+      <div>
+        <a href="{% url 'resources:create_resource' %}">Add a new resource</a>
+        <div>
           Logged in as
           <strong>{{ request.user.email }}</strong>
         </div>
         <form action="{% url 'account_logout' %}" method="post" class="my-2">
           {% csrf_token %}
-          <button type="submit" class="btn btn-primary">Log out</button>
+          <button type="submit">Log out</button>
         </form>
       </div>
     </div>
diff --git a/alphabetlearning/templates/resources/resource_card_featured.html b/alphabetlearning/templates/resources/resource_card_featured.html
index 0782b0c..2145eb4 100644
--- a/alphabetlearning/templates/resources/resource_card_featured.html
+++ b/alphabetlearning/templates/resources/resource_card_featured.html
@@ -1,59 +1,48 @@
 {% load static %}
 {% load markdown_extras %}
 
-<div class="card mx-2 mt-2 my-card-shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;" onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
-    <img class="card-img-top"
-         src="{{ resource.thumbnail_urls|first }}"
-         alt="{{ resource.thumbnail_filename }}">
-    <div class="card-body">
-        <div class="d-flex flex-row justify-content-start align-content-center">
-            <h5 class="card-title"><a
-                    href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
+<div class="featured-card" style="border-color: {{ resource.main_resource_category_colour_css_class }};">
+    <img class="featured-img" src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
+    <div>
+        <div>
+            <h5><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
         </div>
-        <div class="d-flex flex-row justify-content-start align-items-center mt-2">
-            <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+        <div>
+            <span>{{ resource.age_range }}</span>
             {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
-                <span class="badge me-2"
-                      style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+                <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
             {% else %}
-                <span class="badge me-2"
-                      style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+                <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
             {% endif %}
             {% if request.user.is_authenticated and request.user.is_staff %}
-                <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
+                <span>Feature slot: {{ resource.feature_slot }}</span>
             {% endif %}
         </div>
-        {% if resource.card_description %}
-            <div class="text-body-secondary my-2">
-                <p>{{ resource.card_description | markdown | safe }}</p>
-            </div>
-        {% else %}
-            <p class="card-text my-2">{{ resource.description | markdown | safe }}</p>
-        {% endif %}
-        <div class="d-flex flex-row justify-content-between align-items-end mt-2">
-            <p class="card-text m-1"><small class="text-muted">1 credit</small></p>
-                {% if resource.in_cart %}
-                <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
-                    {% csrf_token %}
-                    <button type="submit" class="btn btn-success fs-6 px-2 py-0" disabled>In basket</button>
-                </form>
-                {% else %}
-                <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
-                    {% csrf_token %}
-                    <button type="submit" class="btn btn-success fs-6 px-2 py-0">Add to basket</button>
-                </form>
-                {% endif %}
+        <div>
+            <p class="featured-card-description">{{ resource.card_description }}</p>
+        </div>
+        <div>
+            <p class="card-credit">1 credit</p>
+            <p>{{ resource.price }}</p>
+            {% if resource.in_cart %}
+            <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+                {% csrf_token %}
+                <button type="submit" class="add-to-basket-button-disabled" disabled>In basket</button>
+            </form>
+            {% else %}
+            <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
+                {% csrf_token %}
+                <button type="submit" class="add-to-basket-button">Add to basket</button>
+            </form>
+            {% endif %}
         </div>
     </div>
 
     {% if request.user.is_authenticated and request.user.is_staff %}
-    <div class="card-footer">
-        <a href="{% url 'resources:resource_update_metadata' resource.id %}"
-            class="btn btn-outline-primary btn-sm">Edit</a>
-        <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
-            class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
-        <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
-            class="btn btn-outline-primary btn-sm">Add PDFs</a>
+    <div>
+        <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
+        <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
+        <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
     </div>
     {% endif %}
 </div>
diff --git a/alphabetlearning/templates/resources/resource_card_standard.html b/alphabetlearning/templates/resources/resource_card_standard.html
index 640f75d..cf2b786 100644
--- a/alphabetlearning/templates/resources/resource_card_standard.html
+++ b/alphabetlearning/templates/resources/resource_card_standard.html
@@ -3,67 +3,56 @@
 
 <!-- Card 1 -->
 
-<div class="card mx-2 mt-2 my-card-shadow-sm"
-     style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
+<div style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;"
      onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
-    <div class="row g-0">
-        <div class="col-4">
-            <img class="img-fluid rounded-start"
-                 src="{{ resource.thumbnail_urls|first }}"
-                 alt="{{ resource.thumbnail_filename }}">
+    <div>
+        <div>
+            <img src="{{ resource.thumbnail_urls|first }}" alt="{{ resource.thumbnail_filename }}">
         </div>
-        <div class="col-8">
-            <div class="card-body">
-                <div class="d-flex flex-row justify-content-start align-items-center">
-                    <h5 class="card-title"><a
+        <div>
+            <div>
+                <div>
+                    <h5><a
                             href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a>
                     </h5>
                 </div>
-                <div class="d-flex flex-row justify-content-start align-items-center mt-2">
-                    <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+                <div>
+                    <span>{{ resource.age_range }}</span>
                     {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
-                        <span class="badge me-2"
-                              style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+                        <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
                     {% else %}
-                        <span class="badge me-2"
-                              style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+                        <span style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
                     {% endif %}
                     {% if request.user.is_authenticated and request.user.is_staff %}
-                        <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
+                        <span>Feature slot: {{ resource.feature_slot }}</span>
                     {% endif %}
                 </div>
-                <div class="text-body-secondary my-2">
+                <div>
                     <p>{{ resource.card_description }}</p>
                 </div>
-                <div class="d-flex flex-row justify-content-between align-items-end mt-2">
-                    <p class="card-text m-1"><small class="text-muted">1 credit</small></p>
+                <div>
+                    <p><small class="text-muted">1 credit</small></p>
 
                         {% if resource.in_cart %}
                         <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
                             {% csrf_token %}
-                            <button type="submit" class="btn btn-success fs-6 px-2 py-0" disabled>In basket</button>
+                            <button type="submit">In basket</button>
                         </form>
                         {% else %}
                         <form action="{% url 'payments:add_to_basket' resource.id %}" method="POST">
                             {% csrf_token %}
-                            <button type="submit" class="btn btn-success fs-6 px-2 py-0">Add to basket</button>
+                            <button type="submit">Add to basket</button>
                         </form>
                         {% endif %}
-
-
                 </div>
             </div>
         </div>
         {% if request.user.is_authenticated and request.user.is_staff %}
-        <div class="card-footer">
-            <a href="{% url 'resources:resource_update_metadata' resource.id %}"
-                   class="btn btn-outline-primary btn-sm">Edit</a>
-                <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
-                   class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
-                <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
-                   class="btn btn-outline-primary btn-sm">Add PDFs</a>
+        <div>
+            <a href="{% url 'resources:resource_update_metadata' resource.id %}">Edit</a>
+                <a href="{% url 'resources:resource_update_thumbnails' resource.id %}">Edit Feature Images</a>
+                <a href="{% url 'resources:resource_update_pdfs' resource.id %}">Add PDFs</a>
             </div>
         {% endif %}
     </div>
-
 </div>
diff --git a/alphabetlearning/templates/resources/resource_create.html b/alphabetlearning/templates/resources/resource_create.html
index d428e46..59f9ec3 100644
--- a/alphabetlearning/templates/resources/resource_create.html
+++ b/alphabetlearning/templates/resources/resource_create.html
@@ -7,8 +7,8 @@
 {#    <link rel="stylesheet" href="{% static 'css/forms.css' %}">#}
 {#    {% endblock %}#}
 {% block content %}
-  <div class="row d-flex justify-content-center">
-    <div class="col bg-light mt-lg-4 p-4 border border-success border-opacity-25 rounded">
+  <div>
+    <div>
       <h2>Upload a new resource</h2>
       <p>{% lorem %}</p>
       <form action="{% url 'resources:create_resource' %}"
diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html
index 9ea9177..bb32d90 100644
--- a/alphabetlearning/templates/resources/resource_list.html
+++ b/alphabetlearning/templates/resources/resource_list.html
@@ -2,109 +2,110 @@
 {% load static %}
 {% load markdown_extras %}
 {% block title %}
-    Alphabet Learning - Resource List
+Alphabet Learning - Resource List
 {% endblock title %}
 {% block content %}
-
+<div class="container">
     <div>
         {% include "resources/admin_bar.html" %}
     </div>
 
     {# featured resources #}
     {% if featured_resources %}
-        <div>
-            <h1>Featured resources</h1>
-        </div>
+    <div>
+        <h1>Featured resources</h1>
+    </div>
 
-        <div>
+    <div class="featured-container">
         {% for featured_resource in featured_resources %}
-            {% if featured_resources|length == 1 %}
-                <div>
+        {% if featured_resources|length == 1 %}
+        <div>
             {% elif featured_resources|length == 2 %}
+            <div>
+                {% elif featured_resources|length == 3 %}
                 <div>
-            {% elif featured_resources|length == 3 %}
-                <div>
+                    {% endif %}
+                    {% include "resources/resource_card_featured.html" with resource=featured_resource %}
+                </div>
+                {% endfor %}
+            </div>
+            {% else %}
+            <p>There are no featured resources</p>
             {% endif %}
-        {% include "resources/resource_card_featured.html" with resource=featured_resource %}
-        </div>
-        {% endfor %}
-    </div>
-    {% else %}
-        <p>There are no featured resources</p>
-    {% endif %}
 
-    {# standard resources #}
-    <div>
-        <div>
-            <h1>Standard resources</h1>
-        </div>
-    </div>
+            {# standard resources #}
+            <div>
+                <div>
+                    <h1>Standard resources</h1>
+                </div>
+            </div>
 
-    <!-- Tabbed navigation bar for filtering -->
-    <ul id="resourceTabs" role="tablist">
-        <li>
-            <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
-        </li>
-        {% for category in categories %}
-            <li>
-                <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
-                   href="?category={{ category.name }}">{{ category.name|title }}</a>
-            </li>
-        {% endfor %}
-    </ul>
+            <!-- Tabbed navigation bar for filtering -->
+            <ul id="resourceTabs" role="tablist">
+                <li>
+                    <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
+                </li>
+                {% for category in categories %}
+                <li>
+                    <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
+                       href="?category={{ category.name }}">{{ category.name|title }}</a>
+                </li>
+                {% endfor %}
+            </ul>
 
 
-    <div>
-        {% for resource in page_obj.object_list %}
-            <div data-type="{{ resource.main_resource_category_name }}">
-                {% include "resources/resource_card_standard.html" with resource=resource %}
+            <div>
+                {% for resource in page_obj.object_list %}
+                <div data-type="{{ resource.main_resource_category_name }}">
+                    {% include "resources/resource_card_standard.html" with resource=resource %}
+                </div>
+                {% endfor %}
             </div>
-        {% endfor %}
-    </div>
 
-    {# Pagination #}
-    {% if page_obj.has_other_pages %}
-        <div>
+            {# Pagination #}
+            {% if page_obj.has_other_pages %}
             <div>
-                <nav aria-label="Page navigation">
-                    <ul>
-                        {% if page_obj.has_previous %}
+                <div>
+                    <nav aria-label="Page navigation">
+                        <ul>
+                            {% if page_obj.has_previous %}
                             <li>
                                 <a href="?page=
-                                        {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
+                                         {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
                             </li>
-                        {% else %}
+                            {% else %}
                             <li>
                                 <span>Previous</span>
                             </li>
-                        {% endif %}
+                            {% endif %}
 
-                        {% for page_num in page_obj.paginator.page_range %}
+                            {% for page_num in page_obj.paginator.page_range %}
                             {% if page_obj.number == page_num %}
-                                <li>
-                                    <span class="page-link">{{ page_num }}</span>
-                                </li>
+                            <li>
+                                <span class="page-link">{{ page_num }}</span>
+                            </li>
                             {% else %}
-                                <li>
-                                    <a href="?page=
-                                            {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
-                                </li>
+                            <li>
+                                <a href="?page=
+                                         {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
+                            </li>
                             {% endif %}
-                        {% endfor %}
+                            {% endfor %}
 
-                        {% if page_obj.has_next %}
+                            {% if page_obj.has_next %}
                             <li>
                                 <a href="?page=
-                                        {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
+                                         {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
                             </li>
-                        {% else %}
+                            {% else %}
                             <li>
                                 <span class="page-link">Next</span>
                             </li>
-                        {% endif %}
-                    </ul>
-                </nav>
+                            {% endif %}
+                        </ul>
+                    </nav>
+                </div>
             </div>
+            {% endif %}
+            {% endblock content %}
         </div>
-    {% endif %}
-{% endblock content %}
-- 
cgit v1.2.3