Skip to content

First iteration join form #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Dan-Sherman wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

First iteration join form #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19a1ec7
First iteration join form
Dan-Sherman Sep 4, 2023
6cd4671
Finishing Form Functionality
Dan-Sherman Sep 5, 2023
19f90e2
Fixed text below About Yourself textarea
Dan-Sherman Sep 5, 2023
eb38a73
Responding to Comments
Dan-Sherman Sep 5, 2023
c115cb1
Use grid, apply prettier
TomBurch Sep 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file renamed ...ypescript-patch-8adb042441-301459fc3e.zip → ...ypescript-patch-6cdf00d327-c981e82b77.zip
View file
Open in desktop
Binary file not shown.
123 changes: 86 additions & 37 deletions resources/views/pages/Public/Join.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,98 +8,147 @@
</script>

<!-- Adapted from https://v1.tailwindcss.com/components/forms#form-grid -->
<form class="h-screen-no-nav border border-gray-200 border-gray-700 bg-gray-800 p-3 shadow-md">
<div class="-mx-3 mb-6 flex flex-wrap">
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<form class="mx-auto min-h-screen-no-nav border border-gray-700 bg-gray-800 p-3 shadow-md lg:w-4/5" id="join-form">
<div class="text-center text-gray-200">
<h1 class="text-2xl font-bold lg:text-2xl">JOIN ARCOMM</h1>
<p class="mt-4">
We're looking for well adjusted people who listen to and respect others. While having experience in our
games is welcome, it's in no way required. Aspiring members should make an effort to attend the weekly
operations, be accountable for their actions, and generally have a good sense of humor.
</p>
</div>
<hr class="my-8 h-px bg-gray-200" />
<div class="grid grid-cols-1 gap-x-3 gap-y-3 md:grid-cols-2">
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-name">
Your name
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-red-500 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:bg-white focus:outline-none"
class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-name"
type="text"
placeholder="Name"
required
/>
<p class="text-xs italic text-red-500">Please fill out this field.</p>
<p class="text-xs text-gray-400">This should be the name you use in game</p>
</div>
<div class="w-full px-3 md:w-1/2">
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-age">
Your age
</label>
<input
class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-age"
type="text"
placeholder="e.g. 27"
required
/>
</div>
</div>
<div class="-mx-3 mb-6 flex flex-wrap">
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">

<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-location">
Location
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-location"
placeholder="Location"
required
/>
<p class="text-xs italic text-gray-400">Make it as long and as crazy as you'd like</p>
<p class="text-xs text-gray-400">You can be as specific as you like</p>
</div>
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-weekly">
Are you available for weekly operations?
</label>
<div class="relative">
<select
class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 pr-8 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
class="block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 pr-8 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-weekly"
required
>
<option value="" disabled selected class="text-gray-200">Please Select an Option</option>
<option>No</option>
<option>Yes</option>
</select>
</div>
<p class="mt-2 text-xs text-gray-400">
Arma - Saturday at 1800 Zulu
<br />
DCS - Sunday at 1800 Zulu
</p>
</div>
</div>
<div class="-mx-3 mb-6 flex flex-wrap">
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-discord">
Discord account
Discord Username
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-discord"
type="text"
placeholder="Your Discord Username"
required
/>
<p class="text-xs text-gray-400">Discord > Left-Click profile in the bottom left > Copy Username</p>
<p class="text-xs text-gray-400">
Please join <a class="text-red-500 hover:text-red-600" href="https://discord.com/invite/7ehwg7F"
>our Discord Server</a
> so that we can contact you about your application
</p>
</div>
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-steam">
Steam account
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-steam"
type="text"
placeholder="Profile URL"
required
/>
<p class="text-xs text-gray-400">Steam > Your Profile > Right-Click > Copy Page URL</p>
</div>
</div>
<div class="-mx-3 mb-6 flex flex-wrap">
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-discord">
Discord account
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-experience">
Your Game Experience
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-discord"
type="text"
<textarea
class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-experience"
placeholder="Game Experience"
rows="6"
required
/>
<p class="text-xs text-gray-400">
Give us a short description of your experience with the game, what mods you've used etc
</p>
</div>
<div class="mb-6 w-full px-3 md:mb-0 md:w-1/2">
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-steam">
Steam account
<div>
<label class="mb-2 block text-xs font-bold uppercase tracking-wide text-gray-200" for="grid-about">
About Yourself
</label>
<input
class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-200 py-3 px-4 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-steam"
type="text"
<textarea
class="mb-3 block w-full appearance-none rounded border bg-gray-200 py-3 px-4 leading-tight text-gray-700 invalid:border-red-500 focus:border-gray-500 focus:bg-white focus:outline-none"
id="grid-about"
placeholder="About Yourself"
rows="6"
required
/>
<p class="text-xs text-gray-400">
Tell us a bit about yourself and how you think you would contribute as a member.
<br />
The more you write the better! This part is very important. Sharing a bit about yourself goes a long way
- we're not looking for one-liners
</p>
</div>
</div>
<div class="mt-3 content-center">
<button
class="btn rounded bg-red-500 py-2 px-4 font-bold text-gray-200 shadow hover:bg-red-600"
type="submit"
value="Submit"
form="join-form">Submit Application</button
>
</div>
</form>
4 changes: 2 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3601,11 +3601,11 @@ __metadata:

"typescript@patch:typescript@^4.8.4#~builtin<compat/typescript>":
version: 4.8.4
resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=0102e9"
resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=1a91c8"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 301459fc3eb3b1a38fe91bf96d98eb55da88a9cb17b4ef80b4d105d620f4d547ba776cc27b44cc2ef58b66eda23fe0a74142feb5e79a6fb99f54fc018a696afa
checksum: c981e82b77a5acdcc4e69af9c56cdecf5b934a87a08e7b52120596701e389a878b8e3f860e73ffb287bf649cc47a8c741262ce058148f71de4cdd88bb9c75153
languageName: node
linkType: hard

Expand Down