space status on mobile

revamp of the mobile header

static/main.css

@@ -67,7 +67,7 @@ h3 {
 
 #space-image {
   height: 8vh;
-  transition: height 0.2s, transform 0.2s;
+  transition: height 0.2s;
 
   &:hover {
     height: 11vh;
@@ -82,8 +82,8 @@ header {
   display: grid;
   grid-template:
     "logo . nav        nav"
-    "logo . .          ." min-content
+    "logo . space-text space-image" min-content
-    "logo . space-text space-image" min-content /
+    "logo . .          ." min-content /
     minmax(min-content, 25vw) 1fr auto minmax(0, min-content);
   overflow: hidden;
 
@@ -108,43 +108,34 @@ header {
 @media screen and (width > 1700px) {
   header {
     position: fixed;
+    /* subtract exactly the margins to get the 100% horizontal fill we need */
     width: calc(100vw - 2 * 3em);
   }
 }
 
+/* mobile header, just some vertical rearranging and smaller margins */
 @media screen and (width < 650px) {
   body {
     margin: 1.5rem;
     margin-top: 0;
   }
+
   header {
     grid-template:
-      "logo space-image" minmax(0, 20vh)
+      "logo logo" minmax(3cm, 10vh)
-      "nav nav" min-content /
+      "nav nav"
-      auto minmax(0, min-content);
+      "space-text space-image" min-content /
+      auto min-content;
 
     #space-image-container {
       margin-top: auto;
       margin-bottom: auto;
       margin-left: auto;
     }
-
-    #space-text {
-      display: none;
-    }
-  }
-}
-
-@media screen and (width < 400px) {
-  header {
-    grid-template:
-      ". logo ." minmax(3cm, 10vh)
-      "space-text space-text space-image" min-content
-      "nav nav nav" /
-      1fr minmax(min-content, 30vh) 1fr;
   }
 }
 
+/* skip to content element, lots of positioning styles copied from html5-boilerplate */
 #skip-header {
   background: var(--main-bg-color);
   border: 0;

static/main.js

@@ -4,8 +4,7 @@ const refreshRate = 60 * 1000;
 
 function checkSpace() {
   const icon = document.getElementById("space-image");
-  const stateItem = document.getElementById("space-state");
+  const stateItem = document.getElementById("space-text");
-  const stateLastUpdateItem = document.getElementById("space-last-update");
   let stateText = "",
     stateLastUpdate = "";
   fetch("https://spaceapi.ctbk.de/")
@@ -19,30 +18,28 @@ function checkSpace() {
         openText = "geschlossen";
         icon.src = data.state.icon.closed;
       }
-      stateText = `Der Space ist derzeit ${openText}.`;
       const lastchangeString = data.state.lastchange
         ? new Date(data.state.lastchange * 1000).toLocaleString(true, {
             timeStyle: "short",
             dateStyle: "medium",
           })
         : "unbekannt";
-      stateLastUpdate = "Letzte Statusänderung: " + lastchangeString;
+      stateText = `Space <strong>${openText}</strong> seit ${lastchangeString}`;
-      console.log("Icon: " + icon.src);
+      stateLastUpdate = `Letzte Statusänderung: ${lastchangeString}`;
     })
     .catch((error) => {
       icon.src = "/img/unknown.png";
-      stateText = "Der Spacestatus ist unbekannt";
+      stateText = "Spacestatus unbekannt";
       console.error("Error on space state retrieval:", error);
     })
     .then(() => {
       icon.alt = stateText;
       icon.text = stateLastUpdate;
-      stateItem.innerText = stateText;
+      stateItem.innerHTML = stateText;
-      stateLastUpdateItem.innerText = stateLastUpdate;
     });
 }
 
-const interval = setInterval(() => {
+setInterval(() => {
   checkSpace();
 }, refreshRate);
 

templates/page.html

@@ -68,16 +68,9 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
         <a href="{{ get_url(path='/verein') }}">Verein</a>
         <a href="https://fsck.ctbk.de/">FSCK</a>
       </nav>
-      <p id="space-text">
+      <p id="space-text"></p>
-        <strong id="space-state"></strong><br /><span
-          >Nächstes Treffen: siehe <a href="/#termine">Termine</a></span
-        ><br /><span id="space-last-update"></span>
-      </p>
       <!-- TODO: explainer page for the spaceapi and how we implement it -->
-      <a
+      <a class="image-container" id="space-image-container" href=""
-        class="image-container"
-        id="space-image-container"
-        href=""
         ><img
           id="space-image"
           src="{{ get_url(path='/img/unknown.png') }}"