layout fixes and feedback

static/dbkcalendar.js

@@ -13,7 +13,7 @@ export default function hackcal(e, p = 1) {
   const calendarParent = document.getElementById("dbkcalendar");
   const body = calendar.querySelector("tbody");
 
-  const calUri = "https://hackcal.ctbk.de/?period=" + p;
+  const calUri = `https://hackcal.ctbk.de/?period=${p}`;
   fetch(calUri)
     .then((res) => res.json())
     .then((data) => {
@@ -68,7 +68,7 @@ export default function hackcal(e, p = 1) {
           }
 
           const categoriesParent = entryItem.querySelector(".categories");
-          for (const category of event.categories.split(",")) {
+          for (const category of event.categories?.split(",") || []) {
             const categoryItem = document.createElement("em");
             categoryItem.innerText = category;
             categoriesParent.appendChild(categoryItem);

static/main.css

@@ -1,5 +1,4 @@
 /* general page styling */
-
 :root {
   --main-bg-color: #020404;
   --main-text-color: #efe3e3;
@@ -67,25 +66,72 @@ h3 {
 /* page header */
 
 #space-image {
-  height: 12vh;
+  height: 8vh;
   transition: height 0.2s, transform 0.2s;
 
   &:hover {
-    height: 14vh;
+    height: 11vh;
   }
 }
 
-header {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  overflow: hidden;
+#header-image {
+  max-height: 100%;
 }
 
-#header-image {
-  height: 20vh;
-  max-width: 40vw;
+header {
+  display: grid;
+  grid-template:
+    "logo . nav        nav"
+    "logo . .          ." min-content
+    "logo . space-text space-image" min-content /
+    minmax(min-content, 30vw) 1fr auto minmax(0, min-content);
+  overflow: hidden;
+
+  #logo {
+    grid-area: logo;
+  }
+  nav {
+    grid-area: nav;
+  }
+  #space-text {
+    grid-area: space-text;
+    text-align: right;
+    margin-right: 1em;
+    vertical-align: bottom;
+    margin-top: auto;
+  }
+  #space-image-container {
+    grid-area: space-image;
+  }
+}
+
+@media screen and (device-width < 600px) {
+  header {
+    grid-template:
+      "logo space-image" minmax(0, 20vh)
+      "nav nav" min-content /
+      auto minmax(0, min-content);
+
+    #space-image-container {
+      margin-top: auto;
+      margin-bottom: auto;
+      margin-left: auto;
+    }
+
+    #space-text {
+      display: none;
+    }
+  }
+}
+
+@media screen and (device-width < 340px) {
+  header {
+    grid-template:
+      "logo" minmax(5cm, 20vh)
+      "space-image" min-content
+      "nav" /
+      1fr;
+  }
 }
 
 #skip-header {
@@ -113,6 +159,7 @@ header {
 
 nav {
   display: flex;
+  justify-content: end;
   flex-wrap: wrap;
   margin: 1em;
 

static/main.js

@@ -4,32 +4,41 @@ const refreshRate = 60 * 1000;
 
 function checkSpace() {
   const icon = document.getElementById("space-image");
-  let openText = "";
+  const stateItem = document.getElementById("space-state");
+  const stateLastUpdateItem = document.getElementById("space-last-update");
+  let stateText = "",
+    stateLastUpdate = "";
   fetch("https://spaceapi.ctbk.de/")
     .then((response) => response.json())
     .then((data) => {
+      let openText = "";
       if (data.state.open) {
-        openText = "Offen";
+        openText = "offen";
         icon.src = data.state.icon.open;
       } else {
-        openText = "Geschlossen";
+        openText = "geschlossen";
         icon.src = data.state.icon.closed;
       }
-      icon.alt = "Der Space ist " + openText;
+      stateText = `Der Space ist derzeit ${openText}.`;
       const lastchangeString = data.state.lastchange
         ? new Date(data.state.lastchange * 1000).toLocaleString(true, {
             timeStyle: "short",
             dateStyle: "medium",
           })
         : "unbekannt";
-      icon.title = "Letzte Statusänderung: " + lastchangeString;
+      stateLastUpdate = "Letzte Statusänderung: " + lastchangeString;
       console.log("Icon: " + icon.src);
     })
     .catch((error) => {
       icon.src = "/img/unknown.png";
-      icon.alt = "Der Spacestatus ist unbekannt";
-      icon.title = "";
+      stateText = "Der Spacestatus ist unbekannt";
       console.error("Error on space state retrieval:", error);
+    })
+    .then(() => {
+      icon.alt = stateText;
+      icon.text = stateLastUpdate;
+      stateItem.innerText = stateText;
+      stateLastUpdateItem.innerText = stateLastUpdate;
     });
 }
 
@@ -39,3 +48,7 @@ const interval = setInterval(() => {
 
 document.addEventListener("DOMContentLoaded", checkSpace);
 document.addEventListener("DOMContentLoaded", hackcal);
+
+document
+  .getElementById("expand-calendar")
+  ?.addEventListener("click", () => hackcal(null, 6));