From cba4ab18f900e731877c5ba720e1e3fa561b2927 Mon Sep 17 00:00:00 2001
From: Luca
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 @@
Zeitangaben in {{ .timezone }}
-
+
-
-
-
+
+
+
{{ $lastDate := "" }}
{{ range .timeline }}
-
+
{{ if ne .date $lastDate }}
-
{{ .date }}
+
{{ .date }}
{{ end }}
- {{ .time }}
-
+ {{ .time }}
+
{{ $lastDate = .date }}
{{ end }}
-
+
{{ range $name, $events := .rooms }}
-
-
{{ $name }}
+
{{ end }}
-{{ end }}
{{ end }}