From d27af14b847f5362b0ed81bcedfe99be18bc2912 Mon Sep 17 00:00:00 2001
From: Christopher Neugebauer <chrisjrn@gmail.com>
Date: Sun, 15 Oct 2017 09:01:02 -0700
Subject: [PATCH] Adds speakers to the home page

---
 pinaxcon/templates/static_pages/homepage.html | 43 +++++++++++++++++--
 static/scss/custom.scss                       | 22 ++++++++++
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/pinaxcon/templates/static_pages/homepage.html b/pinaxcon/templates/static_pages/homepage.html
index 593fd4b..1f5836a 100644
--- a/pinaxcon/templates/static_pages/homepage.html
+++ b/pinaxcon/templates/static_pages/homepage.html
@@ -2,6 +2,9 @@
 
 {% load i18n %}
 {% load staticfiles %}
+{% load thumbnail %}
+{% load sponsorship_tags %}
+{% load schedule_tags %}
 
 {% block head_title %}Welcome{% endblock %}
 
@@ -71,6 +74,43 @@
     </div>
   </div>
 
+  <div class="jumbotron homepage-block white">
+    <div class="container homepage-block-content">
+      <h1>Speakers</h1>
+
+      <div class="row speaker-list">
+      {% speakers as speakers %}
+      {% for speaker in speakers %}
+          <div class="speaker" >
+            <div class="image-alignment">
+              <div class="circle" style="border: 0;">
+                  <div class="fill" style="background-image: url('{% thumbnail speaker.photo '600x600' %}');"></div>
+              </div>
+            </div>
+            {% for presentation in speaker.presentations.all %}
+              <a href="{% url "schedule_presentation_detail" presentation.id %}">
+              <h4>{{ speaker.conferencespeaker.name }}</h4>
+                <span class="presentation-title">{{ presentation.title }}</span>
+              </a>
+            {% endfor %}
+          </div>
+      {% endfor %}
+      </div>
+
+    </div>
+
+    <div class="homepage-block-footer full-width">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4">
+            <a class="btn btn-lg btn-primary btn-shadow" href="/about/petaluma">See our program</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
   <div class="jumbotron homepage-block dark">
     <div class="homepage-block-bg mystic-background"></div>
     <div class="container homepage-block-content">
@@ -108,9 +148,6 @@
     <div class="container homepage-block-content">
       <h1>Sponsors</h1>
 
-      {% load sponsorship_tags %}
-      {% load thumbnail %}
-
       {% sponsor_levels as levels %}
 
       <div class="row sponsor-list">
diff --git a/static/scss/custom.scss b/static/scss/custom.scss
index 7c00452..74ce750 100644
--- a/static/scss/custom.scss
+++ b/static/scss/custom.scss
@@ -154,6 +154,28 @@ $homepage-block-min-height: 480px;
     }
 
   }
+
+  .speaker {
+    @include make-xs-column(6);
+    @include make-sm-column(4);
+    @include make-md-column(3);
+    max-width: 600px;
+    min-height: 22em;
+    margin-bottom: 2em;
+    text-align: center;
+    vertical-align: middle;
+
+    .image-alignment {
+      width: 80%;
+      height: 80%;
+      margin: auto auto;
+      // Center the icon horizontally and vertically
+    }
+  }
+
+  .speaker-list {
+    margin-top: 2em;
+  }
 }