Adds placeholder and more styling to list page

2 files changed, 91 insertions, 40 deletions

diff --git a/pyblackbird_cc/static/images/placeholder.png b/pyblackbird_cc/static/images/placeholder.png
new file mode 100644
index 0000000..3d2e5d8
--- /dev/null
+++ b/pyblackbird_cc/static/images/placeholder.png
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index c978b31..e8f2a5c 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 
+{% load static %}
+
 {% block title %}
   Joanna Lemon Resources - Resource List
 {% endblock title %}
 {% block content %}
-
   <div class="container">
-
     <div class="row">
       <div class="col">
         <div class="d-flex flex-row justify-content-between">
@@ -14,9 +14,7 @@
             <div>
               <a class="btn btn-primary" href="{% url 'resources:create_resource' %} ">Add a new resource</a>
             </div>
-            <div>
-              Logged in as {{ request.user.email }}
-            </div>
+            <div>Logged in as {{ request.user.email }}</div>
             <div>
               <form action="{% url 'account_logout' %}" method="post">
                 {% csrf_token %}
@@ -27,44 +25,97 @@
         </div>
       </div>
     </div>
-
-
-    <div class="row my-4">
-      <div class="col">
-        {% if resource_list %}
-          <div class="d-flex flex-row justify-content-between flex-wrap">
-            {% for resource in resource_list %}
-              <div class="card mx-2 mt-2" style="width: 22rem;">
-                <div class="card-header position-relative">
-                  <div class="text-success">
-                    Featured
-                    <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">£5.99!</span> -->
-                  </div>
-                </div>
-                <img class="card-img-top" src="{{ resource.thumbnail_urls|first }}"
-                     alt="{{ resource.thumbnail_filename }}">
-                <div class="card-body">
-                  <h5 class="card-title">{{ resource.name }}</h5>
-                  <div class="d-flex flex-row justify-content-start align-content-center">
-                    <div>
-                      <span class="badge text-bg-secondary me-2">{{ resource.main_resource_category_name }}</span>
+    <div class="row">
+      <div class="col my-3 text-center rounded p-5">
+        <h1 class="display-2">High quality educational resources</h1>
+        <div class="row">
+          <div class="col my-5 text-center">
+            <h2 class="display-5">Stuff and intro text</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col mb-5">
+          <div class="d-flex justify-content-between align-content-center">
+            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
+            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
+            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3 py-3 m-4 bg-body-tertiary border border-1 rounded">
+          <h5>Welcome!</h5>
+          <p>
+            I love to make clear and colourful resources and can't resist using rainbow colours
+            which so often help make learning visually clearer. I'd love to know what you think of
+            what you download, don't hesitate to let me know if you have any suggestions or requests...
+            I am also available to tutor younger learners online via Sherpa!
+          </p>
+        </div>
+        <div class="col py-3 m-4 bg-body-tertiary border border-1 rounded">
+          <h2 class="text-success">Subscriptions available now!</h2>
+          <p>
+            I love to make clear and colourful resources and can't resist using rainbow colours
+            which so often help make learning visually clearer. I'd love to know what you think of
+            what you download, don't hesitate to let me know if you have any suggestions or requests...
+            I am also available to tutor younger learners online via Sherpa!
+          </p>
+          <h4>What is available?</h4>
+          <ul class="list-group">
+            <li class="list-group-item">Full access to all resources (over 250 resources)</li>
+            <li class="list-group-item">Customised resources upon request</li>
+            <li class="list-group-item">New resources coming online all the time</li>
+          </ul>
+          <a href="#" class="btn btn-primary my-3">Subscribe now</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col my-5 text-center">
+          <h1 class="display-2">Featured resources</h1>
+        </div>
+        <div class="row">
+          <div class="col my-5 text-center">
+            <h2 class="display-5">These are my latest resources. They are great!</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row my-4">
+        <div class="col">
+          {% if resource_list %}
+            <div class="d-flex flex-row justify-content-between flex-wrap">
+              {% for resource in resource_list %}
+                <div class="card mx-2 mt-2" style="width: 22rem;">
+                  <div class="card-header position-relative">
+                    <div class="text-success">
+                      Featured
+                      <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">£5.99!</span> -->
                     </div>
-                    <div>
-                      <span class="badge text-bg-success me-2">{{ resource.age_range }}</span>
+                  </div>
+                  <img class="card-img-top"
+                       src="{{ resource.thumbnail_urls|first }}"
+                       alt="{{ resource.thumbnail_filename }}" />
+                  <div class="card-body">
+                    <h5 class="card-title">{{ resource.name }}</h5>
+                    <div class="d-flex flex-row justify-content-start align-content-center">
+                      <div>
+                        <span class="badge text-bg-secondary me-2">{{ resource.main_resource_category_name }}</span>
+                      </div>
+                      <div>
+                        <span class="badge text-bg-success me-2">{{ resource.age_range }}</span>
+                      </div>
                     </div>
+                    <p class="card-text my-3">{{ resource.description }}</p>
+                    <a href="{% url 'resources:resource_detail' resource_id=resource.id %}"
+                       class="btn btn-secondary">More...</a>
                   </div>
-                  <p class="card-text my-3">{{ resource.description }}</p>
-                  <a href="{% url 'resources:resource_detail' resource_id=resource.id %}"
-                     class="btn btn-secondary">More...</a>
                 </div>
-              </div>
-
-            {% endfor %}
-          </div>
-        {% else %}
-          <p>There are no resources</p>
-        {% endif %}
+              {% endfor %}
+            </div>
+          {% else %}
+            <p>There are no resources</p>
+          {% endif %}
+        </div>
       </div>
     </div>
-  </div>
-{% endblock content %}
+  {% endblock content %}