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 {
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;

54
layouts/shortcodes/schedule.html
View File

@ -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 }}