christian/hugo-page-test
1
0
Fork 0
forked from tsc-vfl/hugo-page
Code Pull Requests Activity

Make the calendar using pure HTML in Hugo

Browse Source
This commit is contained in:
Christian Wolf
2024-01-13 20:30:30 +01:00
parent 30bf4dab28
commit a2a55bf3a7
4 changed files with 350 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
themes/tsc_vfl/assets/css/main.scss
View File

@@ -157,6 +157,91 @@ h1 {
}
}
.calendar-manual {
font-size: xx-small;
@include media-large() {
font-size: small;
}
tr {
height: 20px;
&.first-min {
border-top: solid lightgray 1px;
}
&:nth-of-type(n) {
background-color: unset;
}
.time {
vertical-align: top;
}
.time:last-of-type, .first-col-of-room {
border-left: solid lightgray 1px;
}
.day-title {
text-align: center;
}
}
.calendar-block {
position: relative;
.calendar-block-entity {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.5px;
box-sizing: border-box;
&.height-1 {
height: 20px;
}
&.height-2 {
height: 40px;
}
&.height-3 {
height: 60px;
}
&.height-4 {
height: 80px;
}
&.height-5 {
height: 100px;
}
&.height-6 {
height: 120px;
}
&.height-7 {
height: 140px;
}
&.height-8 {
height: 160px;
}
.room-block {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 3px;
overflow: hidden;
}
.room-vorne {
background-color: var(--color-vhvorne);
}
.room-mitte {
background-color: var(--color-vhmitte);
}
.room-hinten {
background-color: var(--color-vhhinten);
color: white;
}
}
}
}
.float-right {
float: right;
margin: 7px 0 7px 15px;

64
themes/tsc_vfl/layouts/shortcodes/tsc/show-calendar.html Normal file
View File

@@ -0,0 +1,64 @@
{{ $start := .Get 0 }}
{{ $end := .Get 1}}
{{ $days := after 2 .Params }}
{{ $calendar := $.Site.Data.calendar.calendar }}
<table class="calendar-manual">
<tr>
<th></th>
{{ range $days }}
<th colspan="3" class="day-title">{{ . }}</th>
{{ end }}
<th></th>
</tr>
<tr>
<th></th>
{{ range $days }}
<th class="first-col-of-room">vorne</th>
<th>mitte</th>
<th>hinten</th>
{{ end }}
<th></th>
</tr>
{{ range seq $start $end }}
{{ $hour := . }}
{{ range seq 0 15 45 }}
{{ $firstMin := "" }}
{{ if eq . 0 }}
{{ $firstMin = "first-min" }}
{{ end }}
<tr class="{{ $firstMin }}">
{{ $time := printf "%2d:%02d" $hour . }}
{{ if or (eq . 0) (eq . 30) }}
<td rowspan="2" class="time">{{ $time }}</td>
{{ end }}
{{ range $days }}
{{ $day := . }}
{{ $firstRoom := true }}
{{ range slice "vorne" "mitte" "hinten" }}
{{ $room := . }}
{{ $addClass := "" }}
{{ if $firstRoom }}
{{ $addClass = "first-col-of-room" }}
{{ $firstRoom = false }}
{{ end }}
{{ with index (index (index $calendar .) $day) $time }}
<td class="calendar-block {{ $addClass }}">
<div class="calendar-block-entity height-{{ .slots }}">
<div class="room-block room-{{ $room }}">
{{ .title }}
</div>
</div>
</td>
{{ else }}
<td class="{{ $addClass }}"></td>
{{ end }}
{{ end }}
{{ end }}
{{ if or (eq . 0) (eq . 30) }}
{{ $time := printf "%2d.%02d" $hour . }}
<td rowspan="2" class="time">{{ $time }}</td>
{{ end }}
</tr>
{{ end }}
{{ end }}
</table>