From 4d0ba8ef9a376c77b71d5c9ef309ae7ed4542134 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Sch=C3=A4fer?= <j.wielicki@sotecware.net>
Date: Wed, 27 Jan 2021 16:32:21 +0100
Subject: [PATCH] Tweak form layout

- Use boldface for labels
- Use the equivalent of h4 for the heading
- Indent checkbox/radio choices
---
 snikket_web/scss/app.scss       | 24 ++++++++++++++++++------
 snikket_web/templates/demo.html | 18 ++++++++++++------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/snikket_web/scss/app.scss b/snikket_web/scss/app.scss
index cbbf2bd..b2948d6 100644
--- a/snikket_web/scss/app.scss
+++ b/snikket_web/scss/app.scss
@@ -171,10 +171,10 @@ body > footer {
 
 @for $n from 1 through 6 {
 	div.form h#{$n}.form-title {
-		font-size: 100%;
-		font-weight: bold;
-		line-height: 1.5;
-		margin-bottom: 1.5em;
+		font-size: nth($h-sizes, 4);
+		/* font-weight: bold; */
+		line-height: 1.5 / (nth($h-sizes, 4) / 100%);
+		margin: 1.5em / (nth($h-sizes, 4) / 100%) 0;
 	}
 }
 
@@ -224,11 +224,18 @@ div.form {
 div.form.layout-expanded {
 	label {
 		display: block;
+		font-weight: bold;
 		color: $gray-200;
 	}
 
+	input[type="radio"] + label, input[type="checkbox"] + label {
+		font-weight: inherit;
+		color: inherit;
+	}
+
 	div.f-ebox {
-		margin-bottom: $w-l1;
+		margin: 1.5em 0;
+		line-height: 1.5;
 	}
 
 	div.f-bbox {
@@ -242,7 +249,6 @@ div.form.layout-expanded {
 			border: none;
 			border-bottom: $w-s4 solid $primary-500;
 			margin-bottom: -$w-s4;
-			padding: 0 $w-s3;
 		}
 
 		input[type=$type].has-error {
@@ -258,6 +264,11 @@ div.form.layout-expanded {
 		}
 	}
 
+	ul[id] {
+		padding: $w-s1 0;
+		padding-left: $w-l1;
+	}
+
 	input[type="checkbox"], input[type="radio"] {
 		position: absolute;
 		z-index: -1;
@@ -378,6 +389,7 @@ div.form.layout-expanded {
 		width: 100%;
 		border: none;
 		border-bottom: $w-s4 solid $primary-500;
+		line-height: 1.5;
 	}
 
 	textarea:hover {
diff --git a/snikket_web/templates/demo.html b/snikket_web/templates/demo.html
index 504a6c6..4a9f6c5 100644
--- a/snikket_web/templates/demo.html
+++ b/snikket_web/templates/demo.html
@@ -145,14 +145,20 @@
 		<input type="text" id="fex-f1" name="fex-f1">
 	</div>
 	<div class="f-ebox">
-		<input type="checkbox" id="fex-f2" name="fex-f2"><label for="fex-f2">Enable fancy features</label>
-		<input type="checkbox" id="fex-f3" name="fex-f3"><label for="fex-f3">Enable more features</label>
-		<input type="checkbox" id="fex-f4" name="fex-f4"><label for="fex-f4">Also do that other thing</label>
+		<label>Optional features</label>
+		<ul id="check-features">
+			<li><input type="checkbox" id="fex-f2" name="fex-f2"><label for="fex-f2">Enable fancy features</label></li>
+			<li><input type="checkbox" id="fex-f3" name="fex-f3"><label for="fex-f3">Enable more features</label></li>
+			<li><input type="checkbox" id="fex-f4" name="fex-f4"><label for="fex-f4">Also do that other thing</label></li>
+		</ul>
 	</div>
 	<div class="f-ebox">
-		<input type="radio" id="fex-f5" name="fex-rg1"><label for="fex-f5">High difficulty</label>
-		<input type="radio" id="fex-f6" name="fex-rg1"><label for="fex-f6">Medium difficulty</label>
-		<input type="radio" id="fex-f7" name="fex-rg1"><label for="fex-f7">Low difficulty</label>
+		<label>Level</label>
+		<ul id="radio-difficulty">
+			<li><input type="radio" id="fex-f5" name="fex-rg1"><label for="fex-f5">High difficulty</label></li>
+			<li><input type="radio" id="fex-f6" name="fex-rg1"><label for="fex-f6">Medium difficulty</label></li>
+			<li><input type="radio" id="fex-f7" name="fex-rg1"><label for="fex-f7">Low difficulty</label></li>
+		</ul>
 	</div>
 	<div class="f-ebox">
 		<label for="fex-f8">Select dropdown:</label>