views/index: Show previews

frontend/src/main.less

@@ -120,6 +120,11 @@ main {
 	.sign img {
 		width: 100%;
 	}
+
+	& div {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
 .preview {
@@ -130,3 +135,11 @@ main {
 	background-color: #fff;
 	color: #000;
 }
+
+.preview-small {
+	width: 15rem;
+}
+
+.preview-label {
+	place-self: center;
+}

schilder2000/templates/index.html.j2

@@ -8,7 +8,18 @@
 	<h2>Existierende Schilder:</h2>
 	<div class="sign-grid">
 		{%- for schild in schilder %}
-			<a class="sign" href="{{ url_for('.schild', ident=schild.ident) }}">{{ schild.title }}</a>
+			<a class="sign" href="{{ url_for('.schild', ident=schild.ident) }}">
+				<div>
+					<iframe
+						class="preview preview-small"
+						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>
 {% endblock %}