From ab3217cf53de0c17e3b9518d1d6c9ebe849f829c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Mon, 28 Mar 2022 15:29:48 +0200
Subject: [PATCH] Update CoderDojo form

---
 sites/coderdojo/anmelden.md           | 40 +++++++++++++++++---
 styles/components/_form-elements.scss | 53 ++++++++++++++-------------
 2 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/sites/coderdojo/anmelden.md b/sites/coderdojo/anmelden.md
index d2228a5..60d52ae 100644
--- a/sites/coderdojo/anmelden.md
+++ b/sites/coderdojo/anmelden.md
@@ -6,6 +6,17 @@ eleventyNavigation:
   order: 20
 ---
 
+<style>
+#mode-self:not(:checked) ~ [data-mode=self],
+#mode-self:not(:checked) ~ * [data-mode=self] {
+	display: none;
+}
+#mode-child:not(:checked) ~ [data-mode=child],
+#mode-child:not(:checked) ~ * [data-mode=child] {
+	display: none;
+}
+</style>
+
 # Für das CoderDojo anmelden
 
 Schön, dass du an einem CoderDojo teilnehmen möchtest!
@@ -21,23 +32,23 @@ Hier findest du schon mal die Details zur kommenden Veranstaltung:
 Zunächst müssen wir ein paar Formalitäten klären.
 Wen möchtest du anmelden?
 
+<input type="radio" id="mode-self" class="radio-input" name="mode" required value="self" />
 <div class="form-input">
-	<input type="radio" id="registertype-self" name="registertype" required value="self" />
-	<label for="registertype-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
+	<label for="mode-self">Ich bin über 14 Jahre alt und möchte mich selbst anmelden.</label>
 </div>
+<input type="radio" id="mode-child" class="radio-input" name="mode" required value="child" />
 <div class="form-input">
-	<input type="radio" id="registertype-child" name="registertype" required value="child" />
-	<label for="registertype-child">Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.</label>
+	<label for="mode-child">Ich bin Erziehungsberechtigte&ThinSpace;/&ThinSpace;-r und möchte mein Kind anmelden.</label>
 </div>
 
-Bitte verrate uns deinen Namen:
+Bitte verrate uns deinen Namen<span data-mode="child"> und den deines Kindes</span>:
 
 <label class="form-input">
   <span>Name:</span>
   <input type="text" name="contactname" required />
 </label>
 
-<label class="form-input">
+<label class="form-input" data-mode="child">
   <span>Name des Kindes:</span>
   <input type="text" name="participantname" required />
 </label>
@@ -55,6 +66,23 @@ Bitte gebe außerdem eine Email-Adresse an, an die wir Informationen zur Veranst
   <input type="email" name="contactemail" required placeholder="mail@beispiel.de" />
 </label>
 
+Während der Veranstaltungen werden möglicherweise Fotos gemacht und von uns online auf unserer Homepage (aber nicht in sozialen Netzwerken) zur Verfügung gestellt.
+Bist du damit einverstanden?
+
+<input type="radio" id="photos-yes" class="radio-input" name="photos" required value="yes" />
+<div class="form-input">
+	<label for="photos-yes">
+		Ja, <span data-mode="self">es dürfen Fotos von mir gemacht werden</span><span data-mode="child">mein Kind darf fotografiert werden</span>.
+		Die Fotos werden möglicherweise Online in einer Galerie gezeigt.
+	</label>
+</div>
+<input type="radio" id="photos-no" class="radio-input" name="photos" required value="no" />
+<div class="form-input">
+	<label for="photos-no">
+		Nein, <span data-mode="self">ich möchte nicht fotografiert werden</span><span data-mode="child">mein Kind soll bei den Fotos ausgelassen werden</span>.
+	</label>
+</div>
+
 Solltest du noch Fragen haben oder uns anderweitig etwas mitteilen wollen, kannst du das hier tun:
 
 <label class="form-input">
diff --git a/styles/components/_form-elements.scss b/styles/components/_form-elements.scss
index 53a28d1..97b2f60 100644
--- a/styles/components/_form-elements.scss
+++ b/styles/components/_form-elements.scss
@@ -80,39 +80,40 @@
 			margin-left: layout.$normal-gap;
 		}
 	}
+}
 
-	> input[type='radio']:first-child {
-		opacity: 0;
+.radio-input {
+	position: absolute;
+	opacity: 0;
 
-		+ label {
-			position: relative;
-			color: colors.$gray-800;
+	+ .form-input > label {
+		position: relative;
+		color: colors.$gray-800;
 
-			&:before {
-				content: '\2771';
-				display: inline-block;
-				position: absolute;
-				left: #{layout.$large-gap * -1};
-				top: 50%;
-				transform: translateY(-50%);
-			}
+		&:before {
+			content: '\2771';
+			display: inline-block;
+			position: absolute;
+			left: #{layout.$large-gap * -1};
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	&:checked {
+		$color: colors.$teal-600;
+
+		@include colors.coderdojo-theme {
+			$color: colors.$orange-500;
 		}
 
-		&:checked {
-			$color: colors.$teal-600;
-
-			@include colors.coderdojo-theme {
-				$color: colors.$orange-500;
-			}
-
-			+ label {
-				color: $color;
-			}
+		+ .form-input > label {
+			color: $color;
 		}
+	}
 
-		&:focus-visible + label {
-			@extend %focused-form-input;
-		}
+	&:focus-visible + .form-input > label {
+		@extend %focused-form-input;
 	}
 }