TFC/tfcconnection
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

updating the ui and endpoint of the mt-form

Browse source
This commit is contained in:
Chris Cochrun 2024-10-17 13:30:08 -05:00
parent 67740cf2c6
commit af115f9f19
2 changed files with 50 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/css/compiled/main.css
View file

@ -1940,6 +1940,10 @@ select {
margin-top: -2px;
}
.ml-4 {
margin-left: 1rem;
}
.box-content {
box-sizing: content-box;
}
@ -5388,6 +5392,10 @@ pre {
max-width: 65ch;
}
.sm\:basis-full {
flex-basis: 100%;
}
.sm\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@ -5502,6 +5510,10 @@ pre {
flex-basis: 25%;
}
.md\:basis-full {
flex-basis: 100%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -5579,6 +5591,10 @@ pre {
display: block;
}
.lg\:flex {
display: flex;
}
.lg\:grid {
display: grid;
}
@ -5615,6 +5631,14 @@ pre {
max-width: none;
}
.lg\:basis-1\/2 {
flex-basis: 50%;
}
.lg\:basis-1\/4 {
flex-basis: 25%;
}
.lg\:grid-flow-col-dense {
grid-auto-flow: column dense;
}

43
layouts/shortcodes/mt-form.html
View file

@ -77,18 +77,27 @@
</div>
<div id="mt-form" class="form text-lg w-full">
<form id='form' onsubmit="submitForm(event)" autocomplete="on" method="post" target="_parent" class="w-full items-center flex flex-wrap">
<form id='form'
hx-post="http://localhost:4242/mt-form"
hx-encoding="multipart/form-data"
autocomplete="on"
method="post"
target="_parent"
class="w-full items-center flex flex-wrap">
<h3 class="basis-full">Mission Trip Application</h3>
<div class="basis-full flex flex-wrap my-4">
<label for="firstname" class="basis-full mx-2">What is your first and last name?</label>
<label for="firstname" class="basis-full mx-2">What is your first and last name?
<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
<br/>
<input type="text" id="firstname" name="firstname"
<input type="text" id="firstname" name="firstname" required
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
<input type="text" id="lastname" name="lastname"
placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?</label>
<label for="parentfirstname" class="basis-full mx-2">What is your parent's first and last name?
<span class='inline-block text-[#f39] text-sm align-middle'>* required</span></label>
<input type="text" id="parentfirstname" name="parentfirstname"
class="flex-1 form-input {{ $formClasses }}"
placeholder="First Name">
@ -96,13 +105,13 @@
class="flex-1 form-input {{ $formClasses }}"
placeholder="Last Name">
</div>
<div class="basis-full my-4">
<div class="">
<div class="basis-full my-4 lg:flex md:flex">
<div class="lg:basis-1/2">
<label for="birthdate" class="">When were you born?</label>
<input type="date" id="birthdate" name="birthdate"
class="form-date {{ $formClasses }}">
</div>
<div class="">
<div class="lg:basis-1/2">
<label for="gender" class="">Gender</label>
<select id="gender" name="gender" class="form-select {{ $formClasses }}">
<option value="Male">Male</option>
@ -125,27 +134,27 @@
class="flex-auto form-input {{ $formClasses }}"
placeholder="Zip Code" required>
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="cellphone" class="basis-1/4 mr-4">Cell phone</label>
<div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
<label for="cellphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Cell phone</label>
<input type="tel" id="cellphone" name="cellphone"
class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="parentphone" class="basis-1/4 mr-4">Parent phone</label>
<div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
<label for="parentphone" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent phone</label>
<input type="tel" id="parentphone" name="parentphone"
class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="basis-full flex items-center">
<label for="email" class="basis-1/4 mr-4">Email</label>
<div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
<label for="email" class="lg:basis-1/4 basis-full mr-4 ml-2">Email</label>
<input type="email" id="email" name="email"
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="basis-3/4 form-input {{ $formClasses }}">
class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="basis-full flex items-center">
<label for="parentemail" class="basis-1/4 mr-4">Parent's email?</label>
<div class="lg:basis-1/2 basis-full flex flex-wrap items-center">
<label for="parentemail" class="lg:basis-1/4 basis-full mr-4 ml-2">Parent's email?</label>
<input type="email" id="parentemail" name="parentemail"
pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
class="basis-3/4 form-input {{ $formClasses }}">
class="flex-auto form-input {{ $formClasses }}">
</div>
<label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>