forked from tsc-vfl/hugo-page
Clean up code a bit and remove old implementation
This commit is contained in:
parent
9f8f8a96df
commit
9d21f14959
@ -27,11 +27,7 @@ Weitere Infos zur Reservierung findest du unterhalb der Kalender.
|
||||
|
||||
{{< tsc/calendar/schedule 10 22 "Mon" "Tue" "Wed" >}}
|
||||
|
||||
{{< tsc/show-calendar 10 22 "Mo" "Di" "Mi" >}}
|
||||
|
||||
{{< tsc/calendar/schedule 10 22 "Thu" "Fri" >}}
|
||||
|
||||
{{< tsc/show-calendar 10 22 "Do" "Fr" >}}
|
||||
{{< tsc/calendar/schedule 14 22 "Thu" "Fri" >}}
|
||||
|
||||
|
||||
## Regeln für die Belegung der Tanzsäle
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
@use './responsive.scss' as r;
|
||||
@use './colors.scss' as *;
|
||||
|
||||
$calendar-height-row: 60px;
|
||||
|
||||
.calendar-schedule {
|
||||
$calendar-height-row: 60px;
|
||||
|
||||
$border-style: solid lightgray 1px;
|
||||
|
||||
display: grid;
|
||||
|
||||
font-size: xx-small;
|
||||
|
||||
@include r.media-large {
|
||||
& {
|
||||
font-size: x-small;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +21,9 @@ $calendar-height-row: 60px;
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
div {
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.rooms {
|
||||
display: flex;
|
||||
@ -29,24 +34,31 @@ $calendar-height-row: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.times {
|
||||
display: contents;
|
||||
div {
|
||||
height: 60px;
|
||||
.main-column {
|
||||
border-right: $border-style;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
height: $calendar-height-row;
|
||||
box-sizing: border-box;
|
||||
|
||||
border-top: solid lightgray 1px;
|
||||
border-top: $border-style;
|
||||
}
|
||||
|
||||
.times-left {
|
||||
border-right: $border-style;
|
||||
}
|
||||
.times-left, .times-right{
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.main-entry {
|
||||
position: relative;
|
||||
|
||||
border-right: $border-style;
|
||||
|
||||
.event {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
@ -55,62 +67,8 @@ $calendar-height-row: 60px;
|
||||
height: calc($calendar-height-row * var(--duration) / 60.0);
|
||||
|
||||
width: 30%;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 0;
|
||||
// overflow: hidden;
|
||||
|
||||
--fg-color: black;
|
||||
|
||||
&.room-vorne {
|
||||
--bg-color: var(--color-vhvorne);
|
||||
left: 2.5%;
|
||||
}
|
||||
&.room-mitte {
|
||||
--bg-color: var(--color-vhmitte);
|
||||
left: 35%
|
||||
}
|
||||
&.room-hinten {
|
||||
--bg-color: var(--color-vhhinten);
|
||||
--fg-color: white;
|
||||
left: 67.5%;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
|
||||
color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cal-main-content {
|
||||
grid-row: 3 / 100;
|
||||
position: relative;
|
||||
|
||||
&.day-0 {
|
||||
grid-column: 2;
|
||||
}
|
||||
&.day-1 {
|
||||
grid-column: 3;
|
||||
}
|
||||
&.day-2 {
|
||||
grid-column: 4;
|
||||
}
|
||||
// grid-column: 2;
|
||||
|
||||
.event {
|
||||
position: absolute;
|
||||
|
||||
width: 30%;
|
||||
// height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 0;
|
||||
overflow: hidden;
|
||||
|
||||
--fg-color: black;
|
||||
@ -139,131 +97,16 @@ $calendar-height-row: 60px;
|
||||
color: var(--fg-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.calendar-grid-2-days {
|
||||
grid-template-columns: auto repeat(2, 1fr) auto;
|
||||
|
||||
.cal-main-content {
|
||||
// grid-column-end: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-grid-3-days {
|
||||
grid-template-columns: auto repeat(3, 1fr) auto;
|
||||
|
||||
.cal-main-content {
|
||||
// grid-column-end: span 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy styling
|
||||
.calendar-manual {
|
||||
font-size: xx-small;
|
||||
|
||||
@include r.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;
|
||||
}
|
||||
|
||||
&.height-9 {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
&.height-10 {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,28 +6,27 @@
|
||||
{{- $listSchedule := partialCached "tsc/calendar/list" . }}
|
||||
<div class="calendar-schedule calendar-grid-{{ $numDays }}-days">
|
||||
<div class="header">
|
||||
<div class="first-row"></div>
|
||||
<div class="times-left"></div>
|
||||
{{ range $days }}
|
||||
<div class="first-row">{{ . }}</div>
|
||||
<div class="main-column">{{ . }}</div>
|
||||
{{ end }}
|
||||
<div class="first-row"></div>
|
||||
<div class="second-row"></div>
|
||||
<div class="times-right"></div>
|
||||
<div class="times-left"></div>
|
||||
{{ range $days }}
|
||||
<div class="rooms second-row">
|
||||
<div class="rooms main-column">
|
||||
<div>Vorne</div>
|
||||
<div>Mitte</div>
|
||||
<div>Hinten</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="second-row"></div>
|
||||
<div class="times-right"></div>
|
||||
</div>
|
||||
{{ range (seq $start $end) }}
|
||||
{{- $currentHour := string . -}}
|
||||
{{- $addClass := "" -}}
|
||||
{{- $firstRow := eq . $start -}}
|
||||
{{- if eq . $start }}{{ $addClass = "first-main-row"}}{{ end -}}
|
||||
{{ warnf "Current hour: %s (%T)" $currentHour $currentHour }}
|
||||
<div class="table-row">{{ printf "%2d:00" . }}</div>
|
||||
<div class="table-row times-left">{{ printf "%2d:00" . }}</div>
|
||||
{{- range $id, $day := $days }}
|
||||
<div class="table-row main-entry">
|
||||
{{- range $listSchedule }}
|
||||
@ -37,10 +36,6 @@
|
||||
{{- if ne $currentHour $evHour }}{{ continue }}{{ end -}}
|
||||
{{- $hours := int ($sTime.Format "15") -}}
|
||||
{{- $minutes := int ($sTime.Format "4") -}}
|
||||
{{/* warnf "%T" $hours */}}
|
||||
{{/* $hours = add $hours (sub 0 $start) (div $minutes 60.0) */}}
|
||||
{{/* print $hours */}}
|
||||
{{/* $hours = $hours - 0 + ($minutes / 60.0) */}}
|
||||
{{- $style := printf "--duration: %d; --minutes: %d;" .duration $minutes -}}
|
||||
{{/* warnf "%s" $style */}}
|
||||
<div class="event room-{{ .roomId }}" style="{{ $style | safeCSS }}">
|
||||
@ -51,35 +46,6 @@
|
||||
{{ end -}}
|
||||
</div>
|
||||
{{ end -}}
|
||||
<div class="table-row">{{ printf "%2d:00" . }}</div>
|
||||
<div class="table-row times-right">{{ printf "%2d:00" . }}</div>
|
||||
{{ end }}
|
||||
<!--<div class="times">
|
||||
{{ range (seq $start $end) }}
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
<div>{{ printf "%2d:00" . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ range $id, $day := $days }}
|
||||
<div class="cal-main-content day-{{$id}}">
|
||||
{{ range $listSchedule }}
|
||||
{{- if ne .day $day }}{{ continue }}{{ end }}
|
||||
{{- $sTime := time.AsTime (printf "2025-01-02T%s:00" .start) -}}
|
||||
{{- $hours := int ($sTime.Format "15") -}}
|
||||
{{- $minutes := int ($sTime.Format "4") -}}
|
||||
{{/* warnf "%T" $hours */}}
|
||||
{{ $hours = add $hours (sub 0 $start) (div $minutes 60.0) }}
|
||||
{{/* print $hours */}}
|
||||
{{/* $hours = $hours - 0 + ($minutes / 60.0) */}}
|
||||
{{- $top := mul $hours 60 -}}
|
||||
{{- $height := mul (div .duration 60.0) 60 -}}
|
||||
{{- $style := printf "top: %1.0fpx; height: %1.0fpx;" $top $height -}}
|
||||
{{/* warnf "%s" $style */}}
|
||||
<div class="event room-{{ .roomId }}" style="{{ $style | safeCSS }}">
|
||||
<div>
|
||||
{{ .title }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}-->
|
||||
</div>
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
{{ $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>
|
||||
Loading…
x
Reference in New Issue
Block a user