improvements

DDP-Projekt · Jun 14, 2024 · f887437 · f887437
1 parent 284ddef
commit f887437
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 162 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -3,7 +3,7 @@
 	--content-size: calc(100% - var(--sidebar-size));
 }
 
-:has(#dark-mode-check:checked) {
+:root:has(#dark-mode-check:checked) {
 	--text-color: antiquewhite;
 	--link-hover-color: aliceblue;
 	--bg-color: #444;
@@ -23,7 +23,7 @@
 	--hamburger-background: black;
 }
 
-:has(#dark-mode-check:not(:checked)) {
+:root:has(#dark-mode-check:not(:checked)) {
 	--text-color: #454545;
 	--link-hover-color: #212121;
 	--bg-color: #fafafa;
@@ -69,6 +69,7 @@
 		z-index: 2; /* make the hamburger on top of everything */
 		font-weight: normal; /* to prevent the hamburger from going bold on click*/
 		transition: left 350ms ease-in-out;
+		cursor: pointer;
 	}
 	#hamburger {
 		display: none;
@@ -105,16 +106,6 @@ html, body {
 	overflow: hidden;
 }
 
-.btn {
-	cursor: pointer;
-}
-
-.language-picker {
-	position: absolute;
-	right: 50px;
-	top: 10px;
-}
-
 #seitenleiste h2#überschrift {
 	margin-bottom: 40px;
 	text-decoration: underline;
@@ -208,10 +199,6 @@ a:hover {
 	filter: invert();
 }
 
-#artikel {
-	width: auto;
-}
-
 #artikel-navigation {
 	position: fixed;
 	display: flex;
@@ -233,6 +220,7 @@ a:hover {
 	font-size: large;
 	font-weight: 900;
 	transition: background-color 200ms;
+	cursor: pointer;
 }
 
 #artikel-navigation a:hover {

diff --git a/assets/img/title-dark.svg b/assets/img/title-dark.svg
diff --git a/assets/js/todoElement.js b/assets/js/todoElement.js
diff --git a/i18n/de.toml b/i18n/de.toml
@@ -9,3 +9,6 @@ aliases = "Aliase"
 impl = "Implementation"
 externImpl = "Implementiert in"
 type = "Typ"
+siteLink = "zur Englischen Seite"
+ldMode = "Hell-/Dunkelmodus"
+otherFlag = "en.svg"
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -8,4 +8,7 @@ returnType = "Return type"
 aliases = "Aliases"
 impl = "Implementation"
 externImpl = "Implemented in"
-type = "Type"
+type = "Type"
+siteLink = "to German site"
+ldMode = "light/dark mode"
+otherFlag = "de.svg"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -12,7 +12,8 @@
 		</main>
 	</body>
 	<script>
-		window.addEventListener("beforeunload", () => {
+		window.addEventListener("visibilitychange", () => {
+			if (!document.hidden) return;
 			localStorage.setItem("sidebar-scroll", document.getElementById("seitenleiste").scrollTop);
 			localStorage.setItem("dark-mode", document.querySelector('#dark-mode-check').checked);
 		});

diff --git a/layouts/partials/artikel.html b/layouts/partials/artikel.html
@@ -1,3 +1,6 @@
 <article id="artikel">
+	{{- $mdStyle := resources.Get "css/md-style.css" | fingerprint }}
+	<link rel="stylesheet" href="{{ $mdStyle.RelPermalink }}" integrity="{{ $mdStyle.Data.Integrity }}">
+
 	{{ .Content -}}
 </article>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -2,7 +2,7 @@
 	<title>DDP Bedienungsanleitung</title>
 	<base href="/Bedienungsanleitung/">
 
-	<meta name="description" content="{{ T "desc"}}">
+	<meta name="description" content='{{ T "desc"}}'>
 	<meta name="msapplication-TileColor" content="#da532c">
 	<meta name="msapplication-config" content="favicon/browserconfig.xml">
 	<meta name="theme-color" content="#ffffff">
@@ -20,14 +20,29 @@
 		{{.Publish}}
 		<link rel="preload" as="font" href="{{ .RelPermalink }}" type="font/ttf" crossorigin>
 	{{ end }}
+
 	{{- range resources.Match "img/*" -}} {{.Publish}} {{ end }}
-	{{- range resources.Match "js/*" -}} {{.Publish}} {{ end }}
 
 	{{- $style := resources.Get "css/style.css" | fingerprint }}
-	{{- $mdStyle := resources.Get "css/md-style.css" | fingerprint }}
-
-	<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="$style.Data.Integrity">
-	<link rel="stylesheet" href="{{ $mdStyle.RelPermalink }}" integrity="$mdStyle.Data.Integrity">
+	<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
 
-	<script src="js/todoElement.js" defer></script>
+	<script defer>
+		class TODOElement extends HTMLElement {
+			constructor() {
+				// Always call super first in constructor
+				super();
+
+				this.attachShadow({mode: 'open'});
+
+				const div = document.createElement('div');
+				const text = document.createElement('p');
+				text.innerHTML = "An diesem Artikel muss noch gearbeitet werden!";
+				div.appendChild(text);
+
+				this.shadowRoot.append(div);
+			}
+		}
+
+		customElements.define('to-do', TODOElement);
+	</script>
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,18 +1,12 @@
 <header id="kopf">
-	<s id="linie"><a href="https://ddp.le0n.dev" alt="titel" id="titel"></a></s>
+	<s id="linie"><a href="https://ddp.le0n.dev" alt="titel" id="titel" title="homepage"></a></s>
 	<div id="toggles">
-		{{- if eq .Language.Lang "de" }} 
-			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/en.svg" title="to German site" width="30" height="20"></a>
-		{{- else }}
-			<a href="{{ (index .Translations 0).Permalink}}"><img id="sprach-toggle" alt="sprach-toggle" src="img/de.svg" title="zur Englischen Seite" width="30" height="20"></a>
-		{{- end }}
-		<input type="checkbox" id="dark-mode-check" title="light/dark mode" checked>
+		<a href="{{ (index .Translations 0).Permalink}}">
+			<img id="sprach-toggle" alt="sprach-toggle" src='img/{{ T "otherFlag" }}' title='{{ T "siteLink" }}' width="30" height="20">
+		</a>
+		<input type="checkbox" id="dark-mode-check" title='{{ T "ldMode" }}' checked>
 	</div>
 	<script>
-		if (window.localStorage.getItem("dark-mode") === "false") {
-			document.querySelector('#dark-mode-check').checked = false;
-		} else {
-			document.querySelector('#dark-mode-check').checked = true;
-		}
+		document.querySelector('#dark-mode-check').checked = window.localStorage.getItem("dark-mode") !== "false";
 	</script>
 </header>
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
@@ -36,6 +36,6 @@
         {{ $prev = index ($prev.Pages | last 1) 0 }}
     {{ end }}
 
-    <a href="{{ with or $prev $root }} {{ .RelPermalink }} {{ end }} " class="btn" title="{{ T "prev" }}">&lt;</a>
-    <a href="{{ with or $next $root }} {{ .RelPermalink }} {{ end }}" class="btn" title="{{ T "next" }}">&gt;</a>
+    <a href="{{ with or $prev $root }} {{ .RelPermalink }} {{ end }} " title='{{ T "prev" }}'>&lt;</a>
+    <a href="{{ with or $next $root }} {{ .RelPermalink }} {{ end }}" title='{{ T "next" }}'>&gt;</a>
 </nav>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,5 +1,5 @@
 <input type="checkbox" id="hamburger" class="hamburger-btn">
-<label for="hamburger" class="hamburger-btn btn">≡</label>
+<label for="hamburger" class="hamburger-btn">≡</label>
 <nav id="seitenleiste">
 	<div style="margin: 10px;">
 		<h2 id="überschrift">{{ T "toc" }}</h2>
@@ -28,13 +28,11 @@ <h2 id="überschrift">{{ T "toc" }}</h2>
 			<script>
 				const details = document.querySelectorAll('#artikel-links details');
 				for (const detail of details) {
+					detail.open = window.localStorage.getItem(detail.id) === "true";
+
 					detail.addEventListener('toggle', (event) => {
 						window.localStorage.setItem(event.target.id, event.target.open);
 					})
-
-					if (window.localStorage.getItem(detail.id) === "true") {
-						detail.open = true;
-					}
 				}
 			</script>
 		</ol>