improve management of available devices

- make config more explicit
- DRY rendering of radio buttons
- style disabled radio buttons

sites/angestoepselt/_data/config.json

@@ -1,7 +1,8 @@
 {
 	"applicationsClosed": false,
-	"applicationsClosedFor": [
+	"devices": [
-		"laptop",
+		{ "name": "Laptop", "available": false },
-		"bare-laptop"
+		{ "name": "Laptop ohne Akku", "available": false },
+		{ "name": "Desktop-Computer", "available": true }
 	]
 }

sites/angestoepselt/computer-beantragen/privat.md

@@ -1,28 +1,28 @@
 ---
 layout: layouts/page.njk
 useForms: true
-devices:
-  laptop: Laptop
-  bare-laptop: Laptop ohne Akku
-  desktop: Desktop-Computer
 ---
 
 # Privat einen Computer beantragen
 
+{% if config.applicationsClosed %}
+
 > Aktuell haben wir keine Hardware verfügbar.
 > Bitte schaue in ein paar Wochen wieder auf unserer Homepage vorbei.
 > 
 > Danke für dein Verständnis!
 
+{% endif %}
 
 
-Auf dieser Seite kannst du einen Antrag einreichen, um einen Computer von uns zu
-erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
 
 <form method="post" action="/computer-beantragen/privat" enctype="multipart/form-data">
 {% if config.applicationsClosed %}
   <fieldset disabled="disabled" class="blanked-out-form">
 {% endif %}
+Auf dieser Seite kannst du einen Antrag einreichen, um einen Computer von uns zu
+erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
+
 <label class="form-input">
   <span>Name:</span>
   <input type="text" name="contactname" required placeholder="Vorname Nachname" />
@@ -35,33 +35,15 @@ erhalten. Bitte teile uns zunächst deine Kontaktdaten mit.
 
 Welches Gerät würdest du gerne von uns erhalten?
 
-{% if config.applicationsClosedFor.length > 0 %}
+{% for device in config.devices %}
-  Bitte beachte, dass wir derzeit folgende Geräte leider nicht anbieten können:
-  <ul>
-    {% for device in config.applicationsClosedFor %}
-    <li>{{ devices[device] }}</li>
-    {% endfor %}
-  </ul>
-{% endif %}
 
-{% if 'desktop' not in config.applicationsClosedFor %}
+<input type="radio" id="hardware-{{ loop.index }}" class="radio-input" name="hardware" required value="{{ device.name }}" {% if not device.available %}disabled{% endif %}/>
-<input type="radio" id="hardware-desktop" class="radio-input" name="hardware" required value="Desktop-Computer" />
 <div class="form-input">
-	<label for="hardware-desktop">Desktop-Computer</label>
+	<label for="hardware-{{ loop.index }}">{{ device.name }}</label>
 </div>
-{% endif %}
+
-{% if 'bare-laptop' not in config.applicationsClosedFor %}
+{% endfor %}
-<input type="radio" id="hardware-bare-laptop" class="radio-input" name="hardware" required value="Laptop ohne Akku" />
+
-<div class="form-input">
-	<label for="hardware-bare-laptop">Laptop ohne Akku</label>
-</div>
-{% endif %}
-{% if 'laptop' not in config.applicationsClosedFor %}
-<input type="radio" id="hardware-laptop" class="radio-input" name="hardware" required value="Laptop" />
-<div class="form-input">
-	<label for="hardware-laptop">Laptop</label>
-</div>
-{% endif %}
 
 Damit du einen Computer von uns erhalten kannst, benötigen wir von dir einen
 Nachweis der Bedürftigkeit. Das ist eines dieser Papiere, die von offiziellen

styles/components/_form-elements.scss

@@ -50,6 +50,7 @@
 
 	&:hover {
 		background-color: colors.$gray-300;
+		cursor: pointer;
 	}
 
 	&:focus-visible,
@@ -127,6 +128,14 @@
 	&:focus-visible + .form-input > label {
 		@extend %focused-form-input;
 	}
+
+	&:disabled + .form-input > label {
+		background-color: colors.$gray-300;
+
+		&:hover {
+			cursor: default;
+		}
+	}
 }
 
 .form-checkbox {