Added calendar grid layout (#50)

xHain-hackspace · Jan 16, 2024 · 0b5e0ae · 0b5e0ae
1 parent 692c505
commit 0b5e0ae
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 22 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,20 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.js]
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[*.{css,scss,html,md}]
+indent_style = space
+indent_size = 4
diff --git a/assets/css/_calendar.scss b/assets/css/_calendar.scss
@@ -4,6 +4,10 @@
     border-bottom: 2px solid rgba(89, 89, 89, 0.44);
 
     .month_wrapper {
+        margin-bottom: 1rem;
+    }
+
+    .month_header {
         display: block;
         height: 100%;
         padding: 1.5rem 0;
@@ -35,6 +39,10 @@
             }
         }
 
+        &[data-empty]:not(.current) {
+            display: none;
+        }
+
         .day_title {
             padding: 0.2rem 1rem;
 
@@ -59,6 +67,8 @@
             border-radius: 0.3rem;
             font-size: 0.9rem;
             margin-top: 0.5em;
+            word-break: break-word;
+            hyphens: auto;
 
             .time {
                 font-family: $font-family-brand;
@@ -116,6 +126,26 @@
         }
     }
 
+    // start the days of the week in same day column every month
+    .day-Tue:first-child {
+        grid-column: 2;
+    }
+    .day-Wed:first-child {
+        grid-column: 3;
+    }
+    .day-Thu:first-child {
+        grid-column: 4;
+    }
+    .day-Fri:first-child {
+        grid-column: 5;
+    }
+    .day-Sat:first-child {
+        grid-column: 6;
+    }
+    .day-Sun:first-child {
+        grid-column: 7;
+    }
+
     .modal {
         display: none;
         position: fixed;
@@ -128,7 +158,6 @@
         background-color: rgba(0, 0, 0, 0.4);
         padding-top: 80px;
 
-
         .close {
             color: #000;
             float: right;
@@ -178,4 +207,18 @@
             }
         }
     }
+
+    @media (min-width: 950px) {
+        .days_wrapper {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            grid-gap: 0.5rem;
+        }
+
+        .day {
+            &[data-empty]:not(.current) {
+                display: block;
+            }
+        }
+    }
 }
diff --git a/calendar_parse/template.html b/calendar_parse/template.html
@@ -9,32 +9,36 @@
     {{range $year, $months := .Events}}
     {{range $month, $daysData := $months}}
     <div class="month_wrapper">
-        <div class="year">{{$year}}</div>
-        <div class="month">{{$month | monthName}}</div>
-    </div>
-    {{range $day, $dayData := $daysData}}
-    <div class="day" id="{{.Date.Format "2006-01-02"}}">
-        <div class="day_title">
-            <span class="monthday">{{$day}}</span>
-            <span class="weekday">{{.Weekday | weekdayShort}}</span>
+        <div class="month_header">
+            <div class="year">{{$year}}</div>
+            <div class="month">{{$month | monthName}}</div>
         </div>
-        {{range $dayData.Events}}
-        <div class="event" data-start-time="{{.Start.Format "15:04"}}" data-end-time="{{.End.Format "15:04"}}">
-            <div class="time">
-                <span class="start">{{.Start.Format "15:04"}}</span>
-                <span class="end"> - {{.End.Format "15:04"}}</span>
+        <div class="days_wrapper">
+            {{range $day, $dayData := $daysData}}
+            <div class="day day-{{.Weekday | weekdayShort}}" {{if not $dayData.Events}}data-empty{{end}} id="{{.Date.Format "2006-01-02"}}">
+                <div class="day_title">
+                    <span class="monthday">{{$day}}</span>
+                    <span class="weekday">{{.Weekday | weekdayShort}}</span>
+                </div>
+                {{range $dayData.Events}}
+                <div class="event" data-start-time="{{.Start.Format "15:04"}}" data-end-time="{{.End.Format "15:04"}}">
+                    <div class="time">
+                        <span class="start">{{.Start.Format "15:04"}}</span>
+                        <span class="end"> - {{.End.Format "15:04"}}</span>
+                    </div>
+                    <span class="title">{{.Summary}}</span>
+                    <span class="location">{{.Location}}</span>
+                    <div class="description">{{.Description}}</div>
+                </div>
+                {{else}}
+                <div class="no-event"></div>
+                {{end}}
             </div>
-            <span class="title">{{.Summary}}</span>
-            <span class="location">{{.Location}}</span>
-            <div class="description">{{.Description}}</div>
-        </div>
-        {{else}}
-            <div class="no-event"></div>
             {{end}}
+        </div>
     </div>
     {{end}}
     {{end}}
-    {{end}}
 
     <div id="overlay">
         <div id="event_modal" class="modal">

diff --git a/config.toml b/config.toml
@@ -3,7 +3,7 @@ title = "xHain ★ hack + make ★ space"
 canonifyurls = true
 languageCode = "en-us"
 defaultContentLanguage = "de"
-DefaultContentLanguageInSubdir = "true"
+DefaultContentLanguageInSubdir = true
 MetaDataFormat = "yaml"
 
 # Define the number of posts per page