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

mostly css and some other tweaks to mission trip form

Browse source
This commit is contained in:
Chris Cochrun 2024-01-04 12:54:26 -06:00
parent 81bf6a53e3
commit 9b8ec651d8
2 changed files with 105 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1714,6 +1714,11 @@ select {
margin-bottom: 2rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
@ -2039,18 +2044,6 @@ select {
height: 1000px;
}
.h-10 {
height: 2.5rem;
}
.h-4 {
height: 1rem;
}
.h-2 {
height: 0.5rem;
}
.max-h-\[5rem\] {
max-height: 5rem;
}
@ -2115,6 +2108,10 @@ select {
width: 0.75rem;
}
.w-64 {
width: 16rem;
}
.min-w-0 {
min-width: 0px;
}
@ -2209,6 +2206,18 @@ select {
flex-basis: 33.333333%;
}
.basis-2\/3 {
flex-basis: 66.666667%;
}
.basis-1\/4 {
flex-basis: 25%;
}
.basis-3\/4 {
flex-basis: 75%;
}
.-translate-y-8 {
--tw-translate-y: -2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -2659,6 +2668,11 @@ select {
padding-bottom: 0.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@ -2699,11 +2713,6 @@ select {
padding-bottom: 2.5rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
@ -2842,6 +2851,11 @@ select {
line-height: 2.25rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
@ -2851,11 +2865,6 @@ select {
font-size: 0.6rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.font-extrabold {
font-weight: 800;
}
@ -2900,10 +2909,6 @@ select {
line-height: .75rem;
}
.leading-10 {
line-height: 2.5rem;
}
.text-neutral-900 {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-900), var(--tw-text-opacity));
@ -2993,6 +2998,31 @@ select {
color: transparent;
}
.text-secondary-300 {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
}
.text-secondary-100 {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-100), var(--tw-text-opacity));
}
.text-secondary-200 {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
}
.text-secondary-700 {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-700), var(--tw-text-opacity));
}
.text-secondary-500 {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
}
.\!no-underline {
text-decoration-line: none !important;
}

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

@ -73,7 +73,7 @@
<form id='form' onsubmit="submitForm(event)" 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">What is your first and last name?</label>
<label for="firstname" class="basis-full mx-2">What is your first and last name?</label>
<br/>
<input type="text" id="firstname" name="firstname"
placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
@ -81,7 +81,7 @@
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">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?</label>
<input type="text" id="parentfirstname" name="parentfirstname"
class="flex-1 form-input {{ $formClasses }}"
placeholder="First Name">
@ -89,11 +89,7 @@
class="flex-1 form-input {{ $formClasses }}"
placeholder="Last Name">
</div>
<label for="parentemail" class="basis-full">What is your parent's email address?</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-full form-input {{ $formClasses }}">
<div class="basis-full my-8">
<div class="basis-full my-4">
<div class="">
<label for="birthdate" class="">When were you born?</label>
<input type="date" id="birthdate" name="birthdate"
@ -108,12 +104,12 @@
</div>
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="street" class="basis-full">What is your address? {{ $requiredField }}</label>
<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"
class="basis-full form-input {{ $formClasses }}"
placeholder="Street Address" required>
<input type="text" id="city" name="city"
class="flex-auto form-input {{ $formClasses }}"
class="basis-full form-input {{ $formClasses }}"
placeholder="City" required>
<input type="text" id="state" name="state"
class="flex-auto form-input {{ $formClasses }}"
@ -122,29 +118,34 @@
class="flex-auto form-input {{ $formClasses }}"
placeholder="Zip Code" required>
</div>
<div class="basis-full flex flex-wrap items-center my-8">
<div class="flex-auto flex flex-wrap items-center">
<label for="cellphone" class="mr-4">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="homephone" class="mr-4">Parent phone</label>
<input type="tel" id="homephone" name="homephone"
class="flex-auto form-input {{ $formClasses }}">
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="email" class="mr-4">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="flex-auto form-input {{ $formClasses }}">
</div>
<div class="flex-auto flex flex-wrap items-center">
<label for="cellphone" class="basis-1/4 mr-4">Cell phone</label>
<input type="tel" id="cellphone" name="cellphone"
class="flex-auto form-input {{ $formClasses }}">
</div>
<label for="school" class="basis-full my-4">What school do you go to?</label>
<div class="flex-auto flex flex-wrap items-center">
<label for="homephone" class="basis-1/4 mr-4">Parent phone</label>
<input type="tel" id="homephone" name="homephone"
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>
<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 }}">
</div>
<div class="basis-full flex items-center">
<label for="parentemail" class="basis-1/4 mr-4">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 }}">
</div>
<label for="school" class="basis-full mx-2 mt-12">What school do you go to?</label>
<input type="text" id="school" name="school" class="basis-full form-input {{ $formClasses }}">
<div class="basis-full my-4">
<label for="grade" class="">Grade</label>
<label for="grade" class=" mx-2">Grade</label>
<br/>
<input type="radio" id="grade" name="grade" value="8"
class="form-input {{ $formClasses }}" checked>
@ -167,7 +168,7 @@
<label for="grade" class="">Senior</label>
</div>
<div class="basis-full flex flex-wrap my-4">
<label for="pastorfirstname" class="basis-full">What is your pastor's name and number?</label>
<label for="pastorfirstname" class="basis-full mx-2">What is your pastor's name and number?</label>
<input type="text" id="pastorfirstname" name="pastorfirstname"
class="flex-auto form-input {{ $formClasses }}"
placeholder="First Name">
@ -179,10 +180,10 @@
placeholder="Phone Number">
</div>
<div class="basis-full my-4 flex flex-wrap items-center">
<label for="church" class="basis-full">What church do you attend?</label>
<label for="church" class="basis-full mx-2">What church do you attend?</label>
<input type="text" id="church" name="church"
class="basis-full form-input {{ $formClasses }}">
<label for="churchattendance" class="basis-full mt-8">Do you attend church regularly?</label>
<label for="churchattendance" class="basis-full mt-8 mx-2">Do you attend church regularly? <code id="layout" class="inline-block text-secondary-500">Regularly being 3 times a month</code></label>
<div class="basis-full flex flex-wrap items-center">
<input type="radio" id="churchattendance" name="churchattendance"
value="yes" class="flex-none form-input {{ $formClasses }}" checked>
@ -228,37 +229,30 @@
</div>
</div>
<div class="basis-full my-4 mb-8 flex flex-wrap">
<label for="image" class="basis-full">
<label for="image" class="basis-full mx-2">
Please give us a picture you'd like to use on prayer cards.
</label>
<input type="file" id="image" name="image"
class="file:my-4 file:ml-2 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-neutral-500 file:text-neutral-100 hover:file:bg-primary-300 hover:file:ring-offset-2 hover:file:ring-2 hover:file:ring-offset-transparent hover:file:text-primary-500 hover:file:ring-primary-500">
</div>
<label class="basis-full mt-8">Please rank the trips you'd like to go on: 1 being your first choice and 2 being your last choice. If you cannot go on a trip for sure, please use the X.</label>
<div class="basis-full grid grid-cols-1 gap-8 lg:grid-cols-3
md:grid-cols-1 sm:grid-cols-1 items-center mb-8">
<div class="">
<label for="trip-1">New Mexico</label>
<select id="trip-1" name="trip-1" class="form-select {{ $formClasses }}">
<option value="1">1</option>
<option value="2">2</option>
<option value="X">X</option>
</select>
</div>
<div class="flex-auto basis-1/3">
<label for="trip-2" class="basis-1/2">Mexico</label>
<select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
<option value="1">1</option>
<option value="2">2</option>
<option value="X">X</option>
</select>
</div>
</div>
<label class="basis-full mt-8 mx-2" for="trip">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.</label>
<select id="trip" name="trip" class="form-select {{ $formClasses }} basis-full items-center mb-8">
<option value="New Mexico">New Mexico</option>
<option value="Mexico">Mexico</option>
</select>
<!-- <div class="flex-auto basis-1/3">
<label for="trip-2" class="basis-1/2">Mexico</label>
<select id="trip-2" name="trip-2" class="flex-auto basis-1/2 form-select {{ $formClasses }}">
<option value="1">1</option>
<option value="2">2</option>
<option value="X">X</option>
</select>
</div> -->
<div class="basis-full mt-10">
<label for="tripnotes" class="p-4">
Do you have any other notes for us regarding this trip?
Is there a trip you cannot go on due to scheduling conflicts? Or do you have any other things you'd wish to inform us about regarding a specific trip?
</label>
<br/>
<textarea id="tripnotes" name="tripnotes"
@ -347,7 +341,7 @@
placeholder=""></textarea>
</div>
<div class="basis-full my-10">
<label for="final-agreement">
<label for="final-agreement" class="px-2">
I understand that in order for my application to be accepted I need to have this application, a health form, a picture, the $25 registration fee, and 3 reference forms all completed.
</label>
<div class="my-4">
@ -358,7 +352,7 @@
</label>
</div>
</div>
<label for="registration" class="basis-full">
<label for="registration" class="basis-full px-2">
Would you like to pay the registration fee now or later?
</label>
<div class="basis-full">