Merge branch 'irgendwas-mit-design' into 'main'

A bunch of design stuff

See merge request !3

.editorconfig

@@ -6,7 +6,7 @@ end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{json,less,ts,html.j2}]
+[*.{json,less,ts,html.j2,css}]
 indent_style = tab
 indent_size = 4
 

examples/static/schild.css

@@ -12,8 +12,11 @@ body {
 	font-family: "Noto Sans", sans-serif;
 	padding: 0;
 	margin: 0;
+	background-color: #fff;
+	color: #000;
 	display: flex;
 	flex-direction: column;
+
 	@media not print {
 		/* This magic constant approximately corresponds to 48px at A4 size, but scales
 		 * with the viewport/iframe size

frontend/src/main.less

 // the threshold at which we consider the screen "mobile"
 @mobile_threshold: 700px;
+// the threshold at which we consider the screen "wide", i.e. display the preview on the
+// side instead of at the bottom
+@wide_threshold: 1700px;
+// the border around the options in the fieldset-select-like things
+@option_border: .3rem;
+// the minimum size of the left area in the form layout
+@label-width: 90px;
 
 * {
 	box-sizing: border-box;
@@ -13,6 +20,7 @@ body {
 	// adjust colors for light theme here
 	--bg: #fff;
 	--fg: #000;
+	--fg-dark: #bbb;
 	--accent: #80f;
 	--accent2: #c4f;
 
@@ -20,10 +28,39 @@ body {
 		// adjust colors for dark theme here
 		--bg: #222;
 		--fg: #fff;
+		--fg-dark: #888;
 	}
+}
+
+@inputs: ~'input[type = "text"], input[type = "number"], textarea, select';
+@buttons: ~'input[type = "submit"], button, a.button';
 
+body, @{inputs}, @{buttons} {
+	&, &:hover, &:visited {
 		background-color: var(--bg);
 		color: var(--fg);
+		// ja, user agents haben lack gesoffen
+		font-size: 1rem;
+	}
+}
+
+@{inputs}, @{buttons}, fieldset {
+	border: .15rem solid var(--fg-dark);
+	border-radius: .25rem;
+}
+
+@{inputs} {
+	padding: .2rem .3rem;
+}
+
+@{buttons} {
+	padding: .2rem .6rem;
+
+	&:hover {
+		border-color: var(--accent2);
+		cursor: pointer;
+		text-decoration: none;
+	}
 }
 
 a {
@@ -127,84 +164,126 @@ main {
 	}
 }
 
-.preview {
-	width: min(95vw, 100rem);
-	/* A4 aspect ratio: √2:1 */
-	aspect-ratio: 1.4142135623730951;
+.section-container {
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr;
 
-	background-color: #fff;
-	color: #000;
+	.section {
+		grid-column-start: 1;
 	}
 
-.preview-small {
-	width: 15rem;
+	@media screen and (min-width: @wide_threshold) {
+		grid-template-columns: 1fr 1fr;
+
+		.preview-section {
+			grid-column-start: 2;
+			grid-row: 1/span 3;
+		}
+	}
 }
 
-.preview-label {
-	place-self: center;
+.preview {
+	/* A4 aspect ratio: √2:1 */
+	aspect-ratio: 1.4142135623730951;
 }
 
-form {
-	display: inline-block;
+.preview-container .preview {
+	width: 100%;
 }
 
-@label-padding: 90px;
+// this is the form layout row container thingy
+.box {
+	display: grid;
+	grid-template-columns: min(@label-width, auto) 1fr;
+	align-items: baseline;
 
 	label.for-text {
 		display: inline-block;
-	min-width: @label-padding;
-	text-align: right;
+		justify-self: end;
+		font-size: 1.1rem;
 	}
 
 	input[type = "text"], textarea {
-	width: 300px;
+		justify-self: stretch;
 	}
 
 	textarea {
-	height: 5em;
-	vertical-align: top;
+		height: 5rem;
+	}
 }
 
-fieldset {
+// this is the form layout row with buttons in it
+.buttons {
 	display: flex;
-	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: stretch;
+}
+
+.box, .buttons {
+	margin: .5rem 0;
+	gap: 1ch;
 }
 
-fieldset > div {
+// these are the fieldsets containing select-like options modeled with radio buttons
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2 * @option_border;
+
+	.option {
 		display: flex;
-	gap: 0.5rem;
 		flex-direction: column;
+		gap: .5rem;
+
+		.preview {
+			width: 15rem;
+			cursor: pointer;
 		}
 
-.imageselect > div {
+		.preview-label {
+			place-self: center;
+		}
+
+		img {
 			width: 10rem;
-	display: flex;
-	gap: 0.5rem;
+			background-color: #fff;
 		}
 
-fieldset label {
-	flex-grow: 1;
+		.option-border {
+			border: @option_border solid var(--fg-dark);
+			border-radius: 3 * @option_border;
+
+			// iframe's behave nicely
+			&.preview {
+				padding: @option_border;
 			}
 
-.imageselect img {
-	width: 100%;
-	background-color: #fff;
+			// label>img doesn't
+			& > img {
+				border: @option_border solid var(--bg);
+				border-radius: 2 * @option_border;
+				object-fit: contain;
+			}
 		}
 
-fieldset input {
+		input[type = "radio"] {
 			display: none;
+
+			&:checked + .option-border {
+				border-color: var(--accent2);
+			}
 		}
 
-fieldset img,
-fieldset iframe,
-.preview-small {
-	border: 3px solid lightgray;
-	border-radius: 10px;
+		label {
+			flex-grow: 1;
+			// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
+			// inline ist
+			display: flex;
+		}
 	}
 
-input[type="radio"]:checked {
-	& + label > img,
-	& + iframe {
-		border:3px solid red;
+	input[type = "radio"] {
+		display: none;
 	}
 }

frontend/src/main.ts

 import './main.less';
 
-console.log("Hello World");
-
 function onInputHandler(event: Event) {
 	const preview = document.getElementById('preview') as HTMLIFrameElement;
 	const previewDoc = preview.contentDocument as Document;
@@ -12,9 +10,30 @@ function onInputHandler(event: Event) {
 
 window.addEventListener("load", () => {
 	if (document.getElementById('preview')) {
-		for (let el of document.getElementsByClassName('input-dispatch')) {
+		for (const el of document.getElementsByClassName('input-dispatch')) {
 			console.log(el);
 			el.addEventListener('input', onInputHandler);
 		}
+
+		for (const op of document.querySelectorAll('.option .preview')) {
+			console.log(op);
+			const input_id = (op as HTMLElement).dataset.for;
+			if (!input_id) {
+				console.error("Missing data-for attribute for", op);
+				continue;
+			}
+			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");
+				(input as HTMLInputElement).checked = true;
+			};
+			op.addEventListener('click', handler);
+			(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
+		}
 	}
 });

schilder2000/templates/schild.html.j2

@@ -28,7 +28,8 @@
 {%- endblock title %}
 
 {% block main -%}
-	<section>
+	<div class="section-container">
+		<div class="section">
 			{%- with messages = get_flashed_messages() -%}
 				{%- if messages -%}
 					<ul class="flashes">
@@ -38,19 +39,19 @@
 					</ul>
 				{%- endif -%}
 			{%- endwith -%}
-	</section>
+		</div>
 
-	<section>
+		<div class="section">
 			<form method="post" action="">
 				{{ form.csrf_token }}
 
 				{{ render_field(form.title, "input-dispatch") }}
 				{{ render_field(form.text, "input-dispatch") }}
 
-		<fieldset class="templateselect">
+				<fieldset class="select templateselect">
 					<legend>Vorlage</legend>
 					{%- for t in form.template.choices -%}
-				<div>
+						<div class="option">
 							<input
 								type="radio"
 								name="template"
@@ -61,9 +62,10 @@
 								{%- endif -%}
 							/>
 							<iframe
-						class="preview preview-small"
+								class="preview option-border"
 								src="{{ url_for('instance.sample_html', template=t.name) }}"
 								id="template-preview:{{ t.name }}"
+								data-for="template:{{ t.name }}"
 							>
 							</iframe>
 							<label for="template:{{ t.name }}" class="preview-label">
@@ -73,10 +75,10 @@
 					{% endfor %}
 				</fieldset>
 
-		<fieldset class="imageselect">
+				<fieldset class="select imageselect">
 					<legend>Bild</legend>
 					{%- for img in form.image.choices -%}
-				<div>
+						<div class="option">
 							<input
 								type="radio"
 								name="image"
@@ -86,14 +88,14 @@
 									checked
 								{%- endif -%}
 							/>
-					<label for="img:{{ img }}">
+							<label for="img:{{ img }}" class="option-border">
 								<img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" />
 							</label>
 						</div>
 					{%- endfor -%}
 				</fieldset>
 
-		<div class="box">
+				<div class="buttons">
 					{%- if schild -%}
 						<input type="submit" value="Speichern" />
 						<input
@@ -106,25 +108,25 @@
 					{%- endif -%}
 				</div>
 			</form>
-	</section>
-
-	{%- if schild %}
-		<div>
-			<a href="{{ url_for('instance.schild_pdf', ident=schild.ident) }}">
-				Als PDF anzeigen
-			</a>
 		</div>
 
-		<section><form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
+		{%- if schild %}
+			<div class="section">
+				<form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
 					{%- for field in printform -%}
 						{{ render_field(field) }}
 					{%- endfor -%}
 
+					<div class="buttons">
+						<a class="button" href="{{ url_for('instance.schild_pdf', ident=schild.ident) }}">
+							Als PDF anzeigen
+						</a>
 						<input type="submit" value="Drucken" />
-		</form></section>
-
+					</div>
+				</form>
+			</div>
 
-		<div>
+			<div class="section preview-section">
 				<h2>Vorschau</h2>
 				<div class="preview-container" id="preview-container">
 					<iframe
@@ -135,4 +137,5 @@
 				</div>
 			</div>
 		{% endif %}
+	</div>
 {% endblock main %}