iger
/
www.iger.events
9
1
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Make room names sticky, events are now at most 80% of viewport width
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Luca 2022-08-29 15:27:24 +02:00
parent 37bcf39835
commit cba4ab18f9
2 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/_schedule.scss
View File

@ -4,12 +4,12 @@ $timeslot-height: 0.65em;
.schedule { .schedule {
display: flex; display: flex;
overflow-x: auto; padding-right: 0.5em;
.schedule-date { .schedule-date {
height: 0; height: 0;
position: relative; position: relative;
top: calc(-3rem - 1px); top: calc(-5rem - 1px);
visibility: hidden; visibility: hidden;
width: 0; width: 0;
} }
@ -55,23 +55,34 @@ $timeslot-height: 0.65em;
.schedule-grid { .schedule-grid {
display: grid; display: grid;
grid-auto-rows: $timeslot-height; grid-auto-rows: $timeslot-height;
grid-template-rows: 2em; grid-template-rows: 2rem;
&.schedule-room { &.schedule-room {
grid-template-columns: 400px; grid-template-columns: 80vw;
@media screen and (min-width: 501px) {
grid-template-columns: 400px;
}
} }
& > * { & > * {
grid-column: 1 / 2; 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 { .schedule-room {
margin: 0 0.5em; margin: 0 0.5em;
& > .schedule-title {
text-align: center;
}
} }
.schedule-time { .schedule-time {
@ -81,19 +92,28 @@ $timeslot-height: 0.65em;
.schedule-timeline { .schedule-timeline {
background: $color-background; background: $color-background;
padding-right: 0.5em; padding: 0 0.5em 0 1em;
position: sticky; position: sticky;
left: 0; left: 0;
} }
} }
.schedule-container {
display: flex;
flex-direction: column;
margin-left: -1rem;
width: min-content;
}
.schedule-days { .schedule-days {
background: $color-background; background: $color-background;
display: flex; display: flex;
font-size: 1rem; font-size: 1rem;
left: 0;
line-height: 1; line-height: 1;
max-width: 100vw;
overflow-x: auto; overflow-x: auto;
padding: 1em 0; padding: 1em;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 42; z-index: 42;

54
layouts/shortcodes/schedule.html
View File

@ -4,44 +4,46 @@
<br>Zeitangaben in <span class="schedule-timezone">{{ .timezone }}</span> <br>Zeitangaben in <span class="schedule-timezone">{{ .timezone }}</span>
</p> </p>
<div class="schedule-days"> <div class="schedule-container">
<div class="schedule-days">
{{ range .days }} {{ range .days }}
<a href="#{{ . }}">{{ . }}</a>&middot; <a href="#{{ . }}">{{ . }}</a>&middot;
{{ end }} {{ end }}
<a href="#">zurück nach oben</a> <a href="#">zurück nach oben</a>
</div> </div>
<div class="schedule"> <div class="schedule">
<div class="schedule-grid schedule-timeline" style="--span: {{ .span }}"> <div class="schedule-grid schedule-timeline" style="--span: {{ .span }}">
<h3 class="schedule-title"></h3> <h3 class="schedule-title"></h3>
{{ $lastDate := "" }} {{ $lastDate := "" }}
{{ range .timeline }} {{ range .timeline }}
<div class="schedule-time" style="--start: {{ .start }}"> <div class="schedule-time" style="--start: {{ .start }}">
{{ if ne .date $lastDate }} {{ if ne .date $lastDate }}
<div class="schedule-date" id="{{ .date }}">{{ .date }}</div> <div class="schedule-date" id="{{ .date }}">{{ .date }}</div>
{{ end }} {{ end }}
{{ .time }} {{ .time }}
</div> </div>
{{ $lastDate = .date }} {{ $lastDate = .date }}
{{ end }} {{ end }}
</div> </div>
{{ range $name, $events := .rooms }} {{ range $name, $events := .rooms }}
<div class="schedule-grid schedule-room"> <div class="schedule-grid schedule-room">
<h3 class="schedule-title">{{ $name }}</h3> <h3 class="schedule-title">{{ $name }}</h3>
{{ range $events }} {{ range $events }}
<a class="schedule-event" href="{{ .url }}" style="--start: {{ .start }};--end: {{ .end }}" target="_blank"> <a class="schedule-event" href="{{ .url }}" style="--start: {{ .start }};--end: {{ .end }}" target="_blank">
<div class="schedule-event-time"> <div class="schedule-event-time">
<span>{{ .start_time }}</span> <span>{{ .start_time }}</span>
<span>&ndash;</span> <span>&ndash;</span>
<span>{{ .end_time }}</span> <span>{{ .end_time }}</span>
</div> </div>
<div class="schedule-event-detail"> <div class="schedule-event-detail">
<h4 class="schedule-title" title="{{ .title }}">{{ .title }}</h4> <h4 class="schedule-title" title="{{ .title }}">{{ .title }}</h4>
<p class="schedule-speaker" title="{{ .speaker }}">{{ .speaker }}</p> <p class="schedule-speaker" title="{{ .speaker }}">{{ .speaker }}</p>
</div> </div>
</a> </a>
{{ end }}
</div>
{{ end }} {{ end }}
</div> </div>
{{ end }}
</div> </div>
{{ end }} {{ end }}