layout fixes and feedback

2024-11-19 00:41:19 +01:00 · 2024-11-19 00:41:19 +01:00 · 89e35a0fcd
commit 89e35a0fcd
parent 4c6e510702
9 changed files with 404 additions and 351 deletions
--- a/content/_index.md
+++ b/content/_index.md
@ -22,7 +22,7 @@ Weitere Treffen finden nach Bedarf meist sonntags statt. Tagesordnungen, Protoko

 <div id="dbkcalendar"><strong>Kalender wird geladen, wenn du JavaScript aktiviert hast.</strong></div>

- [Mehr Termine anzeigen](/termine)
+- <a href="#termine" id="expand-calendar">Mehr Termine anzeigen</a>
 - [Kalender abonnieren](https://cloud.hacknang.de/remote.php/dav/public-calendars/nZTMSHpd29ZRpAr6/?export)

 ## Ausstattung
--- a/content/impressum.md
+++ b/content/impressum.md
@ -43,4 +43,3 @@ Bei Überweisungen bitte den Verwendungszweck "Spende Chaostreff Backnang" verwe
 Der Chaostreff Backnang e.V. ist im Sinne der Abgabenordnung (AO) als gemeinnützig anerkannt (siehe [§2 Abs. 1 der Satzung](/docs/Satzung.pdf)) und stellt auf Anfrage Spendenbescheinigungen aus. Dafür bitte eine E-Mail an den Vorstand senden und dabei den vollen Namen, die vollständige Anschrift sowie Datum und Höhe der Zuwendung erwähnen.

 Bei Beträgen unter 200€ reicht dem Finanzamt ein sogenannter einfacher Nachweis, das ist ein Kontoauszug oder ein Ausdruck der Überweisungsbestätigung.
-
--- a/content/termine.md
+++ b/content/termine.md
@ -1,6 +0,0 @@
-+++
-title = "Termine"
-description =  "Die nächste Termine des Chaostreffs auf einen Blick"
-+++
-
-<div id="dbkcalendar"><strong>Kalender wird geladen, wenn du JavaScript aktiviert hast.</strong></div>
--- a/static/dbkcalendar.js
+++ b/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);
--- a/static/main.css
+++ b/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;

--- a/static/main.js
+++ b/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));
--- a/templates/page.html
+++ b/templates/page.html
@ -1,25 +1,13 @@
 <!DOCTYPE html>
-{% if page.title %} 
-{% set title = page.title %} 
-{% elif section.title %} 
-{% set title = section.title %} 
-{% elif config.title %} 
-{% set title = config.title %}
-{% endif %} 
-
-{% if page.description %} 
-{% set description = page.description | truncate(length=150) %} 
-{% elif section.description %} 
-{% set description = section.description | truncate(length=150) %} 
-{% elif page.summary %} 
-{% set description = page.summary | truncate(length=150) %} 
-{% elif section.summary %}
-{% set description = section.summary | truncate(length=150) %} 
-{% elif config.description %} 
-{% set description = config.description | truncate(length=150) %}
-{% else %}
-{% set description = "" %}
-{% endif %}
+{% if page.title %} {% set title = page.title %} {% elif section.title %} {% set
+title = section.title %} {% elif config.title %} {% set title = config.title %}
+{% endif %} {% if page.description %} {% set description = page.description |
+truncate(length=150) %} {% elif section.description %} {% set description =
+section.description | truncate(length=150) %} {% elif page.summary %} {% set
+description = page.summary | truncate(length=150) %} {% elif section.summary %}
+{% set description = section.summary | truncate(length=150) %} {% elif
+config.description %} {% set description = config.description |
+truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
 <html lang="{{ config.default_language }}">
  <head>
    <meta charset="UTF-8" />
@ -65,9 +53,9 @@
    <title>{{ title }}</title>
  </head>
  <body>
+    <a id="skip-header" href="#main-content">Zum Inhalt springen</a>
    <header>
-      <a id="skip-header" href="#main-content">Zum Inhalt springen</a>
-      <a href="/" tabindex="-1"
+      <a class="image-container" id="logo" href="/" tabindex="-1"
        ><img
          id="header-image"
          src="{{ get_url(path='logo.svg', trailing_slash=false) }}"
@ -75,14 +63,26 @@
      /></a>
      <nav>
        <a href="{{ get_url(path='/') }}">Home</a>
-        <a href="{{ get_url(path='/termine') }}">Termine</a>
+        <a href="{{ get_url(path='/#termine') }}">Termine</a>
+        <a href="{{ get_url(path='/#kontakt') }}">Kontakt</a>
+        <a href="{{ get_url(path='/#dienste') }}">Dienste</a>
        <a href="{{ get_url(path='/verein') }}">Verein</a>
        <a href="https://fsck.ctbk.de/">FSCK</a>
-        <a href="https://hacknang.de/freifunk/">Freifunk</a>
-        <a class="image-container" href="https://spaceapi.ctbk.de"
-          ><img id="space-image" src="" alt="Space Icon"
-        /></a>
      </nav>
+      <p id="space-text">
+        <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>
+      <a
+        class="image-container"
+        id="space-image-container"
+        href="https://spaceapi.ctbk.de"
+        ><img
+          id="space-image"
+          src="{{ get_url(path='/img/unknown.png') }}"
+          alt="Space Icon"
+      /></a>
    </header>
    <main id="main-content">
      <section class="main-text">