wip: have featured cards lined up on resource index page

author: Matthew Lemon <y@yulqen.org> 2024-10-21 20:51:42 +0100
committer: Matthew Lemon <y@yulqen.org> 2024-10-21 20:51:42 +0100
commit: 886aca24778b72edd89726c90783f8c32438db2c (patch)
tree: ecc6fceb1633b8b102b657a775e96a04436084fb
parent: 1a34a9f78641d868f7445c3f4cabbef7c563b78c (diff)
7 files changed, 189 insertions, 181 deletions
diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index b782ae2..3832efb 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,10 +1,19 @@
 
 * {
     box-sizing: border-box;
+    background-color: #F1F3F6;
     margin: 0;
     padding: 0;
     font-size: 18px;
-    font-family: "Ubuntu Mono", monospace;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3 {
+    color: #3d3d3d;
+}
+
+h1 {
+    font-size: 32px;
 }
 
 html, body {
@@ -12,7 +21,7 @@ html, body {
 }
 
 header, nav, main, footer {
-    padding: 2px calc((100% - 800px) / 2) 0;
+    padding: 2px calc((100% - 1200px) / 2) 0;
 }
 
 main {
@@ -24,48 +33,70 @@ main {
 
 body {
     line-height: 1.5;
-    background-color: #F1F3F6;
     color: #34495E;
     overflow-y: scroll;
 }
 
-h1 a {
-    font-size: 36px;
-    font-weight: bold;
-    background-image: url("/static/img/logo.png");
-    background-repeat: no-repeat;
-    background-position: 0px 0px;
-    height: 36px;
-    padding-left: 50px;
-    position: relative;
+a {
+    color: blue;
+}
+
+nav > div > ul > li {
+    display: inline;
+    padding: 1px 2px;
 }
 
-h1 a:hover {
-    text-decoration: none;
-    color: #34495E;
+.featured-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 5px;
 }
 
-h2 {
-    font-size: 22px;
-    margin-bottom: 36px;
-    position: relative;
-    top: -9px;
+.featured-card {
+    border: solid;
+    border-width: 2px;
+    border-radius: 5px;
+    padding: 10px;
+    height: 560px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: stretch;
 }
 
-a {
-    color: blue;
+.featured-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 3px;
+    width: 100%;
+}
+
+.featured-card-description {
+    margin: 10px 0px;
+    line-height: 1.1;
+    font-size: 0.9em;
 }
 
-@font-face {
-  font-family: 'Lato';
-  src: url(../fonts/Lato-Regular.ttf);
+.card-credit {
+    color: green;
+    font-size: 0.9em;
 }
 
-@font-face {
-  font-family: 'Lato-Italic';
-  src: url(../fonts/Lato-Italic.ttf);
+.add-to-basket-button {
+    background-color: green;
+    color: white;
+    padding: 5px;
 }
 
+.add-to-basket-button-disabled {
+    background-color: lightgray;
+    color: black;
+    padding: 3px;
+}
 
 /* Change the colour of the box shadow */
 .my-card-shadow-sm {
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index 4b21f74..a0b2424 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -27,8 +27,6 @@
         {% endblock javascript %}
     </head>
     <body>
-
-
         <header>
             <nav>
                 <a href="{% url "home" %}">
@@ -112,7 +110,7 @@
             {% endfor %}
             {% endif %}
             {% block main %}
-            <div class="main">
+            <div>
                 {% block content %}
                 {% endblock content %}
                 <footer>
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 %}
author	Matthew Lemon <y@yulqen.org>	2024-10-21 20:51:42 +0100
committer	Matthew Lemon <y@yulqen.org>	2024-10-21 20:51:42 +0100
commit	886aca24778b72edd89726c90783f8c32438db2c (patch)
tree	ecc6fceb1633b8b102b657a775e96a04436084fb
parent	1a34a9f78641d868f7445c3f4cabbef7c563b78c (diff)