Bessere Filtermöglichkeiten für Listen

src/dynamic/handschriften.njk

@@ -24,7 +24,7 @@ eleventyNavigation:
     <div class="mb-4">
       <div class="feld">Druck</div> Die Angaben zum jeweiligen Druck der Handschriften dienen nur zur leichteren Orientierung, informieren mithin nicht über die Druckgeschichte (Erstdrucke, Teildrucke etc.). Bei den Briefen wird auf die Ausgabe von Freye/Stammler verwiesen (abgekürzt als „FSt“ mit Briefnummer) bzw. auf den jeweiligen Erstdruck für die dort nicht enthaltenen Korrespondenzstücke. Bei den Werken wird auf wechselnde Ausgaben oder Einzeldrucke verwiesen, und zwar nach Möglichkeit auf solche, deren Text auf der jeweils genannten Handschrift beruht (siehe dazu die nachfolgende Liste der abgekürzt zitierten Literatur).</div>
   </div>
-  <div class="rounded-md text-sm py-0.5 px-1.5 bg-slate-200 font-bold mb-1 mr-8">Abgekürzt zitierte Literatur</div>
+  <div class="text-xl font-bold mb-1.5">Abgekürzt zitierte Literatur</div>
   <div class="mb-4 literaturliste twocolumns pr-8">
     <ul>
       <li>
@@ -87,7 +87,7 @@ eleventyNavigation:
   <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
   <div class="hideifsearching">
         Ort&nbsp;
-        <select onchange="window.location.href=this.value" >
+        <select onchange="window.location.href=this.value" id="listselect">
       {% set ort = "" %}
       {% set count = 0 %}
       {%- for post in collections.handschriften -%}
@@ -99,7 +99,7 @@ eleventyNavigation:
       {%- endfor -%}
     </select>
   </div>
-  <button id="scrollbutton" href="#top">↑&nbsp;nach oben</button>
+  <button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
 </div>
 
 <div class="mt-4 w-full" id="list">

src/dynamic/posthume_ausgaben.njk

@@ -13,7 +13,7 @@ eleventyNavigation:
       <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
-        <select onchange="window.location.href=this.value" >
+        <select onchange="window.location.href=this.value" id="listselect">
           {% set jahr = "" %}
           {% set count = 0 %}
           {%- for post in collections.posthumeausgaben -%}
@@ -25,7 +25,7 @@ eleventyNavigation:
           {%- endfor -%}
         </select>
       </div>
-      <button id="scrollbutton" href="#top">↑&nbsp;nach oben</button>
+      <button id="scrollbutton" href="#top">↑&nbsp;oben</button>
 </div>
 
 <div class="yearlist" id="list">

src/dynamic/sekundaerliteratur.njk

@@ -22,7 +22,7 @@ eleventyNavigation:
       <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
-        <select onchange="window.location.href=this.value" >
+        <select onchange="window.location.href=this.value" id="listselect">
           {% set jahr = "" %}
           {% set count = 0 %}
           {%- for post in collections.sekundaer -%}
@@ -34,7 +34,7 @@ eleventyNavigation:
           {%- endfor -%}
         </select>
       </div>
-      <button id="scrollbutton" href="#top">↑&nbsp;nach oben</button>
+      <button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
 </div>
 
 <div class="yearlist" id="list">

src/dynamic/selbstaendige_drucke.njk

@@ -15,7 +15,7 @@ eleventyNavigation:
       <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
-        <select onchange="window.location.href=this.value" >
+        <select onchange="window.location.href=this.value" id="listselect">
           {% set jahr = "" %}
           {% set count = 0 %}
           {%- for post in collections.selbststaendigedrucke -%}
@@ -27,7 +27,7 @@ eleventyNavigation:
           {%- endfor -%}
         </select>
       </div>
-      <button id="scrollbutton" href="#top">↑&nbsp;nach oben</button>
+      <button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
 </div>
 
 <div class="yearlist" id="list">

src/dynamic/theaterauffuehrungen.njk

@@ -18,7 +18,7 @@ eleventyNavigation:
       <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
-        <select onchange="window.location.href=this.value" >
+        <select onchange="window.location.href=this.value" id="listselect">
           {% set jahr = "" %}
           {% set count = 0 %}
           {%- for post in collections.theater -%}
@@ -30,7 +30,7 @@ eleventyNavigation:
           {%- endfor -%}
         </select>
       </div>
-      <button id="scrollbutton" href="#top">↑&nbsp;nach oben</button>
+      <button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
 </div>
 
 <div class="yearlist" id="list">

src/dynamic/unselbststaendige_drucke.njk

@@ -32,7 +32,7 @@ eleventyNavigation:
 <div class="searchbar">
     <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
     <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
-    <button id="scrollbutton" href="#top">↑&nbsp;nach oben</a>
+    <button id="scrollbutton" href="#top">↑&nbsp;hoch</a>
 </div>
 
 <div class="mt-4" id="list">

src/includes/bar.njk

@@ -1,4 +1,4 @@
 {% include "header.njk" %}
-{% include "sidenav.njk" %}
+{% include "nav.njk" %}
 {% include "search.njk" %}
 {% include "footer.njk" %}

src/includes/footer.njk

@@ -1,6 +1,6 @@
-<div class="grow"></div>
+{# <div class="hidden desktop:block grow"></div>
-<footer class="text-base text-center py-1 px-4 grow-0 shrink-0">
+<footer class="hidden desktop:block text-base text-center py-1 px-4 grow-0 shrink-0">
     Stand: 30.1.2023
     | <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="https://github.com/schnulller/jacoblenz">Code</a> | 
         <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="/datenschutz/">Datenschutz & Impressum</a>
-</footer>
+</footer> #}

src/includes/header.njk

@@ -1,11 +1,17 @@
 
-<header>
+<header class="flex flex-row justify-between desktop:justify-start desktop:block">
-	<img class="px-12 pb-4 pt-8" src="/images/JLA.png" alt="jla-Logo">
+	<div class="flex flex-row desktop:block">
+	<img class="h-20 desktop:h-auto desktop:px-12 desktop:pb-4 desktop:pt-8" src="/images/JLA.png" alt="jla-Logo">
 	<h1 class="px-3 py-2 pb-4 text-5xl font-bold text-center">
 		{{ config.title }}
 	</h1>
-	<h2 class="py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
+	<h2 class="hidden desktop:block py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
 		{{ config.shortdescription }}
 		{# <br> Forschungsstelle zum Schriftsteller Jacob Michael Reinhold Lenz. #}
 	</h2>
+	</div>
+	<button class="border rounded-md w-16 h-16 desktop:hidden" id="navigation-button">
+		Menu
+	</div>
 </header>
+

src/includes/nav.njk

@@ -21,7 +21,7 @@
 </li>
 {%- endmacro %}
 
-<nav class="py-4 sidebar-nav px-4">
+<nav class="hidden desktop:block py-4 sidebar-nav px-4" id="navigation">
 <ul>
 {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
 </ul>

src/includes/search.njk

@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+{# <div class="hidden desktop:flex flex-col">
     <div class="grow">
         <div class="bg-slate-50 border-t border-slate-600 py-5 px-4">
             <form class="flex flex-row w-full">
@@ -7,4 +7,4 @@
             </form>
         </div>
     </div>
-</div>
+</div> #}

src/layouts/base.njk

@@ -42,31 +42,25 @@
     <meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
 
   </head>
-  <body class="bg-slate-50 w-full h-full">
+  <body class="bg-slate-50 w-full h-full mx-auto flex flex-col
-    <div class="
+      desktop:px-12 desktop:max-w-screen-2xl desktop:flex-row">
-      px-12
+    <aside class="flex flex-col shrink py-4 px-3
-      max-w-screen-2xl
+      desktop:px-0 desktop:py-0
-      mx-auto
+      desktop:shrink-0 desktop:grow-0 desktop:basis-[26rem] desktop:sticky desktop:max-h-screen desktop:min-h-screen desktop:top-0 desktop:bg-slate-50">
-      flex flex-row">
+      {% include "bar.njk" %}
-      <aside class="shrink-0 grow-0 basis-[26rem] sticky top-0  max-h-screen min-h-screen flex flex-col bg-slate-50">
+    </aside>
-        {% include "sidebar.njk" %}
-      </aside>
 
-      <main class="px-8 pt-[7.5rem] min-h-full max-w-[1120px]">
+    <main class="px-8 desktop:pt-[7.5rem] pt-6 min-h-full max-w-[1120px] ">
-        <div>
+      <div>
-          <h2 class="text-3xl font-bold pb-4">
+        <h2 class="text-3xl font-bold pb-4">
-            {{ title | safe }}
+          {{ title | safe }}
-          </h2>
+        </h2>
-          {{ content | safe }}
+        {{ content | safe }}
-        </div>
+      </div>
-      </main>
+    </main>
-
-      {# <div class="row-start-3 col-span-6 self-end">
-      {% include "footer.njk" %}
-      </div> #}
-    </div>
 
     <script>
+
       // Script for showing and acting upon the "scroll to top button"
       const scrollFunction = function () {
         button = document.getElementById("scrollbutton");
@@ -89,9 +83,7 @@
 
       // Scripts for filtering lists
       let dictionary = [];
-      let categories = document
+      let categories = [];
-        .getElementById("list")
-        .getElementsByClassName("category");
       let found = dictionary;
       let sw = "";
       let swl = 0;
@@ -215,6 +207,19 @@
       }
 
       $(document).ready(function () {
+        // Mobile menu
+        var menubutton = document.getElementById("navigation-button");
+        var navigation = document.getElementById("navigation");
+        if (menubutton !== null && navigation !== null) {
+            menubutton.addEventListener("click", () => {
+              if (navigation.classList.contains("hidden")) {
+                navigation.classList.remove("hidden");
+              } else {
+                navigation.classList.add("hidden");
+              }
+            })
+        }
+
         // Scroll button
         if (document.getElementById("scrollbutton") !== null) {
           scrollFunction();
@@ -236,8 +241,31 @@
             searchable = ".handschrift";
           }
           createIndex("list", searchable);
+          categories = document.getElementById("list").getElementsByClassName("category");
           {# $("input[name='keyword']").focus(); #}
           $("input[name='keyword']").keyup(search);
+
+
+          let select = document.getElementById("listselect");
+          if (select !== null) {
+            var sections = {};
+            var i = 0;
+            Array.prototype.forEach.call(categories, function(e) {
+              sections[e.id] = e.offsetTop;
+            });
+            window.onscroll = function() {
+              var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
+              for (i in sections) {
+                if (sections[i] <= scrollPosition) {
+                  var opt = select.querySelector('option[value="#' + i + '"]');
+                  console.log(opt);
+                  if (opt !== null) {
+                    opt.selected = true;
+                  }
+                }
+              }
+            };
+          }
         }
       });
     </script>

src/static/css/site.css

@@ -113,7 +113,7 @@
       @apply ml-4
     }
 
-    .sidebar-nav .active {
+    .active {
       @apply font-bold
     }
 
@@ -193,12 +193,7 @@
   .sidebar-nav .active::before {
     content: "· ";
   }
-
+  
-  aside {
-    min-height: 100vh;
-    max-height: calc(10rem + 100vh);
-  }
-
   .twocolumns {
     columns: 2;
   }