Drop shadows on the featured and standard resource panels

5 files changed, 26 insertions, 22 deletions

diff --git a/pyblackbird_cc/static/css/project.css b/pyblackbird_cc/static/css/project.css
index dca4100..8586e51 100644
--- a/pyblackbird_cc/static/css/project.css
+++ b/pyblackbird_cc/static/css/project.css
@@ -32,6 +32,15 @@
 /*  background-color: #eee;*/
 /*}*/
 
+/* Change the colour of the box shadow */
+.my-card-shadow-sm {
+  box-shadow: 0 0.25rem 0.5rem rgba(100, 100, 100, 0.1);
+}
+
+.my-card-shadow-lg {
+  box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
+}
+
 h1 {
     /*color: #657c76;*/
     font-size: 2.0rem;
diff --git a/pyblackbird_cc/templates/resources/admin_bar.html b/pyblackbird_cc/templates/resources/admin_bar.html
index 5bddde6..ddb8e00 100644
--- a/pyblackbird_cc/templates/resources/admin_bar.html
+++ b/pyblackbird_cc/templates/resources/admin_bar.html
@@ -1,28 +1,21 @@
   {#  admin block #}
   {% if request.user.is_authenticated and request.user.is_staff %}
-    <div class="row bg-white p-4 rounded border border-success border-opacity-25">
-      <h5 class="text-decoration-underline">Admin bar</h5>
+    <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>
       <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">
-        <div class="d-flex flex-row flex-wrap justify-content-between">
-          <div>
-            <a class="btn btn-primary my-md-2"
-               href="{% url 'resources:create_resource' %} ">Add a new resource</a>
-          </div>
-          <div class="bg-danger p-2 my-2 text-dark bg-white border border-1 border-danger">
-            Logged in as
-            <strong>{{ request.user.email }}</strong>
-          </div>
-          <div class="my-md-2">
-            <form action="{% url 'account_logout' %}" method="post">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-primary">Log out</button>
-            </form>
-          </div>
+      <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">
+          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>
+        </form>
       </div>
     </div>
   {% endif %}
diff --git a/pyblackbird_cc/templates/resources/resource_card_featured.html b/pyblackbird_cc/templates/resources/resource_card_featured.html
index 2d11ee8..e920cef 100644
--- a/pyblackbird_cc/templates/resources/resource_card_featured.html
+++ b/pyblackbird_cc/templates/resources/resource_card_featured.html
@@ -1,7 +1,7 @@
 {% load static %}
 {% load markdown_extras %}
 
-<div class="card mx-2 mt-2 shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 3px;">
+<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 }}">
diff --git a/pyblackbird_cc/templates/resources/resource_card_standard.html b/pyblackbird_cc/templates/resources/resource_card_standard.html
index 8dc6fba..2b280a9 100644
--- a/pyblackbird_cc/templates/resources/resource_card_standard.html
+++ b/pyblackbird_cc/templates/resources/resource_card_standard.html
@@ -4,7 +4,7 @@
 <!-- Card 1 -->
 <div class="col-md-6 mb-3">
 
-    <div class="card mx-2 mt-2 shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;">
+    <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')">
         <div class="row g-0">
             <div class="col-4">
                 <img class="img-fluid rounded-start"
diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index fce5f60..cfe5ba3 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -6,7 +6,9 @@
 {% endblock title %}
 {% block content %}
 
-    {% include "resources/admin_bar.html" %}
+    <div class="row my-4">
+            {% include "resources/admin_bar.html" %}
+    </div>
 
     {# featured resources #}
     {% if featured_resources %}
@@ -41,7 +43,7 @@
 
     <div class="d-flex flex-row flex-wrap">
         {% for resource in resource_list %}
-                {% include "resources/resource_card_standard.html" with resource=resource %}
+            {% include "resources/resource_card_standard.html" with resource=resource %}
         {% endfor %}
     </div>
 {% else %}