From 2fc2f9f2103bfb82a2df17b7d1ddc843244a9287 Mon Sep 17 00:00:00 2001
From: smagdali <stefan@whitelabel.org>
Date: Thu, 18 Jun 2026 10:06:40 +0100
Subject: [PATCH] Show talk and workshop descriptions inline on the line-up,
 behind a toggle

The line-up lists each item's speaker and title but hides the description
behind a click into the detail page. Add an opt-in "Show descriptions"
toggle that reveals every description inline, so the whole programme can be
read on one page.

Descriptions are shown by default for users without JavaScript; with
JavaScript they are collapsed and the toggle (remembered per browser)
controls them, keeping the default line-up compact. Each item becomes a
container div with the title as the link, because descriptions contain links
and the item can no longer be wrapped in a single anchor; the favourite
button stays inside the form. The per-user shuffle in line_up() is unchanged.
---
 css/_lineup.scss                              | 25 ++++++++-----------
 js/line-up.js                                 | 21 ++++++++++++++++
 templates/schedule/_schedule_item_lister.html | 17 +++++++++----
 templates/schedule/line-up.html               |  1 +
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/css/_lineup.scss b/css/_lineup.scss
index 5e2965023..7717b5183 100644
--- a/css/_lineup.scss
+++ b/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;
diff --git a/js/line-up.js b/js/line-up.js
index 92f3ced95..fb9c0ae7b 100644
--- a/js/line-up.js
+++ b/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();
+    });
+  }
 });
diff --git a/templates/schedule/_schedule_item_lister.html b/templates/schedule/_schedule_item_lister.html
index e190b5707..d8904fa12 100644
--- a/templates/schedule/_schedule_item_lister.html
+++ b/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>
diff --git a/templates/schedule/line-up.html b/templates/schedule/line-up.html
index 63c359b09..5ffaf9ce4 100644
--- a/templates/schedule/line-up.html
+++ b/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>