style the schedule page

diff --git a/templates/confreg/schedule.html b/templates/confreg/schedule.html
index 745cfc52d4abaa4b497fd3be64b80fbf6c91b6fc..5860f01028bfb51f0319c9efd12f2ce89f3c6ba4 100644 (file)
--- a/templates/confreg/schedule.html
+++ b/templates/confreg/schedule.html
@@ -37,7 +37,7 @@
     grid-template-rows:
       [rooms] auto
       {% for time, timegroup in day.sessions|groupby("starttime") -%}
-      [time-{{ time|datetimeformat("%H%M") }}] {% if timegroup|length == 1 and not timegroup[0].room %}auto{% else %}{{ timegroup|map(attribute="length")|list|min|int }}fr{% endif %}
+      [time-{{ time|datetimeformat("%H%M") }}] {% if timegroup|length == 1 and not timegroup[0].room %}auto{% else %}1fr{% endif %}
       {% endfor %};
     grid-template-columns:
       [times] auto
@@ -63,7 +63,6 @@
   }
 
   .schedule article {
-    border: 1px solid black;
     border-radius: 0.25rem;
     margin-bottom: 1rem;
     padding: 0.25rem;
@@ -164,11 +163,39 @@
     .session-icons {
       grid-row: icons;
     }
+    .schedule article h1 {
+      font-size: 1.25rem;
+    }
+    p.session-data {
+      font-size: 1rem;
+    }
   }
 
-  i.fa-twitter {
-    opacity: 0.5;
+  .sched-speaker-list {
+    display: flex;
+    flex-flow: row wrap;
+    list-style-type: none;
+    margin: 1rem 0;
+    padding: 0;
+  }
+  .sched-speaker {
+    display: flex;
+    align-items: center;
+  }
+  .sched-speaker-photo {
+    margin-right: 0.5rem;
   }
+  .sched-speaker-photo img {
+    border: none;
+  }
+  .sched-speaker-info a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .sched-person-name {
+    font-size: 120%;
+  }
+
 
   /* make full-day trainings span two rows of the grid */
   {% for t in trainings if t.fullday %}
@@ -229,14 +256,27 @@
       </p>
 
       {% if sess.speakers %}
-      <p class="speakers">
+      <ul class="sched-speaker-list">
         {% for sp in sess.speakers %}
-        <span class="twitter-bind">
-          <a href="speaker/{{ sp.id }}-{{ sp.name|slugify }}/">{{ sp.name }}</a>
-          {%- if sp.twittername %}&nbsp;<a href="https://www.twitter.com/{{ sp.twittername|replace('@', '') }}"><i class="fab fa-twitter fa-sm"></i></a>{% endif %}</span>
-          {%- if not loop.last %},{% endif %}
+        <li>
+          <div class="sched-speaker">
+            <div class="sched-speaker-photo">
+              {% if sp.hasphoto %}
+              <img src="https://pgday.uk/events/speaker/{{ sp.id }}/photo/" height="100px" width="100px" alt="{{ sp.name }} – {{ sp.company }}">
+              {% else %}
+              <img src="{{ mediabase|default("/") }}static/img/people/unknown.svg" height="100px" width="100px" style="object-fit: contain" alt="No photo provided.">
+              {% endif %}
+            </div>
+            <div class="sched-speaker-info">
+              <a href="speaker/{{ sp.id }}-{{ sp.name | slugify }}/"><span class="sched-person-name">{{ sp.name }}</span></a>
+              <br>
+              <span class="person-company lining">{{ sp.company }}</span>
+              {%- if sp.twittername %}<br><a href="https://www.twitter.com/{{ sp.twittername }}"><i class="fab fa-twitter fa-sm"></i>{{ sp.twittername }}</a>{% endif %}
+            </div>
+          </div>
+        </li>
         {% endfor %}
-      </p>
+      </ul>
       {% endif %}
     </div>