TFC/tfcconnection-zola
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

making some radio options better

Browse source
This commit is contained in:
Chris Cochrun 2025-12-04 15:05:20 -06:00
parent 5040dcd91e
commit 13e4d61023
2 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
static/css/main.css
View file

@ -652,6 +652,9 @@
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

24
templates/shortcodes/mt_form.html
View file

@ -110,10 +110,18 @@
<input type="date" id="birthdate" name="birthdate"
class="form-date {{ formClasses }}">
<label for="gender" class="basis-full mt-4 mx-2">Gender</label>
<select id="gender" name="gender" class="form-select {{ formClasses }} border-r-8 border-transparent">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<div class="grid w-full grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
<div>
<input type="radio" name="gender" id="gender-male" value="male" class="peer hidden" checked />
<label for="gender-male" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Male</label>
</div>
<div>
<input type="radio" name="gender" id="gender-female" value="female" class="peer hidden" />
<label for="gender-female" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Female</label>
</div>
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="street" class="basis-full mx-2">What is your address? <span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
<input type="text" id="street" name="street"
@ -242,20 +250,20 @@
</div>
<h4 class="mb-4">Please select the trip that you'd prefer to go on. We reserve the right to move you to another trip if we need to. If you cannot go on a trip for sure, please tell us why in the next question.</h4>
<div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-700 p-2">
<div class="grid w-full grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
<div>
<input type="radio" name="trip" id="1" value="tulsa" class="peer hidden" checked />
<label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
<label for="1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Tulsa, Oklahoma</label>
</div>
<div>
<input type="radio" name="trip" id="2" value="rehoboth" class="peer hidden" />
<label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
<label for="2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Rehoboth</label>
</div>
<div>
<input type="radio" name="trip" id="3" value="mexico" class="peer hidden" />
<label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-800 peer-checked:font-bold peer-checked:text-white">Mexico</label>
<label for="3" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Mexico</label>
</div>
</div>