maltejur/hsarch
maltejur/hsarch
1
0
Fork 0
Code Activity

Compare commits

base: maltejur:e38df0f8ca5436c076c4a9f140440d872312006c
Branches Tags
maltejur:master
maltejur:old-tree
...
compare: maltejur:1c8f0395864679cf8b3b535466ee61f8b7b3ecc1
Branches Tags
maltejur:master
maltejur:old-tree

23 commits
e38df0f8ca ... 1c8f039586

Author SHA1 Message Date
Malte Jürgens
1c8f039586
use correct url 2023-07-15 13:33:29 +02:00
Malte Jürgens
889ca49117
use different base url 2023-07-15 13:33:29 +02:00
Malte Jürgens
bb56aa423d
Revert "update dependencies" 
This reverts commit 71ae67f164.
 2023-07-15 13:33:28 +02:00
Malte Jürgens
996188e5d6
improve mobile download dropdown 2023-07-15 13:33:28 +02:00
Malte Jürgens
0d31d77828
remove skeleton 2023-07-15 13:33:28 +02:00
Malte Jürgens
1ffe910847
update dependencies 2023-07-15 13:33:28 +02:00
Malte Jürgens
cfe24b2b6e
hertzschlag/82 2023-07-15 13:33:28 +02:00
Malte Jürgens
5a07f90565
update hertzblatt domain 2023-07-15 13:33:25 +02:00
Malte Jürgens
f3bbabe8e1
scrollbar 2023-07-15 13:32:55 +02:00
Malte Jürgens
f68551f3e2
embed 2023-07-15 13:32:55 +02:00
Malte Jürgens
8b1dc35104
fix 2023-07-15 13:32:55 +02:00
Malte Jürgens
3589cab69a
hamburger menu und impressum 2023-07-15 13:32:54 +02:00
Malte Jürgens
a3e1a3b152
use baseUrl if downloadUrl is not available 2023-07-15 13:31:39 +02:00
Malte Jürgens
ebde75ab81
remove external cdns 2023-07-15 13:31:12 +02:00
Malte Jürgens
e8c9019f96
download link fix 2023-07-15 13:31:12 +02:00
maltejur
b205e9ef59
Update README.md 2023-07-15 13:31:12 +02:00
Malte Jürgens
40b322a907
update baseurl 2023-07-15 13:31:12 +02:00
Malte Jürgens
9287ddd877
update baseurl 2023-07-15 13:31:11 +02:00
Malte Jürgens
92a5cd373c
update baseurl 2023-07-15 13:31:11 +02:00
Malte Jürgens
48defc85c8
update baseurl 2023-07-15 13:31:02 +02:00
Malte Jürgens
5f9e70ee95
use pdf.js 2023-07-15 13:30:24 +02:00
Malte Jürgens
06b4611dcc
button skeleton 2023-07-15 13:30:23 +02:00
Malte Jürgens
17aacdfae5
remove yumpu 2023-07-15 13:30:20 +02:00
29 changed files with 5388 additions and 160 deletions
Show stats Expand all files Collapse all files

26
README.md Normal file
View file

@ -0,0 +1,26 @@
# HertzSCHLAG Archiv
## Ausgabe hinzufügen
### (0. Vorraussetzungen)
- Linux oder WSL mit Git, Git LFS, GhostScript und ImageMagick ([dieses](https://stackoverflow.com/a/59193253) Problem beachten)
- Schreibzugriff auf dieses Repo
### 1. `data.json` aktualisieren
In `assets/data.json` die relevanten Daten der Ausgabe einfügen.
### 2. PDF hinzufügen
Um ein PDF hinzuzufügen, `scripts/add_pdf.sh` ausführen und bei Nachfrage gleich änderungen commiten. Beispiel:
```
scripts/add_pdf.sh ~/Downloads/hs_ausgabe81.pdf hertzschlag 81
```
(Ist nen Bash script, also nur auf Linux/OSX/WSL)
### 3. Änderungen pushen
Mit `git push` Änderungen pushen, die Website sollte über Vercel automatisch aktualisiert werden.

41
assets/data.json
View file

@ -1,5 +1,5 @@
{ {
"baseUrl": "https://files.hertzschlag.eu/", "baseUrl": "https://assets.hsarch.polar.onl/",
"hertzschlag": [ "hertzschlag": [
{ {
"Ausgabe": "1", "Ausgabe": "1",
@ -9,8 +9,7 @@
"Chefredakteur(-e)": "Steffen Micheel", "Chefredakteur(-e)": "Steffen Micheel",
"Umschlag/Innenteil": "SW/SW", "Umschlag/Innenteil": "SW/SW",
"Preis": "0,50 DM", "Preis": "0,50 DM",
"Auflage": null, "Auflage": null
"yumpu": "BN8T6Zhi1GqOInvo"
}, },
{ {
"Ausgabe": "2", "Ausgabe": "2",
@ -20,8 +19,7 @@
"Chefredakteur(-e)": "Steffen Micheel", "Chefredakteur(-e)": "Steffen Micheel",
"Umschlag/Innenteil": "SW/SW", "Umschlag/Innenteil": "SW/SW",
"Preis": "0,50 DM", "Preis": "0,50 DM",
"Auflage": null, "Auflage": null
"yumpu": "2ZH4Djo8V3RsNBah"
}, },
{ {
"Ausgabe": "3", "Ausgabe": "3",
@ -857,8 +855,7 @@
"Chefredakteur(-e)": "Richard Bendler", "Chefredakteur(-e)": "Richard Bendler",
"Umschlag/Innenteil": "Farbe/Farbe", "Umschlag/Innenteil": "Farbe/Farbe",
"Preis": "1,00 €", "Preis": "1,00 €",
"Auflage": 500, "Auflage": 500
"yumpu": "pea6oUMFXRNfg9jP"
}, },
{ {
"Ausgabe": "81", "Ausgabe": "81",
@ -869,6 +866,16 @@
"Umschlag/Innenteil": "Farbe/Farbe", "Umschlag/Innenteil": "Farbe/Farbe",
"Preis": "2,00 €", "Preis": "2,00 €",
"Auflage": 300 "Auflage": 300
},
{
"Ausgabe": "82",
"Thema": "Nostalgie",
"Seitenzahl": "54",
"Erscheinungsdatum": "Dez.-22",
"Chefredakteur(-e)": "Philipp Mattke",
"Umschlag/Innenteil": "Farbe/Farbe",
"Preis": "2,00 €",
"Auflage": 300
} }
], ],
"hertzblatt": [ "hertzblatt": [
@ -977,7 +984,25 @@
"Name": "Corona edition No/1", "Name": "Corona edition No/1",
"Erscheinungsdatum": "25. März 2021", "Erscheinungsdatum": "25. März 2021",
"Ausgabe": "Corona-1", "Ausgabe": "Corona-1",
"Web": "https://blatt.hertzschlag.eu/" "Web": "https://hertzblatt.vercel.app"
},
{
"Name": "2022-1",
"Ausgabe": "2022-1",
"Erscheinungsdatum": "29. Juni 2022",
"Preis": "0,20 €"
},
{
"Name": "2022-2",
"Ausgabe": "2022-2",
"Erscheinungsdatum": "1. Juli 2022",
"Preis": "0,20 €"
},
{
"Name": "2022-3",
"Ausgabe": "2022-3",
"Erscheinungsdatum": "5. Juli 2022",
"Preis": "0,20 €"
} }
] ]
} }

2341
assets/font-awesome.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

BIN
assets/fonts/adobe-garamond-pro.otf Normal file
View file

Binary file not shown.

BIN
assets/fonts/adobe-garamond-pro.woff Normal file
View file

Binary file not shown.

BIN
assets/fonts/adobe-garamond-pro.woff2 Normal file
View file

Binary file not shown.

BIN
assets/fonts/fontawesome-webfont.eot Normal file
View file

Binary file not shown.

2671
assets/fonts/fontawesome-webfont.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
assets/fonts/fontawesome-webfont.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/fontawesome-webfont.woff Normal file
View file

Binary file not shown.

BIN
assets/fonts/fontawesome-webfont.woff2 Normal file
View file

Binary file not shown.

24
embedTest.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
max-width: 1000px;
margin: auto;
padding: 50px;
}
</style>
</head>
<body>
<iframe
src="http://localhost:1234/embed.html"
height="250px"
width="100%"
frameborder="0"
/>
</body>
</html>

4
package.json
View file

@ -5,8 +5,8 @@
"author": "maltejur <maltejur@web.de>", "author": "maltejur <maltejur@web.de>",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "parcel serve src/index.html", "dev": "parcel serve src/*.html",
"build": "parcel build src/index.html" "build": "parcel build src/*.html"
}, },
"dependencies": { "dependencies": {
"nprogress": "^0.2.0" "nprogress": "^0.2.0"

25
src/embed.css Normal file
View file

@ -0,0 +1,25 @@
body {
height: unset;
}
#main {
position: block;
height: 100vh !important;
padding-top: 0 !important;
overflow-y: hidden !important;
overflow-x: scroll;
}
.grid {
height: 100% !important;
max-height: 100% !important;
padding-top: 0 !important;
display: flex;
justify-content: left;
width: fit-content !important;
overflow-y: hidden !important;
}
.module {
width: max-content !important;
}

14
src/embed.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./embed.css" />
</head>
<body>
<div id="main"></div>
<script src="./embed.ts" type="module"></script>
</body>
</html>

12
src/embed.ts Normal file
View file

@ -0,0 +1,12 @@
import Home from "./modules/home";
import Router from "./modules/router";
new Router(
document.querySelector("#main")!,
{
"": () => Home({ embed: "true" }),
},
{
newUrl: "https://hsarch.hhgym.de",
}
);

64
src/index.html
View file

@ -1,37 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta
name="viewport"
content="min-width=400px, width=device-width, initial-scale = 1.0, maximum-scale=1.0"
charset="utf-8"
/>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="../assets/font-awesome.css" />
<title>HertzSCHLAG Archiv</title>
<link rel="icon" type="image/png" href="/assets/favicon.png" />
</head>
<head> <body>
<meta name="viewport" content="min-width=400px, width=device-width, initial-scale = 1.0, maximum-scale=1.0" <div id="header">
charset="utf-8" /> <img src="/assets/hertzlinie_l.svg" class="welle-l" />
<link rel="stylesheet" href="./style.css" /> <img src="/assets/hertzlinie_r.svg" class="welle-r" />
<script src="https://kit.fontawesome.com/c6918a20c8.js" crossorigin="anonymous"></script> <div id="innerHeader">
<link rel="stylesheet" href="https://use.typekit.net/iqo1nim.css"> <a href="#hertzschlag">
<title>HertzSCHLAG Archiv</title> <h1>HertzSCHLAG Archiv</h1>
<link rel="icon" type="image/png" href="../assets/favicon.png" /> </a>
</head> <nav>
<a href="#about">Impressum</a>
<body> </nav>
<div id="header"> </div>
<img src="../assets/hertzlinie_l.svg" class="welle-l" />
<img src="../assets/hertzlinie_r.svg" class="welle-r" />
<div id="innerHeader">
<a href="#">
<h1>HertzSCHLAG Archiv</h1>
</a>
<nav>
<a href="#liste" style="margin-left: 25px">Alle Ausgaben</a>
</nav>
</div> </div>
</div> <div id="main">
<div id="main"> <div id="home"></div>
<div id="home"></div> <div id="content">
<div id="content"> <div id="contentinner"></div>
<div id="contentinner"></div> <a id="back"></a>
<a id="back"></a> </div>
</div> </div>
</div> <script src="./script.ts" type="module"></script>
<script src="./script.ts" type="module"></script> </body>
</body> </html>
</html>

5
src/modules/about.ts
View file

@ -1,7 +1,8 @@
import { baseUrl } from "../../assets/data.json";
export default function About() { export default function About() {
const ret = document.createElement("div"); const ret = document.createElement("div");
ret.classList.add("pagewrapper"); ret.classList.add("pagewrapper");
ret.innerHTML = ret.innerHTML = `<div class='page'><img class='banner' src='${baseUrl}/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Kurfürstenstr. 12<br>52066 Aachen<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@dismail.de'>maltejur@dismail.de</a></div>`;
"<div class='page'><img class='banner' src='https://files.hertzschlag.eu/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Bergmannstraße 70<br>10961 Berlin<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@web.de'>maltejur@web.de</a></div>";
return ret; return ret;
} }

69
src/modules/ausgabeHertzblatt.ts
View file

@ -1,4 +1,3 @@
import { checkFile } from "./utils";
import json from "../../assets/data.json"; import json from "../../assets/data.json";
import Page from "./page"; import Page from "./page";
@ -7,46 +6,42 @@ export default function AusgabeHertzblatt(params) {
const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id); const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id);
if (ausg) { if (ausg === undefined) {
let pagehtml = ` throw new Error(params.id + " not found");
}
let pagehtml = `
<img class="cover" src="${json.baseUrl}hertzblatt/images/${ausg.Ausgabe}.jpg"></img> <img class="cover" src="${json.baseUrl}hertzblatt/images/${ausg.Ausgabe}.jpg"></img>
<h1>HertzBLATT ${ausg["Name"]}</h1> <h1>HertzBLATT ${ausg["Name"]}</h1>
`; `;
for (let i in ausg) { for (let i in ausg) {
if (ausg[i] != null && !["Web", "Ausgabe", "Name"].includes(i)) { if (ausg[i] != null && !["Web", "Ausgabe", "Name"].includes(i)) {
pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>"; pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
}
} }
if (ausg.Web)
pagehtml += `<a class="button" href="${ausg.Web}">
<i class="fas fa-link"></i>Link
</a>`;
checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
(exists) => {
if (exists) {
ret.innerHTML +=
// prettier-ignore
`
<a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
<i class="fas fa-file-pdf"></i>PDF Anzeigen
</a>
<button>
<i class="fas fa-download"></i>Download
<div class="dropdown">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf?download', '_self');">
<i class="fas fa-file-download"></i>Niedrige Qualität
</a>
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf?download', '_self');">
<i class="fas fa-file-download"></i>Hohe Qualität
</a>
</div>
</button>
`;
}
}
);
ret.innerHTML = pagehtml;
} }
if (ausg.Web)
pagehtml += `<a class="button" href="${ausg.Web}">
<i class="fa fa-link"></i>Link
</a>`;
pagehtml += `
<a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
<i class="fa fa-file-pdf-o"></i>PDF Anzeigen
</a>
<button>
<i class="fa fa-download"></i>Download
<div class="dropdown">
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
<i class="fa fa-file-download"></i>Niedrige Qualität
</a>
<a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
<i class="fa fa-file-download"></i>Hohe Qualität
</a>
</div>
</button>`;
ret.innerHTML = pagehtml;
return Page(ret); return Page(ret);
} }

51
src/modules/ausgabeHertzschlag.ts
View file

@ -1,4 +1,3 @@
import { checkFile } from "./utils";
import json from "../../assets/data.json"; import json from "../../assets/data.json";
import Page from "./page"; import Page from "./page";
@ -7,6 +6,10 @@ export default function AusgabeHertzschlag(params) {
const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id); const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id);
if (ausg === undefined) {
throw new Error(params.id + " not found");
}
let pagehtml = ` let pagehtml = `
<img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img> <img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img>
<h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2> <h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2>
@ -23,31 +26,29 @@ export default function AusgabeHertzschlag(params) {
pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>"; pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
} }
} }
checkFile(`${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf`).then(
(exists) => { pagehtml += `
if (exists) { <a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
ret.innerHTML += <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
// prettier-ignore </a>
` <button>
<a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf"> <i class="fa fa-download"></i>Download
<i class="fas fa-file-pdf"></i>PDF Anzeigen <div class="dropdown">
</a> <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${
<button> ausg["Ausgabe"]
<i class="fas fa-download"></i>Download }.pdf">
<div class="dropdown"> <i class="fa fa-file"></i>Niedrige Qualität
<a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf?download"> </a>
<i class="fas fa-file-download"></i>Niedrige Qualität <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${
</a> ausg["Ausgabe"]
<a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf?download"> }.pdf">
<i class="fas fa-file-download"></i>Hohe Qualität <i class="fa fa-file"></i>Hohe Qualität
</a> </a>
</div> </div>
</button> </button>
`; `;
}
}
);
ret.innerHTML = pagehtml; ret.innerHTML = pagehtml;
return Page(ret); return Page(ret);
} }

4
src/modules/headerHertzblatt.ts
View file

@ -5,9 +5,13 @@ export default function HeaderHertzschlag() {
<a href="#hertzblatt"> <a href="#hertzblatt">
<h1>hertz heute / HertzBLATT Archiv</h1> <h1>hertz heute / HertzBLATT Archiv</h1>
</a> </a>
<input type="checkbox" id="nav-toggle" name="nav-toggle" />
<nav> <nav>
<a href="#" style="margin-left: 25px">HertzSCHLAG Archiv</a> <a href="#" style="margin-left: 25px">HertzSCHLAG Archiv</a>
<a href="#about" style="margin-left: 25px">Impressum</a>
<label for="nav-toggle">✕</label>
</nav> </nav>
<label for="nav-toggle">☰</label>
`; `;
return el; return el;

4
src/modules/headerHertzschlag.ts
View file

@ -5,10 +5,14 @@ export default function HeaderHertzschlag() {
<a href="#"> <a href="#">
<h1>HertzSCHLAG Archiv</h1> <h1>HertzSCHLAG Archiv</h1>
</a> </a>
<input type="checkbox" id="nav-toggle" name="nav-toggle" />
<nav> <nav>
<a href="#hertzblatt" style="margin-left: 25px">HertzBLATT Archiv</a> <a href="#hertzblatt" style="margin-left: 25px">HertzBLATT Archiv</a>
<a href="#hertzschlag/liste" style="margin-left: 25px">Alle Ausgaben</a> <a href="#hertzschlag/liste" style="margin-left: 25px">Alle Ausgaben</a>
<a href="#about" style="margin-left: 25px">Impressum</a>
<label for="nav-toggle">✕</label>
</nav> </nav>
<label for="nav-toggle">☰</label>
`; `;
return el; return el;

12
src/modules/home.ts
View file

@ -1,13 +1,19 @@
import json from "../../assets/data.json"; import json from "../../assets/data.json";
import { Params } from "../models";
export default function Home() { export default function Home(params: Params) {
const ret = document.createElement("div"); const ret = document.createElement("div");
ret.classList.add("grid"); ret.classList.add("grid");
let html = ""; let html = "";
json.hertzschlag.forEach((i) => { let ausgaben = json.hertzschlag;
if (params.embed) {
ausgaben = ausgaben.reverse().slice(0, 10);
}
ausgaben.forEach((i) => {
html += ` html += `
<a class="module" href="#hertzschlag/${i.Ausgabe}"> <a class="module" href="/#hertzschlag/${i.Ausgabe}" target="_top">
<img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img> <img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img>
<div class="moduleLabel"> <div class="moduleLabel">
<h3>HS ${i.Ausgabe}</h3> <h3>HS ${i.Ausgabe}</h3>

2
src/modules/page.ts
View file

@ -3,7 +3,7 @@ export default function Page(content: HTMLElement) {
el.classList.add("page"); el.classList.add("page");
el.innerHTML = el.innerHTML =
'<div class="back" onclick="window.history.back()"><i class="fas fa-arrow-left" aria-hidden="true"></i></div>'; '<div class="back" onclick="window.history.back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></div>';
el.appendChild(content); el.appendChild(content);
return el; return el;

2
src/modules/pdf.ts
View file

@ -6,7 +6,7 @@ export default function Pdf(params: Params, type = "hertzschlag") {
ret.classList.add("iframe"); ret.classList.add("iframe");
const iframe = document.createElement("iframe"); const iframe = document.createElement("iframe");
iframe.src = `${json.baseUrl}${type}/pdf/compressed/${params.id}.pdf`; iframe.src = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${json.baseUrl}${type}/pdf/compressed/${params.id}.pdf?view`;
ret.appendChild(iframe); ret.appendChild(iframe);
return ret; return ret;

13
src/modules/router.ts
View file

@ -9,13 +9,16 @@ export default class Router {
constructor( constructor(
element: HTMLElement, element: HTMLElement,
routes: Routes, routes: Routes,
onpagechange: (route: string) => void, options: {
lazy = false onpagechange?: (route: string) => void;
lazy?: boolean;
newUrl?: string;
} = {}
) { ) {
this.routes = routes; this.routes = routes;
this.el = element; this.el = element;
this.onpagechange = onpagechange; this.onpagechange = options.onpagechange || (() => {});
this.lazy = lazy; this.lazy = options.lazy || false;
window.addEventListener("hashchange", this.onhashchange.bind(this)); window.addEventListener("hashchange", this.onhashchange.bind(this));
this.onhashchange(); this.onhashchange();
} }
@ -58,6 +61,8 @@ export default class Router {
if (!this.lazy && !didNavigate) { if (!this.lazy && !didNavigate) {
this.el.innerHTML = ""; this.el.innerHTML = "";
} }
const navToggle = document.getElementById("nav-toggle") as HTMLInputElement;
if (navToggle && navToggle.checked) navToggle.checked = false;
this.onpagechange(hash.slice(1)); this.onpagechange(hash.slice(1));
} }
} }

10
src/modules/utils.ts
View file

@ -1,13 +1,3 @@
export function checkFile(url) {
return new Promise((resolve) => {
fetch(url, {
method: "HEAD",
})
.catch(() => resolve(false))
.then(() => resolve(true));
});
}
export function downloadFile(sUrl: string) { export function downloadFile(sUrl: string) {
var link = document.createElement("a"); var link = document.createElement("a");
link.href = sUrl; link.href = sUrl;

53
src/script.ts
View file

@ -11,21 +11,17 @@ import Pdf from "./modules/pdf";
import NProgress from "nprogress/nprogress"; import NProgress from "nprogress/nprogress";
import "nprogress/nprogress.css"; import "nprogress/nprogress.css";
new Router( new Router(document.querySelector("#contentinner")!, {
document.querySelector("#contentinner"), "hertzschlag/:id": AusgabeHertzschlag,
{ "hertzschlag/:id/pdf": Pdf,
"hertzschlag/:id": AusgabeHertzschlag, "hertzschlag/liste": Liste,
"hertzschlag/:id/pdf": Pdf, "hertzblatt/:id": AusgabeHertzblatt,
"hertzschlag/liste": Liste, "hertzblatt/:id/pdf": (params) => Pdf(params, "hertzblatt"),
"hertzblatt/:id": AusgabeHertzblatt, about: About,
"hertzblatt/:id/pdf": (params) => Pdf(params, "hertzblatt"), });
about: About,
},
() => {}
);
new Router( new Router(
document.querySelector("#home"), document.querySelector("#home")!,
{ {
"": Home, "": Home,
hertzschlag: Home, hertzschlag: Home,
@ -33,18 +29,20 @@ new Router(
hertzblatt: HomeHertzblatt, hertzblatt: HomeHertzblatt,
"hertzblatt/::": HomeHertzblatt, "hertzblatt/::": HomeHertzblatt,
}, },
(route) => { {
if (route == "" || route == "hertzschlag" || route == "hertzblatt") { onpagechange(route) {
document.body.classList.remove("open"); if (route == "" || route == "hertzschlag" || route == "hertzblatt") {
} else { document.body.classList.remove("open");
document.body.classList.add("open"); } else {
} document.body.classList.add("open");
}, }
true },
lazy: true,
}
); );
new Router( new Router(
document.querySelector("#innerHeader"), document.querySelector("#innerHeader")!,
{ {
"": HeaderHertzschlag, "": HeaderHertzschlag,
hertzschlag: HeaderHertzschlag, hertzschlag: HeaderHertzschlag,
@ -52,8 +50,9 @@ new Router(
hertzblatt: HeaderHertzblatt, hertzblatt: HeaderHertzblatt,
"hertzblatt/::": HeaderHertzblatt, "hertzblatt/::": HeaderHertzblatt,
}, },
() => {}, {
true lazy: true,
}
); );
// Entfert Ladebalken // Entfert Ladebalken
@ -63,10 +62,10 @@ document.addEventListener("readystatechange", (event) => {
} }
}); });
document.getElementById("back").addEventListener("click", () => { document.getElementById("back")!.addEventListener("click", () => {
window.location.hash = document window.location.hash = document
.getElementById("home") .getElementById("home")!
.getAttribute("currentroute"); .getAttribute("currentroute")!;
}); });
// Startet Ladebalken // Startet Ladebalken

101
src/style.css
View file

@ -1,3 +1,14 @@
@font-face {
font-family: "adobe-garamond-pro";
src: url("../assets/fonts/adobe-garamond-pro.woff2") format("woff2"),
url("../assets/fonts/adobe-garamond-pro.woff") format("woff"),
url("../assets/fonts/adobe-garamond-pro.otf") format("opentype");
font-display: auto;
font-style: normal;
font-weight: 400;
font-stretch: normal;
}
html { html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@ -93,6 +104,14 @@ body {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
#header input {
display: none;
}
#header label {
display: none;
}
.welle-l { .welle-l {
position: fixed; position: fixed;
height: 30px; height: 30px;
@ -123,7 +142,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 0; grid-gap: 0;
height: calc(100% - 5em); max-height: calc(100% - 5em);
padding-top: 5em; padding-top: 5em;
} }
@ -161,24 +180,33 @@ body {
transform: translateY(-4px); transform: translateY(-4px);
} }
.impressum {
margin: auto;
color: white;
}
button, button,
.button { .button {
background-color: rgb(201, 2, 2);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
color: white;
padding: 15px 20px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer;
margin-right: 1em; margin-right: 1em;
margin-top: 1em; margin-top: 1em;
transition: background-color 0.2s ease; padding: 15px 20px;
position: relative; position: relative;
} }
button,
.button {
background-color: rgb(201, 2, 2);
color: white;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover, button:hover,
.button:hover { .button:hover {
background-color: darkred; background-color: darkred;
@ -224,6 +252,22 @@ button:focus .dropdown,
transform: translateY(0); transform: translateY(0);
} }
@media only screen and (max-width: 40em) {
.dropdown,
button:focus .dropdown,
.button:focus .dropdown,
.dropdown:hover {
position: fixed !important;
height: fit-content;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: auto;
padding: 10px;
}
}
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -274,10 +318,45 @@ iframe {
} }
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 900px) {
#header nav { #header nav {
display: none; display: none;
} }
#header label {
display: initial;
color: white;
position: fixed;
top: 33px;
right: 110px;
cursor: pointer;
}
#header input:checked + nav {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 5;
}
#header nav label {
position: fixed;
top: 20px;
right: 20px;
color: white;
font-size: 2em;
}
#header nav a {
font-size: 1.6em !important;
}
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
@ -301,7 +380,7 @@ iframe {
.grid, .grid,
#main { #main {
height: calc(100% - 4em) !important; max-height: calc(100% - 4em) !important;
padding-top: 4em !important; padding-top: 4em !important;
} }
@ -316,6 +395,12 @@ iframe {
top: 25px; top: 25px;
right: 55px; right: 55px;
} }
#header label {
top: 25px;
right: 55px;
}
#header nav a { #header nav a {
font-size: 16px; font-size: 16px;
margin-left: 15px; margin-left: 15px;