From cba4ab18f900e731877c5ba720e1e3fa561b2927 Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Mon, 29 Aug 2022 15:27:24 +0200
Subject: [PATCH] Make room names sticky, events are now at most 80% of
 viewport width

---
 assets/_schedule.scss            | 40 +++++++++++++++++------
 layouts/shortcodes/schedule.html | 54 +++++++++++++++++---------------
 2 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/assets/_schedule.scss b/assets/_schedule.scss
index fee04d0..b2b573a 100644
--- a/assets/_schedule.scss
+++ b/assets/_schedule.scss
@@ -4,12 +4,12 @@ $timeslot-height: 0.65em;
 
 .schedule {
 	display: flex;
-	overflow-x: auto;
+	padding-right: 0.5em;
 
 	.schedule-date {
 		height: 0;
 		position: relative;
-		top: calc(-3rem - 1px);
+		top: calc(-5rem - 1px);
 		visibility: hidden;
 		width: 0;
 	}
@@ -55,23 +55,34 @@ $timeslot-height: 0.65em;
 	.schedule-grid {
 		display: grid;
 		grid-auto-rows: $timeslot-height;
-		grid-template-rows: 2em;
+		grid-template-rows: 2rem;
 
 		&.schedule-room {
-			grid-template-columns: 400px;
+			grid-template-columns: 80vw;
+
+			@media screen and (min-width: 501px) {
+				grid-template-columns: 400px;
+			}
 		}
 
 		& > * {
 			grid-column: 1 / 2;
 		}
+
+		& > .schedule-title {
+			background: $color-background;
+			font-size: 1.17rem;
+			margin-bottom: 0;
+			padding-bottom: 0.5em;
+			position: sticky;
+			text-align: center;
+			top: 3rem;
+			z-index: 42;
+		}
 	}
 
 	.schedule-room {
 		margin: 0 0.5em;
-
-		& > .schedule-title {
-			text-align: center;
-		}
 	}
 
 	.schedule-time {
@@ -81,19 +92,28 @@ $timeslot-height: 0.65em;
 
 	.schedule-timeline {
 		background: $color-background;
-		padding-right: 0.5em;
+		padding: 0 0.5em 0 1em;
 		position: sticky;
 		left: 0;
 	}
 }
 
+.schedule-container {
+	display: flex;
+	flex-direction: column;
+	margin-left: -1rem;
+	width: min-content;
+}
+
 .schedule-days {
 	background: $color-background;
 	display: flex;
 	font-size: 1rem;
+	left: 0;
 	line-height: 1;
+	max-width: 100vw;
 	overflow-x: auto;
-	padding: 1em 0;
+	padding: 1em;
 	position: sticky;
 	top: 0;
 	z-index: 42;
diff --git a/layouts/shortcodes/schedule.html b/layouts/shortcodes/schedule.html
index 0ed30ea..10a5788 100644
--- a/layouts/shortcodes/schedule.html
+++ b/layouts/shortcodes/schedule.html
@@ -4,44 +4,46 @@
 	<br>Zeitangaben in <span class="schedule-timezone">{{ .timezone }}</span>
 </p>
 
-<div class="schedule-days">
+<div class="schedule-container">
+	<div class="schedule-days">
 {{ range .days }}
-	<a href="#{{ . }}">{{ . }}</a>&middot;
+		<a href="#{{ . }}">{{ . }}</a>&middot;
 {{ end }}
-	<a href="#">zurück nach oben</a>
-</div>
+		<a href="#">zurück nach oben</a>
+	</div>
 
-<div class="schedule">
-	<div class="schedule-grid schedule-timeline" style="--span: {{ .span }}">
-		<h3 class="schedule-title"></h3>
+	<div class="schedule">
+		<div class="schedule-grid schedule-timeline" style="--span: {{ .span }}">
+			<h3 class="schedule-title"></h3>
 {{ $lastDate := "" }}
 {{ range .timeline }}
-		<div class="schedule-time" style="--start: {{ .start }}">
+			<div class="schedule-time" style="--start: {{ .start }}">
 {{ if ne .date $lastDate }}
-			<div class="schedule-date" id="{{ .date }}">{{ .date }}</div>
+				<div class="schedule-date" id="{{ .date }}">{{ .date }}</div>
 {{ end }}
-			{{ .time }}
-		</div>
+				{{ .time }}
+			</div>
 {{ $lastDate = .date }}
 {{ end }}
-	</div>
+		</div>
 {{ range $name, $events := .rooms }}
-	<div class="schedule-grid schedule-room">
-		<h3 class="schedule-title">{{ $name }}</h3>
+		<div class="schedule-grid schedule-room">
+			<h3 class="schedule-title">{{ $name }}</h3>
 {{ range $events }}
-		<a class="schedule-event" href="{{ .url }}" style="--start: {{ .start }};--end: {{ .end }}" target="_blank">
-			<div class="schedule-event-time">
-				<span>{{ .start_time }}</span>
-				<span>&ndash;</span>
-				<span>{{ .end_time }}</span>
-			</div>
-			<div class="schedule-event-detail">
-				<h4 class="schedule-title" title="{{ .title }}">{{ .title }}</h4>
-				<p class="schedule-speaker" title="{{ .speaker }}">{{ .speaker }}</p>
-			</div>
-		</a>
+			<a class="schedule-event" href="{{ .url }}" style="--start: {{ .start }};--end: {{ .end }}" target="_blank">
+				<div class="schedule-event-time">
+					<span>{{ .start_time }}</span>
+					<span>&ndash;</span>
+					<span>{{ .end_time }}</span>
+				</div>
+				<div class="schedule-event-detail">
+					<h4 class="schedule-title" title="{{ .title }}">{{ .title }}</h4>
+					<p class="schedule-speaker" title="{{ .speaker }}">{{ .speaker }}</p>
+				</div>
+			</a>
+{{ end }}
+		</div>
 {{ end }}
 	</div>
-{{ end }}
 </div>
 {{ end }}