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/resource_list.html         | 135 +++++++++++----------
 1 file changed, 68 insertions(+), 67 deletions(-)

(limited to 'alphabetlearning/templates/resources/resource_list.html')

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