UI changes on index (see eblow)

- removed Detail button
- put Edit button in a card footer
- Formatting the html

1 files changed, 49 insertions, 44 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 0bac0f8..f82157c 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -44,44 +44,47 @@
           </div>
         </div>
         <div class="d-flex flex-row justify-content-between flex-wrap">
-          {% for resource in featured_resources %}
+        {% 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: 8px;">
-              <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>
-                    <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>
-                  </div>
-                  <div>
-                    <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
-                  </div>
+          <div class="card mx-2 mt-2 shadow-sm"
+               style="width: 24rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 8px;">
+            <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>
+                  <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>
+                </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 %}
-                <a href="{% url 'resources:resource_detail' resource_id=resource.id %}"
-                   class="btn btn-primary">Details</a>
-                {% if request.user.is_authenticated and request.user.is_staff %}
-                  <a href="{% url "resources:resource_update_metadata" resource.id %}"
-                     class="btn btn-outline-primary">Edit</a>
-                {% 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>
-          {% endfor %}
-        {% else %}
-          <p>There are no featured resources</p>
-        {% endif %}
+            {% 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 %}
+      {% else %}
+        <p>There are no featured resources</p>
+      {% endif %}
       </div>
     </div>
     <div class="d-flex flex-row justify-content-between flex-wrap">
@@ -94,17 +97,19 @@
           </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-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: 8px;">
                 <img class="card-img-top"
                      src="{{ resource.thumbnail_urls|first }}"
-                     alt="{{ resource.thumbnail_filename }}" />
+                     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>
+                  <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>
-                      <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 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>
                     </div>
                     <div>
                       <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
@@ -115,20 +120,20 @@
                   {% else %}
                     <p class="card-text my-3">{{ resource.description | markdown | safe }}</p>
                   {% endif %}
-                  <a href="{% url 'resources:resource_detail' resource_id=resource.id %}"
-                     class="btn btn-primary btn-sm">Details</a>
-                  {% if request.user.is_authenticated and request.user.is_staff %}
-                    <a href="{% url "resources:resource_update_metadata" resource.id %}"
-                       class="btn btn-outline-primary btn-sm">Edit</a>
-                  {% 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>
+        {% else %}
+          <p>There are no resources</p>
+        {% endif %}
     </div>
   </div>
 {% endblock content %}