Improve talk detail view

pinaxcon/templates/symposion/schedule/presentation_detail.html

@@ -1,78 +1,57 @@
 {% extends "site_base.html" %}
 
 {% load lca2018_tags %}
+{% load lca2019_tags %}
 {% load sitetree %}
 {% load staticfiles %}
 {% load thumbnail %}
 
 {% block head_title %}Presentation: {{ presentation.title }}{% endblock %}
 {% block body_class %}text-primary{% endblock body_class %}
-{% block header_paragraph %}
-  <p>
-    Presented by
-    {% for speaker in presentation.speakers %}
-      <a href="{% url "speaker_profile" speaker.pk %}">{{ speaker }}</a>{% if not forloop.last %}, {% endif %}
-    {% endfor %}
-  <br />
-  {% if presentation.slot %}
-    {{ presentation.slot.day.date|date:"l" }}
-    {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }} in {{ presentation.slot.rooms.0 }}
-    <br />
-  {% endif %}
-  {% if presentation.proposal.get_target_audience_display %}
-    <strong>Target audience:</strong>
-    {{ presentation.proposal.get_target_audience_display }}
-  {% endif %}
-{% endblock %}
+
+{% block main_class %}container-fluid{% endblock %}
 
 {% block content %}
   <div class="row">
-    <div class="col-md-1"></div>
-    <div class="col-12 col-md-10">
-      <h1 class="mb-4 display-4">{{ presentation.title }}</h1>
 
-      <h2 class="mt-4 pt-4">Abstract</h2>
-      <div class="abstract pb-4"><p>{{ presentation.abstract_html|urlize|safe }}</p></div>
+    <div class="col-12 col-lg-10 offset-lg-1">
+      <h1 class="mb-4" style="max-width: 800px;">{{ presentation.title }}</h1>
+      <p>
+        <strong>{{ presentation.slot.rooms.0 }} | {{ presentation.slot.day.date|date:"D d M" }} | {{ presentation.slot.start}}&ndash;{{ presentation.slot.end }}</strong>
+      </p>
+      <hr class="green">
+    </div>
 
-      <h2 class="mt-4">Presented by</h2>
+    <div class="col-12 col-lg-3 offset-lg-1 order-2 order-md-1 px-4" >
+      <p class="pt-4"><strong>Presented by</strong></p>
       <ul class="list-unstyled">
-      {% for speaker in presentation.speakers %}
-      {# {% speaker_photo speaker 512 as speaker_photo_url %} #}
-      {# {% include "_right_floating_image.html" with image_url=speaker_photo_url %} #}
-        {# <p><strong><a href="{% url "speaker_profile" speaker.pk %}">{{ speaker }}</a></strong><br /> #}
-        <p><strong>{{ speaker }}</strong><br />
-        <div class="bio">{{ speaker.biography_html|safe}}</div></p>
-      {% endfor %}
+
+        {% for speaker in presentation.speakers %}
+        <li class="mb-4 pb-2">
+          {% speaker_photo speaker 120 as speaker_photo_url %}
+          <img src="{{ speaker_photo_url }}" class="rounded-circle">
+          <p>
+            <strong>{{ speaker }}</strong><br />
+            {% if speaker.twitter_username %}
+              <a href="https://twitter.com/{{ speaker.twitter_username }}">{{ speaker.twitter_username }}</a><br />
+            {% endif %}
+            {% if speaker.homepage %}
+              <a href="{{ speaker.homepage }}">{{ speaker.homepage }}</a>
+            {% endif %}
+          </p>
+          <div class="bio">{{ speaker.biography_html|safe}}</div>
+          </p>
+        </li>
+        {% endfor %}
+
       </ul>
     </div>
+
+    <div class="col-12 col-lg-7 order-1 order-lg-2 px-4 talk-abstract">
+      <h4 class="mt-4">Abstract</h4>
+      <div class="abstract pb-4"><p>{{ presentation.abstract_html|clean_text|urlize|safe }}</p></div>
+    </div>
   {% if presentation.unpublish %}
     <p><strong>Presentation not published.</strong></p>
   {% endif %}
-
-
-{% comment %}
-... leave here for later
-  <div class="presenters">
-    <h3>
-
-
-        {% if speaker.homepage or speaker.twitter_username %}
-          <div class="btn-group">
-            {% if speaker.homepage %}
-              <a href="{{ speaker.homepage}}" class="btn-svg" title="Homepage">
-                {% include "cms_pages/home_page_blocks/btn_generic_link.html" %}
-              </a>
-            {% endif %}
-            {% if speaker.twitter_username %}
-              <a href="https://twitter.com/{{ speaker.twitter_username }}" class="btn-svg" title="{{ speaker}} on twitter">
-                {% include "cms_pages/home_page_blocks/btn_twitter.html" %}
-              </a>
-            {% endif %}
-          </div>
-          {% endif %}
-        </h3>
-
-    {% endfor %}
-  </div>
-{% endcomment %}
 {% endblock %}

pinaxcon/templatetags/lca2018_tags.py

@@ -54,7 +54,7 @@ def speaker_photo(context, speaker, size):
         md5sum = hashlib.md5(email.strip().lower()).hexdigest()
         fallback_image = ("https://linux.conf.au/site_media/static/lca2017"
                           "/images/speaker-fallback-devil.jpg")
-        url = "https://secure.gravatar.com/avatar/%s?s=%d&d=%s" % (md5sum, size, fallback_image)
+        url = "https://secure.gravatar.com/avatar/%s?s=%d&d=%s" % (md5sum, size, "mp")
 
         return url
 

pinaxcon/templatetags/lca2019_tags.py

@@ -1,5 +1,6 @@
 from django import template
 from django.forms import Form
+import re
 
 
 register = template.Library()
@@ -30,3 +31,9 @@ def listlookup(lookup, target):
         return lookup[target]
     except IndexError:
         return ''
+
+
+@register.filter
+def clean_text(txt):
+    # Remove double/triple/+ spaces from `txt` and replace with single space
+    return re.sub(r' {2,}' , ' ', txt)

static/src/scss/app.scss

@@ -415,7 +415,7 @@ hr {
     }
 }
 
-.schedule-header {
+.schedule-header, .sponsor-header {
     h1 {
         text-transform: uppercase;
         margin-bottom: 3rem;
@@ -667,3 +667,15 @@ hr {
     font-weight: 600;
     font-size: 1.5rem;
 }
+
+hr.green {
+    border-color: $primary;
+    background-color: $primary;
+    color: $primary;
+}
+
+div.talk-abstract {
+    @include media-breakpoint-up(lg) {
+        border-left: 1px solid #0F7C11 !important;
+    }
+}