angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update CoderDojo form

Browse source
This commit is contained in:
Yannik Rödel 2022-03-28 15:29:48 +02:00
parent 0e51f8258d
commit ab3217cf53
2 changed files with 61 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
sites/coderdojo/anmelden.md
View file

@ -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">

53
styles/components/_form-elements.scss
View file

@ -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;
}
}