Bessere Filtermöglichkeiten für Listen

This commit is contained in:
Simon Martens
2023-02-07 19:38:45 +01:00
parent d719a5aac2
commit 661a4a5196
15 changed files with 84 additions and 55 deletions

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

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

View File

@@ -1,6 +1,6 @@
<div class="grow"></div>
<footer class="text-base text-center py-1 px-4 grow-0 shrink-0">
{# <div class="hidden desktop:block grow"></div>
<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> #}

View File

@@ -1,11 +1,17 @@
<header>
<img class="px-12 pb-4 pt-8" src="/images/JLA.png" alt="jla-Logo">
<header class="flex flex-row justify-between desktop:justify-start desktop:block">
<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>

View File

@@ -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>

View File

@@ -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> #}

View File

@@ -42,17 +42,15 @@
<meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
</head>
<body class="bg-slate-50 w-full h-full">
<div class="
px-12
max-w-screen-2xl
mx-auto
flex flex-row">
<aside class="shrink-0 grow-0 basis-[26rem] sticky top-0 max-h-screen min-h-screen flex flex-col bg-slate-50">
{% include "sidebar.njk" %}
<body class="bg-slate-50 w-full h-full mx-auto flex flex-col
desktop:px-12 desktop:max-w-screen-2xl desktop:flex-row">
<aside class="flex flex-col shrink py-4 px-3
desktop:px-0 desktop:py-0
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">
{% include "bar.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>
<h2 class="text-3xl font-bold pb-4">
{{ title | safe }}
@@ -61,12 +59,8 @@
</div>
</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
.getElementById("list")
.getElementsByClassName("category");
let categories = [];
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>

File diff suppressed because one or more lines are too long

View File

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