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

38
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: 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;

8
layouts/shortcodes/schedule.html
View File

@ -4,14 +4,15 @@
<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;
{{ end }}
<a href="#">zurück nach oben</a>
</div>
</div>
<div class="schedule">
<div class="schedule">
<div class="schedule-grid schedule-timeline" style="--span: {{ .span }}">
<h3 class="schedule-title"></h3>
{{ $lastDate := "" }}
@ -43,5 +44,6 @@
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ end }}