Show talk and workshop descriptions inline on the schedule page

css/_lineup.scss

@@ -9,24 +9,21 @@
     visibility: visible;
   }
   .event {
-    text-decoration: none;
-  }
-  .event > div {
-    padding: 10px 4px;
+    padding: 10px 4px 14px;
     border-bottom: 1px solid rgba(100, 100, 100, 0.4);
-    padding-top: 14px;
   }
-  .event:first-child > div {
+  .event:first-child {
     border-top: 1px solid rgba(100, 100, 100, 0.4);
   }
-  .event:hover,
-  .event:focus,
-  .event:active,
-  .event:hover div,
-  .event:focus div,
-  .event:active div {
-    background-color: #33071c;
-    color: inherit;
+  .schedule-item-description {
+    max-width: 70ch;
+    margin: 0.4em 0 0;
+  }
+  &.descriptions-collapsed .schedule-item-description {
+    display: none;
+  }
+  [data-toggle-descriptions] {
+    margin-bottom: 10px;
   }
   h2.event-type {
     padding-top: 40px;

js/line-up.js

@@ -18,4 +18,25 @@ $(function () {
     btn.classList.toggle("favourite-button-faved", result.is_favourite);
     btn.classList.toggle("favourite-button-unfaved", !result.is_favourite);
   });
+
+  // Descriptions show by default for users without JavaScript. With JS we
+  // collapse them and offer a toggle, remembered per browser.
+  const STORAGE_KEY = "line-up-descriptions";
+  const $lineup = $(".line-up");
+  const $toggle = $("[data-toggle-descriptions]");
+  if ($toggle.length) {
+    let expanded = localStorage.getItem(STORAGE_KEY) === "expanded";
+    const render = () => {
+      $lineup.toggleClass("descriptions-collapsed", !expanded);
+      $toggle.attr("aria-pressed", expanded ? "true" : "false");
+      $toggle.text(expanded ? "Hide descriptions" : "Show descriptions");
+    };
+    $toggle.prop("hidden", false);
+    render();
+    $toggle.on("click", () => {
+      expanded = !expanded;
+      localStorage.setItem(STORAGE_KEY, expanded ? "expanded" : "collapsed");
+      render();
+    });
+  }
 });

templates/schedule/_schedule_item_lister.html

@@ -15,8 +15,8 @@ <h2 class="event-type" id="{{ type_info.type }}">{{ type_info.human_type | title
             <form method="post" action="{{url_for(".add_favourite")}}">
             <div>
                 {% for schedule_item in grouped_schedule_items[type_info.type] %}
-                <a href="{{ url_for('.item', year=event_year, schedule_item_id=schedule_item.id, slug=schedule_item.slug) }}"
-                   class="event schedule-item" id="schedule-item-{{ schedule_item.id }}">
+                {% set item_url = url_for('.item', year=event_year, schedule_item_id=schedule_item.id, slug=schedule_item.slug) %}
+                <div class="event schedule-item" id="schedule-item-{{ schedule_item.id }}">
                 <div class="row">
                     <div class="col-xs-10">
                         {% if schedule_item.names %}
@@ -25,11 +25,11 @@ <h2 class="event-type" id="{{ type_info.type }}">{{ type_info.human_type | title
                             {{ schedule_item_icons(schedule_item) }}
                         </div>
                         <div>
-                            {{ schedule_item.title }}
+                            <a href="{{ item_url }}">{{ schedule_item.title }}</a>
                         </div>
                         {% else %}
                         <div>
-                            <b>{{ schedule_item.title }}</b>
+                            <b><a href="{{ item_url }}">{{ schedule_item.title }}</a></b>
                             {{ schedule_item_icons(schedule_item) }}
                         </div>
                         <div>
@@ -46,7 +46,14 @@ <h2 class="event-type" id="{{ type_info.type }}">{{ type_info.human_type | title
                     </div>
                     {% endif %}
                 </div>
-                </a>
+                {% if schedule_item.description %}
+                <div class="row">
+                    <div class="col-xs-12">
+                        <p class="multiline schedule-item-description">{{ schedule_item.description | urlize }}</p>
+                    </div>
+                </div>
+                {% endif %}
+                </div>
                 {% endfor %}
             </div>
             </form>

templates/schedule/line-up.html

@@ -43,6 +43,7 @@ <h2>Line-up</h2>
 </div>
 
 <div class="line-up">
+<button type="button" class="btn btn-primary" data-toggle-descriptions hidden aria-pressed="false">Show descriptions</button>
 {{ list_schedule_items(grouped_schedule_items, ordered_type_infos, jump_links=True) }}
 </div>