Merge branch 'layout-index' into 'main'

apply layout of "template preview" for index page "schilder preview"

Closes #1

See merge request !6

frontend/src/main.less

@@ -87,9 +87,11 @@ a {
 	}
 	&:hover {
 		text-decoration: underline;
+		&, label {
 			cursor: pointer;
 		}
 	}
+}
 
 nav {
 	&, #nav-links {
@@ -289,15 +291,19 @@ main {
 			}
 		}
 
+		&:hover .option-border {
+			border-color: var(--accent2);
+		}
+
 		input[type = "radio"] {
 			display: none;
 
 			&:checked + .option-border {
-				border-color: var(--accent2);
+				border-color: var(--accent);
 			}
 		}
 
-		label {
+		.preview-label {
 			flex-grow: 1;
 			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
 			// inline ist
@@ -305,6 +311,14 @@ main {
 		}
 	}
 
+	a.option:hover {
+		text-decoration: none;
+
+		.option-border {
+			border-color: var(--accent2);
+		}
+	}
+
 	input[type = "radio"] {
 		display: none;
 	}

frontend/src/main.ts

@@ -11,29 +11,32 @@ function onInputHandler(event: Event) {
 window.addEventListener("load", () => {
 	if (document.getElementById('preview')) {
 		for (const el of document.getElementsByClassName('input-dispatch')) {
-			console.log(el);
+			console.debug(el);
 			el.addEventListener('input', onInputHandler);
 		}
+	}
 
 	for (const op of document.querySelectorAll('.option .preview')) {
-			console.log(op);
+		console.debug(op);
 		const input_id = (op as HTMLElement).dataset.for;
-			if (!input_id) {
-				console.error("Missing data-for attribute for", op);
-				continue;
-			}
+		let handler: (_: Event) => void;
+		if (input_id) {
 			const input = document.getElementById(input_id);
 			if (!input || input === null) {
 				console.error("Unable to find input for", op);
 				continue;
 			}
 
-			const handler = (_: Event) => {
-				console.log("clicked");
+			handler = (_: Event) => {
 				(input as HTMLInputElement).checked = true;
-			};
+			}
+		} else {
+			const p = (op as HTMLElement).parentNode;
+			handler = (_: Event) => {
+				window.location.href = (p as HTMLAnchorElement).href;
+			}
+		}
 		op.addEventListener('click', handler);
 		(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
 	}
-	}
 });

schilder2000/templates/index.html.j2

@@ -6,19 +6,18 @@
 
 {% block main %}
 	<h2>Existierende Schilder:</h2>
-	<div class="sign-grid">
+	{#- wir klauen uns hier an der Stelle einfach mal das Layout vom schild templateselect #}
+	<div class="select templateselect">
 		{%- for schild in schilder %}
-			<a class="sign" href="{{ url_for('.schild', ident=schild.ident) }}">
-				<div>
+			<a class="sign option" href="{{ url_for('.schild', ident=schild.ident) }}">
 				<iframe
-						class="preview preview-small"
+					class="preview option-border"
 					src="{{ url_for('instance.schild_html', ident=schild.ident) }}"
 					id="preview:{{ schild.ident }}">
 				</iframe>
 				<label for="preview:{{ schild.ident }}" class="preview-label">
 					{{ schild.title }}
 				</label>
-				</div>
 			</a>
 		{%- endfor %}
 	</div>