From 1dfb3fec41d986bedb5125bfba99c4828efe9284 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Tue, 17 Dec 2019 18:21:06 -0600
Subject: [PATCH] Puts dates on top of cards like in mockup, fixes #151

---
 .../templates/events/webcast_index_page.html  | 35 ++++++++++---------
 project_tier/static/css/_webcast.scss         | 23 ++++++++++++
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/project_tier/events/templates/events/webcast_index_page.html b/project_tier/events/templates/events/webcast_index_page.html
index e2fa71c8..50554114 100644
--- a/project_tier/events/templates/events/webcast_index_page.html
+++ b/project_tier/events/templates/events/webcast_index_page.html
@@ -29,26 +29,27 @@ <h3 id="on-this-page">Agenda</h3>
     <a class="webcast-page big-cta" href="{{ self.registration_link }}" target="_blank">Register Now <i class="fa fa-external-link" aria-hidden="true"></i></a>
   </p>
 
-  <div class="people cards events materials">
+  <div class="webcast people cards events materials">
     {% if events %}
       {% for event in events %}
-        <a class="card" href="{{event.url}}">
+        <div class="outer webcast card">
+          <div class="webcast date">{{event.date|date:"F jS"}}</div>
+          <a class="inner webcast card" href="{{event.url}}">
+            {% if event.image %}
+              {% image event.image fill-280x280-c100 as photo %}
+              <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" class="webcast img-thumbnail" />
+            {% else %}
+              <img class="webcast placeholder img-thumbnail" src="/static/img/placeholder-person.png" width="800px" height="800px" alt="placeholder image"/>
+            {% endif %}
 
-          {% if event.image %}
-            {% image event.image fill-280x280-c100 as photo %}
-            <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" class="webcast img-thumbnail" />
-          {% else %}
-            <img class="webcast placeholder img-thumbnail" src="/static/img/placeholder-person.png" width="800px" height="800px" alt="placeholder image"/>
-          {% endif %}
-
-          <div class="card-divider">
-            <h2>{{ event.speaker_name }}</h2>
-          </div>
-          <div class="card-section">
-            <p><strong>{{event.date|date:"M jS, Y"}}</strong></p>
-            <p><strong>{{ event.title }}</strong></p>
-          </div>
-        </a>
+            <div class="card-divider">
+              <h2>{{ event.speaker_name }}</h2>
+            </div>
+            <div class="card-section">
+              <p><strong>{{ event.title }}</strong></p>
+            </div>
+          </a>
+        </div>
       {% endfor %}
     {% endif %}
   </div>
diff --git a/project_tier/static/css/_webcast.scss b/project_tier/static/css/_webcast.scss
index 2f8955fc..5c479c65 100644
--- a/project_tier/static/css/_webcast.scss
+++ b/project_tier/static/css/_webcast.scss
@@ -51,3 +51,26 @@ img.webcast {
     box-shadow: 0 3px 6px rgba(0,0,0,0.5);
   }
 }
+
+.outer.webcast.card {
+  overflow: visible;
+  border: none;
+  margin-bottom: 50px;
+}
+
+.outer.webcast.card:hover {
+  border: none;
+  box-shadow: none;
+}
+
+.inner.webcast.card {
+  width: 100%;
+  margin-top: 0;
+  margin-left: 0;
+}
+
+.webcast.date {
+  font-family: $header-font-family;
+  font-weight: bold;
+  font-size: 20px;
+}