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

frontend/src/main.less

@@ -292,7 +292,7 @@ main {
 			}
 		}
 
-		label {
+		.preview-label {
 			flex-grow: 1;
 			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
 			// inline ist
@@ -300,6 +300,14 @@ main {
 		}
 	}
 
+	a.option:hover {
+		text-decoration: none;
+
+		.option-border {
+			border-color: var(--accent2);
+		}
+	}
+
 	input[type = "radio"] {
 		display: none;
 	}

frontend/src/main.ts

@@ -14,6 +14,7 @@ window.addEventListener("load", () => {
 			console.log(el);
 			el.addEventListener('input', onInputHandler);
 		}
+	}
 
 	for (const op of document.querySelectorAll('.option .preview')) {
 		console.log(op);
@@ -35,5 +36,4 @@ window.addEventListener("load", () => {
 		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>