Add shortcode 'schedule'
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
5e3f67c237
commit
3bf6313f8a
|
|
@ -0,0 +1,123 @@
|
|||
@import 'colors';
|
||||
|
||||
$timeslot-height: 0.65em;
|
||||
|
||||
.schedule {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
|
||||
.schedule-date {
|
||||
height: 0;
|
||||
position: relative;
|
||||
top: calc(-3rem - 1px);
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.schedule-event {
|
||||
border: 1px solid $color-highlight;
|
||||
border-radius: 0.5em;
|
||||
color: currentColor;
|
||||
display: flex;
|
||||
grid-row: calc(var(--start) + 1) / calc(var(--end) + 1);
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover .schedule-event-detail {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-event-detail {
|
||||
border-left: 1px solid $color-highlight;
|
||||
overflow: hidden;
|
||||
|
||||
.schedule-speaker, .schedule-title {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-event-time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
:nth-child(2) {
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-grid {
|
||||
display: grid;
|
||||
grid-auto-rows: $timeslot-height;
|
||||
grid-template-rows: auto;
|
||||
|
||||
&.schedule-room {
|
||||
grid-template-columns: 400px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-room {
|
||||
margin: 0 0.5em;
|
||||
|
||||
& > .schedule-title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-time {
|
||||
border-top: 1px solid $color-highlight;
|
||||
grid-row: calc(var(--start) + 1) / span var(--span);
|
||||
}
|
||||
|
||||
.schedule-timeline {
|
||||
background: $color-background;
|
||||
padding-right: 0.5em;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-days {
|
||||
background: $color-background;
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
overflow-x: auto;
|
||||
padding: 1em 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 42;
|
||||
|
||||
a {
|
||||
padding: 0 0.5em;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-info {
|
||||
.schedule-timezone {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.schedule-version {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import 'breakpoints';
|
||||
@import 'colors';
|
||||
@import 'fonts';
|
||||
@import 'schedule';
|
||||
@import 'vars';
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<div style="display:flex;line-height:1;overflow-x:auto;width:100%">
|
||||
<div style="display:grid;grid-auto-rows:0.5em">
|
||||
<div style="grid-row: 1 / 7">00:00</div>
|
||||
<div style="grid-row: 7 / 13">00:30</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-auto-columns:300px;grid-auto-rows:0.5em">
|
||||
<div style="grid-column: 1 / 2; grid-row: 2 / 3">asdf</div>
|
||||
<div style="grid-column: 1 / 2; grid-row: 2 / 4">qwer</div>
|
||||
<div style="grid-column: 1 / 2; grid-row: 3 / 5">1234</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-auto-columns:400px;grid-auto-rows:0.5em">
|
||||
<div style="grid-column: 1 / 2; grid-row: 5 / 7">asdf</div>
|
||||
<div style="grid-column: 1 / 2; grid-row: 3 / 6">qwer</div>
|
||||
<div style="grid-column: 1 / 2; grid-row: 7 / 8">1234</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
{{ $data := getJSON (.Get "url") }}
|
||||
{{ with $data.schedule }}
|
||||
|
||||
{{ $timeslotDuration := 0 }}
|
||||
{{ range split .conference.timeslot_duration ":" }}
|
||||
{{ $timeslotDuration = add (mul $timeslotDuration 60) (int .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ $rooms := dict }}
|
||||
{{ range $day := .conference.days }}
|
||||
{{ range $room := $data.schedule.conference.rooms }}
|
||||
{{ if index $rooms $room.name }}
|
||||
{{ $rooms = merge $rooms (dict $room.name ((index $rooms $room.name) | append (index $day.rooms .name))) }}
|
||||
{{ else }}
|
||||
{{ $rooms = merge $rooms (dict $room.name (index $day.rooms .name)) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $events := slice }}
|
||||
{{ range $rooms }}
|
||||
{{ with . }}
|
||||
{{ if $events }}
|
||||
{{ $events = $events | append . }}
|
||||
{{ else }}
|
||||
{{ $events = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $events = sort $events "date" }}
|
||||
{{ $startDate := time (index $events 0).date }}
|
||||
{{ $endDate := 0 }}
|
||||
{{ with index $events (sub (len $events) 1) }}
|
||||
{{ $lastDuration := 0 }}
|
||||
{{ range split .duration ":" }}
|
||||
{{ $lastDuration = add (mul $lastDuration 60) (int .) }}
|
||||
{{ end }}
|
||||
{{ $endDate = time (add (time .date).Unix (mul $lastDuration 60)) }}
|
||||
{{ end }}
|
||||
|
||||
<p class="schedule-info">
|
||||
Version: <span class="schedule-version">{{ .version }}</span>
|
||||
<br>Zeitangaben in <span class="schedule-timezone">{{ $startDate.Format "MST" }}</span>
|
||||
</p>
|
||||
|
||||
<div class="schedule-days">
|
||||
{{ range .conference.days }}
|
||||
<a href="#{{ .date }}">{{ .date }}</a>·
|
||||
{{ end }}
|
||||
<a href="#">zurück nach oben</a>
|
||||
</div>
|
||||
|
||||
<div class="schedule">
|
||||
<div class="schedule-grid schedule-timeline" style="--span: {{ div 30 $timeslotDuration }}">
|
||||
<h3 class="schedule-title"></h3>
|
||||
{{ $lastDate := 0 }}
|
||||
{{ range seq 1 (div 30 $timeslotDuration) (div ($endDate.Sub $startDate).Minutes $timeslotDuration) }}
|
||||
{{ $date := time (add $startDate.Unix (mul (sub . 1) (mul $timeslotDuration 60))) }}
|
||||
<div class="schedule-time" style="--start: {{ . }}">
|
||||
{{ if or (not $lastDate) (ne ($date.Format "2006-01-02") ($lastDate.Format "2006-01-02")) }}
|
||||
<div class="schedule-date" id="{{ $date.Format "2006-01-02" }}">{{ $date.Format "2006-01-02" }}</div>
|
||||
{{ end }}
|
||||
{{ $date.Format "15:04" }}
|
||||
</div>
|
||||
{{ $lastDate = $date }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ range sort $data.schedule.conference.rooms "name" }}
|
||||
{{ $name := .name }}
|
||||
{{ $room := index $rooms $name }}
|
||||
{{ with $room }}
|
||||
<div class="schedule-grid schedule-room">
|
||||
<h3 class="schedule-title">{{ $name }}</h3>
|
||||
{{ range . }}
|
||||
{{ $start := add (div ((time .date).Sub $startDate).Minutes $timeslotDuration) 1 }}
|
||||
{{ $duration := 0 }}
|
||||
{{ range split .duration ":" }}
|
||||
{{ $duration = add (mul $duration 60) (int .) }}
|
||||
{{ end }}
|
||||
{{ $end := add $start (div $duration $timeslotDuration) }}
|
||||
<a class="schedule-event" href="{{ .url }}" style="--start: {{ $start }};--end: {{ $end }}" target="_blank">
|
||||
<div class="schedule-event-time">
|
||||
<span>{{ (time .date).Format "15:04" }}</span>
|
||||
<span>–</span>
|
||||
<span>{{ (time (int (add $startDate.Unix (mul (sub $end 1) (mul $timeslotDuration 60))))).Format "15:04" }}</span>
|
||||
</div>
|
||||
<div class="schedule-event-detail">
|
||||
<h4 class="schedule-title" title="{{ .title }}">{{ .title }}</h4>
|
||||
{{ $speaker := delimit (apply .persons "index" "." "public_name") ", " }}
|
||||
<p class="schedule-speaker" title="{{ $speaker }}">{{ $speaker }}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
Loading…
Reference in New Issue