Responsive feature cards on index page

- Width is responsive
- Breakpoints allow for stacking at smaller ones

1 files changed, 82 insertions, 75 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 34c272f..2f137e0 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -39,18 +39,84 @@
 
   {#  featured resources#}
   <div class="row my-4">
-    <div class="col">
-      {% if featured_resources %}
-        <div class="row my-4 text-center">
-          <div class="col">
-            <h5 class="display-6">Featured resources</h5>
+  <div class="col">
+  {% if featured_resources %}
+    <div class="row my-4 text-center">
+      <div class="col">
+        <h5 class="display-6">Featured resources</h5>
+      </div>
+    </div>
+    <div class="d-flex flex-row justify-content-between flex-wrap">
+    {% for resource in featured_resources %}
+      {% if featured_resources|length == 1 %}
+        <div class="col-lg-12 col-md-12 col-sm-12 mb-4">
+      {% elif featured_resources|length == 2 %}
+        <div class="col-lg-6 col-md-6 col-sm-12 mb-4">
+      {% else %}
+        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+      {% endif %}
+    <div class="card mx-2 mt-2 shadow-sm h-100"
+         style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 5px;">
+      <img class="card-img-top"
+           src="{{ resource.thumbnail_urls|first }}"
+           alt="{{ resource.thumbnail_filename }}"/>
+      <div class="card-body">
+        <h5 class="card-title"><a
+          href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
+        <div class="d-flex flex-row justify-content-start align-content-center">
+          <div>
+            {% 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>
+            {% 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>
+            {% endif %}
           </div>
+          <div>
+            <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+          </div>
+          {% if request.user.is_authenticated and request.user.is_staff %}
+            <div>
+              <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
+            </div>
+          {% endif %}
+        </div>
+        {% if resource.card_description %}
+          <p class="card-text my-3">{{ resource.card_description | markdown | safe }}</p>
+        {% else %}
+          <p class="card-text my-3">{{ resource.description | markdown | safe }}</p>
+        {% endif %}
+      </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>
+      {% endif %}
+      </div>
+    </div>
+    </div>
+    {% endfor %}
+  {% else %}
+    <p>There are no featured resources</p>
+  {% endif %}
+</div>
+</div>
+
+{#  standard resources #}
+<div class="d-flex flex-row justify-content-between flex-wrap">
+  <div class="col">
+    {% if resource_list %}
+      <div class="row my-4 text-center">
+        <div class="col">
+          <h5 class="display-6">Standard resources</h5>
         </div>
-        <div class="d-flex flex-row justify-content-between flex-wrap">
-        {% for resource in featured_resources %}
-          <!-- <div class="card mx-2 mt-2 shadow-sm ey_literacy_border" style="width: 24rem;"> -->
-          <div class="card mx-2 mt-2 shadow-sm"
-               style="width: 24rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 5px;">
+      </div>
+      <div class="d-flex flex-row justify-content-start flex-wrap">
+        {% for resource in resource_list %}
+          {#              <div class="card mx-4 mt-4 border border-width-1" style="width: 17rem;">#}
+          <div class="card mx-2 mt-2 shadow-sm border-width-1"
+               style="width: 19rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 4px;">
             <img class="card-img-top"
                  src="{{ resource.thumbnail_urls|first }}"
                  alt="{{ resource.thumbnail_filename }}"/>
@@ -70,11 +136,6 @@
                 <div>
                   <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
                 </div>
-                {% if request.user.is_authenticated and request.user.is_staff %}
-                  <div>
-                    <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
-                  </div>
-                {% endif %}
               </div>
               {% if resource.card_description %}
                 <p class="card-text my-3">{{ resource.card_description | markdown | safe }}</p>
@@ -90,65 +151,11 @@
             </div>
           </div>
         {% endfor %}
-      {% else %}
-        <p>There are no featured resources</p>
-      {% endif %}
       </div>
-    </div>
-
-    {#  standard resources #}
-    <div class="d-flex flex-row justify-content-between flex-wrap">
-      <div class="col">
-        {% if resource_list %}
-          <div class="row my-4 text-center">
-            <div class="col">
-              <h5 class="display-6">Standard resources</h5>
-            </div>
-          </div>
-          <div class="d-flex flex-row justify-content-start flex-wrap">
-            {% for resource in resource_list %}
-              {#              <div class="card mx-4 mt-4 border border-width-1" style="width: 17rem;">#}
-              <div class="card mx-2 mt-2 shadow-sm border-width-1"
-                   style="width: 19rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 4px;">
-                <img class="card-img-top"
-                     src="{{ resource.thumbnail_urls|first }}"
-                     alt="{{ resource.thumbnail_filename }}"/>
-                <div class="card-body">
-                  <h5 class="card-title"><a
-                    href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
-                  <div class="d-flex flex-row justify-content-start align-content-center">
-                    <div>
-                      {% 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>
-                      {% 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>
-                      {% endif %}
-                    </div>
-                    <div>
-                      <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
-                    </div>
-                  </div>
-                  {% if resource.card_description %}
-                    <p class="card-text my-3">{{ resource.card_description | markdown | safe }}</p>
-                  {% else %}
-                    <p class="card-text my-3">{{ resource.description | markdown | safe }}</p>
-                  {% endif %}
-                </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>
-                {% endif %}
-                </div>
-              </div>
-            {% endfor %}
-          </div>
-          </div>
-        {% else %}
-          <p>There are no resources</p>
-        {% endif %}
-    </div>
-  </div>
+      </div>
+    {% else %}
+      <p>There are no resources</p>
+    {% endif %}
+</div>
+</div>
 {% endblock content %}