Theodor-Springmann-Stiftung/jacoblenz
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/jacoblenz.git synced 2025-10-28 16:55:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobil Optimierungen

Browse Source
This commit is contained in:
Simon Martens
2023-02-07 23:21:09 +01:00
parent 0cc6f3bf8e
commit f94d53f9b5
14 changed files with 127 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/dynamic/handschriften.njk
View File

@@ -25,7 +25,7 @@ eleventyNavigation:
<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="text-xl font-bold mb-1.5">Abgekürzt zitierte Literatur</div>
<div class="mb-4 literaturliste twocolumns pr-8">
<div class="mb-4 literaturliste desktop:columns-2 pr-8">
<ul>
<li>
<b>Blei 1909/13:</b> Jakob Michael Reinhold Lenz: Gesammelte Schriften. Hrsg. von Franz Blei. 5 Bde. München, Leipzig: Müller 1909-1913
@@ -84,7 +84,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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<div class="hideifsearching">
Ort&nbsp;
<select onchange="window.location.href=this.value" id="listselect">
@@ -102,11 +102,11 @@ eleventyNavigation:
<button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
</div>
<div class="mt-4 w-full" id="list">
<div class="yearlist" id="list">
{%- for post in collections.handschriften -%}
<div class="bg-slate-100 p-4 handschrift-sammlung flex flex-row mb-8 w-full category" id="{{ post.data.Ort | safe }}">
<div class="text-xl grow font-bold self-start z-0 sticky top-12 order-0 pr-4">{{ post.data.Ort | safe }}</div>
<div class="grow-0 shrink-0 w-[90ch] border-slate-400 flex flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
<div class="category handschrift-sammlung !bg-slate-100 !py-5 !mb-12" id="{{ post.data.Ort | safe }}">
<div class="text-xl basis-1/5 font-bold self-start z-0 sticky top-14 pr-3 pl-3">{{ post.data.Ort | safe }}</div>
<div class=" basis-4/5 flex flex-col md:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
</div>
{%- endfor -%}
</div>

2
src/dynamic/posthume_ausgaben.njk
View File

@@ -10,7 +10,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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<div class="hideifsearching">
Jahr&nbsp;
<select onchange="window.location.href=this.value" id="listselect">

2
src/dynamic/sekundaerliteratur.njk
View File

@@ -19,7 +19,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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<div class="hideifsearching">
Jahr&nbsp;
<select onchange="window.location.href=this.value" id="listselect">

2
src/dynamic/selbstaendige_drucke.njk
View File

@@ -12,7 +12,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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<div class="hideifsearching">
Jahr&nbsp;
<select onchange="window.location.href=this.value" id="listselect">

2
src/dynamic/theaterauffuehrungen.njk
View File

@@ -15,7 +15,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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<div class="hideifsearching">
Jahr&nbsp;
<select onchange="window.location.href=this.value" id="listselect">

12
src/dynamic/unselbststaendige_drucke.njk
View File

@@ -31,11 +31,11 @@ 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 class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
<button id="scrollbutton" href="#top">↑&nbsp;hoch</a>
</div>
<div class="mt-4" id="list">
<div class="yearlist" id="list">
{% set werk = "" %}
{%- for post in collections.unselbststaendigedrucke -%}
{% if post.data.Werk !== werk %}
@@ -44,11 +44,11 @@ eleventyNavigation:
</div>
{% endif %}
{% set werk = post.data.Werk %}
<div class="flex flex-row mb-8 w-full category" id="{{ werk }}">
<div class="text-xl pl-3 pr-1 grow font-bold self-start z-0 sticky top-12 order-2" >{{ werk }}</div>
<div class="px-4 border-r-2 grow-0 shrink-0 w-[90ch] border-slate-400">
<div class="category !mb-12" id="{{ werk }}">
<div class="categorytitle grow-0 basis-1/5" >{{ werk }}</div>
<div class="categorybody grow shrink-0 basis-4/5">
{% endif %}
<div class="mb-3 pl-6 -indent-6 searchable">{{ post.content | safe }}</div>
<div class="searchable">{{ post.content | safe }}</div>
{%- endfor -%}
</div>
</div>

2
src/includes/footer.njk
View File

@@ -1,4 +1,4 @@
<footer class="hidden desktop:block text-base text-center py-1 px-4 grow-0 shrink-0 ">
<footer class="hidden desktop:block fixed bottom-0 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>

4
src/includes/header.njk
View File

@@ -5,13 +5,13 @@
<h1 class="px-3 py-2 pb-4 text-5xl font-bold text-center">
{{ config.title }}
</h1>
<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">
<h2 class="hidden desktop:block py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-lenz-11-blue 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>
</button>
</header>

6
src/includes/search.njk
View File

@@ -1,8 +1,8 @@
<div class="hidden desktop:block">
<div class="bg-slate-50 border-t border-slate-600 py-5 px-4">
<div class="bg-slate-50 border-t border-lenz-11-blue py-5 px-4">
<form class="flex flex-row w-full">
<input class="px-1.5 italic border border-slate-600 grow" type="text" placeholder="Suchbegriff..."/>
<button class="inline-block ml-2 px-2 border border-slate-600 ">Suche</button>
<input class="px-1.5 italic border border-lenz-11-blue grow" type="text" placeholder="Suchbegriff..."/>
<button class="inline-block ml-2 px-2 border border-lenz-11-blue ">Suche</button>
</form>
</div>
</div>

54
src/layouts/base.njk
View File

@@ -42,10 +42,10 @@
<meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
</head>
<body class="bg-slate-50 w-full h-full mx-auto flex flex-col
<body class="bg-slate-50 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
<aside class="flex flex-col shrink py-4 px-3 w-full
desktop:px-0 desktop:py-0 desktop:w-auto
desktop:shrink-0 desktop:grow-0 desktop:basis-[26rem] desktop:sticky desktop:top-0 desktop:max-h-screen desktop:min-h-screen desktop:bg-slate-50">
{% include "bar.njk" %}
</aside>
@@ -115,7 +115,19 @@
})
}
const search = function () {
const search = function (evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
searchreset();
return;
}
term = $("input[name='keyword']")
.val()
.trim() || '';
@@ -186,6 +198,15 @@
sw = term;
swl = term.length;
} else {
searchreset();
}
}
const searchreset = function() {
for (let item of found) {
$(item.element).unmark();
}
var hidden = document
.getElementById("list")
.querySelectorAll(".hidden-important");
@@ -203,7 +224,10 @@
$(".showifsearching").each((ind, el) => {
$(el).hide();
});
}
var input = document.querySelector("input[name='keyword']");
input.value = '';
input.focus();
}
$(document).ready(function () {
@@ -213,9 +237,13 @@
if (menubutton !== null && navigation !== null) {
menubutton.addEventListener("click", () => {
if (navigation.classList.contains("hidden")) {
navigation.classList.remove("hidden");
navigation
.classList
.remove("hidden");
} else {
navigation.classList.add("hidden");
navigation
.classList
.add("hidden");
}
})
}
@@ -241,16 +269,21 @@
searchable = ".handschrift";
}
createIndex("list", searchable);
categories = document.getElementById("list").getElementsByClassName("category");
categories = document
.getElementById("list")
.getElementsByClassName("category");
{# $("input[name='keyword']").focus(); #}
$("input[name='keyword']").keyup(search);
// Scrolling & List updating
let select = document.getElementById("listselect");
if (select !== null) {
var sections = {};
var i = 0;
Array.prototype.forEach.call(categories, function(e) {
Array
.prototype
.forEach
.call(categories, function (e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function () {
@@ -258,7 +291,6 @@
for (i in sections) {
if (sections[i] <= scrollPosition) {
var opt = select.querySelector('option[value="#' + i + '"]');
console.log(opt);
if (opt !== null) {
opt.selected = true;
}

2
src/static/css/output.css
View File

File diff suppressed because one or more lines are too long

37
src/static/css/site.css
View File

@@ -94,19 +94,23 @@
@layer components {
.searchbar {
@apply sticky top-0 z-20 bg-slate-100 px-4 py-0.5 pt-1.5 self-start w-full flex flex-row items-baseline gap-x-3
@apply sticky top-0 z-20 bg-slate-100 px-4 py-0.5 pt-1.5 self-start w-full sm:flex sm:flex-row items-baseline gap-x-3 border-b
}
.searchbar button {
@apply bg-white shrink py-0.5 px-1.5 border border-slate-300
@apply inline-block bg-white shrink py-0.5 px-1.5 border border-slate-300
}
.searchbar input {
@apply grow p-0.5 px-1 my-1 mb-2 border border-slate-300
@apply inline-block w-full sm:w-auto sm:grow p-0.5 px-1 my-1 mb-2 border border-slate-300
}
.hideifsearching {
@apply inline-block
}
.searchbar select {
@apply bg-white px-1.5 pt-1.5 pb-1 border border-slate-300
@apply inline-block bg-white px-1.5 pt-1.5 pb-1 border border-slate-300
}
.sidebar-nav li li {
@@ -117,40 +121,44 @@
@apply font-bold
}
.sidebar-nav .active::before {
@apply text-lenz-6-highlight
}
.yearlist {
@apply mt-4
@apply mt-4 w-full
}
.yearlist .category .categorytitle {
@apply text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-12 order-2
@apply text-xl pr-1 pl-3 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-14 sm:order-2
}
.yearlist .category .categorybody {
@apply px-4 border-r-2 grow py-2 border-slate-400
@apply sm:px-4 sm:border-r-2 grow md:border-lenz-12-lighterblue
}
.yearlist .category {
@apply flex flex-row w-full
@apply flex flex-col sm:flex-row w-full mb-5
}
.yearlist .searchable {
@apply mb-3 px-4 pl-6 -indent-6
@apply mt-3 px-4 pl-6 -indent-6
}
.yearlist .searchable:first-of-type {
@apply mt-0
}
.maincolumn {
@apply basis-4/5 grow-0
}
.Einzug {
}
.Kommentar {
@apply !indent-0 !pl-0
}
.handschrift-sammlung .handschrift {
@apply border basis-[31.5%] shrink-0 bg-white
@apply border md:basis-[48%] xl:basis-[31.5%] shrink-0 bg-white py-1
}
.handschrift-sammlung .ueberschrift-gruppe {
@@ -194,6 +202,7 @@
content: "· ";
}
.twocolumns {
columns: 2;
}

23
tailwind.config.js
View File

@@ -34,17 +34,18 @@ module.exports = {
'print': { 'raw': 'print' },
},
colors: {
'lenzHighlight': '#c00902',
'hamannLightHighlight': '#cc7878',
'hamannSlate': {
50: '#6A829E',
100: '#416C9E',
200: '#3F8FEB',
300: '#3270B8',
500: '#2B619E',
700: '#1E4570',
900: '#173557'
}
'lenz-12-lighterblue': '#1f4060',
'lenz-11-blue': '#13213f',
'lenz-10-darkblue': '#110a25',
'lenz-9-winered': '#290b22',
'lenz-8-darkred': '#491122',
'lenz-7-red': '#711824',
'lenz-6-highlight': '#9b1e24',
'lenz-5-pink': '#bc3047',
'lenz-4-rose': '#c95873',
'lenz-3-lightrose': '#cf899d',
'lenz-2-lightred': '#dab5c1',
'lenz-1-greyred': '#eadce1',
}
},
},