Clean up code a bit and remove old implementation

content/page/info/raumbelegung/index.md

@@ -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 14 22 "Thu" "Fri" >}}
-
-{{< tsc/calendar/schedule 10 22 "Thu" "Fri" >}}
-
-{{< tsc/show-calendar 10 22 "Do" "Fr" >}}
 
 
 ## Regeln für die Belegung der Tanzsäle

themes/tsc_vfl/assets/css/_schedule.scss

@@ -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;
             }
         }
-    }
+        .main-column {
-    
+            border-right: $border-style;
-    .times {
-        display: contents;
-        div {
-            height: 60px;
         }
     }
 
     .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;
-            }
-        }
-    }
-}

themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html

@@ -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="times-right"></div>
-        <div class="second-row"></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 times-left">{{ printf "%2d:00" . }}</div>
-        <div class="table-row">{{ 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>

themes/tsc_vfl/layouts/shortcodes/tsc/show-calendar.html

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