Skip to content

Commit

Permalink
more css + fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@SomewhatMay
SomewhatMay committed Mar 9, 2024
1 parent 1edbfd7 commit b24df60
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 42 deletions.
10 changes: 5 additions & 5 deletions src/lib/components/AddForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@


<div class="space-y-4">
<div class='flex flex-col hidden'>
<div class='flex-col hidden'>
<span class='text-text'>Form Type</span>
<select bind:value={formType} class="rounded-md bg-background text-text border-2">
{#each formTypes as formType}
Expand All @@ -77,7 +77,7 @@
<!-- Display the dropdown menu if manual is false -->
<select
bind:value={formType}
class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
>
{#each formTypes as formType}
<option
Expand Down Expand Up @@ -127,7 +127,7 @@
{#if !manual}
<select
bind:value={match}
class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
>
{#each Object.values($matches) as match}
<option
Expand Down Expand Up @@ -183,7 +183,7 @@
{#if !manual}
<select
bind:value={team}
class="flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 min-w-max rounded-xl px-4 py-2 text-white remove-arrow cursor-pointer hover:bg-hover hover:drop-shadow-btn-hover"
>
{#each matchTeams as team}
<option
Expand Down Expand Up @@ -229,7 +229,7 @@
<input
type="text"
bind:value={$scout}
class="flex-auto sm:inline bg-primary w-80 md:w-96 rounded-xl px-4 py-2 text-white remove-arrow focus:drop-shadow-btn-hover min-w-9"
class="transition-all flex-auto sm:inline bg-primary w-80 md:w-96 rounded-xl px-4 py-2 text-white remove-arrow focus:drop-shadow-btn-hover min-w-9"
/>
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/FormFlow/Checkbox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<!-- Using a button instead of an input field because styling regular checkboxes is a pain -->
<button
on:click={() => {$activeResponses[id].data[component.id] = checked ? 0 : 1}}
class="button clickable !px-2 !py-1.5 border-box border-3"
class="button clickable transition-all !px-2 !py-1.5 border-box border-3"
class:!bg-enabled={checked}
class:border-enabled={!checked}
class:border-primary={checked}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/FormFlow/Counter.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,11 @@
<!-- Add and subtract buttons -->
<button
on:click={() => incrementCount(-1)}
class="button clickable"
class="button clickable transition-all"
>-</button>
<button
on:click={() => incrementCount(1)}
class="button clickable"
class="button clickable transition-all"
>+</button>
</span>
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/lib/components/FormFlow/index.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export let formType: Form | undefined;
export const deleteResponse = () => {
export const deleteResponse = () => {
if (!$response) return;
const res = $activeResponses;
delete res[$response];
Expand Down Expand Up @@ -69,8 +69,9 @@
>Delete</button> -->
<div class="text-center">
<button
class="button clickable text-xl !px-5 !py-2 !bg-enabled mr-3 !font-normal"
on:click={() => deleteResponse()}>🗑️ Delete</button
class="button clickable text-xl !px-5 !py-2 mr-3 !font-normal"
class:!bg-enabled={!$errors[$response]}
on:click={() => deleteResponse()} disabled={$errors[$response]}>🗑️ Delete</button
><button
class="button clickable text-xl !px-5 !py-2 !bg-enabled ml-3 !font-normal"
on:click={() => submitResponse()}>✔ Done</button
Expand Down
15 changes: 10 additions & 5 deletions src/lib/components/FormsList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<hr class="text-text/50 mb-2" />
<ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
{#each responses as response (response.id)}
<li class="flex button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
<li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
<!-- Main button that takes you to the response -->
<button class="flex-auto text-white text-left flex flex-col sm:block"
on:click={() => setResponse(response.id)}
Expand All @@ -38,13 +38,18 @@
<!-- The submit and delete buttons -->
<span class="flex">
<button
class="button clickable !px-2 !py-1 !bg-enabled mr-1 !font-normal"
class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
><button
class="button clickable !px-2 !py-1 !bg-enabled !font-normal"
class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
disabled={$errors[response.id]}
on:click={() => submitResponse(response.id)}>✔ Submit</button
>
on:click={() => submitResponse(response.id)}>
{#if $errors[response.id]}
🚫 Has Errors
{:else}
✔ Submit
{/if}
</button>
</span>
</li>
{/each}
Expand Down
52 changes: 27 additions & 25 deletions src/lib/components/ResponseList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,35 @@
<div>
<span>
<hr class="mt-3"/>
<ul>
<ul class="max-h-[25vh] pr-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-enabled scrollbar-track-primary">
{#each $responseQueue as response (response.id)}
<li>
<span>
<button class="flex-auto text-white text-left flex flex-col sm:block">
<span class="font-normal text-gray-400">{response.type.name} Form</span>
{#if response.type.name != "Pit Scouting"}
<!-- These two are wrapped in span because on mobile we want to display them on separate lines -->
<span class="sm:ml-5"><span class="font-normal text-gray-400">Match: </span><span class="">{response.match}</span></span>
{/if}
<!-- Add a space between them on desktop -->
<span class="sm:ml-5"><span class="font-normal text-gray-400">Team: </span><span class="">{response.team}</span></span>
<li class="flex transition-all button clickable mt-1 bg-primary rounded-xl !py-1.5 !px-3 !font-normal">
<!-- Main button that takes you to the response -->
<!-- <button class="flex-auto text-white text-left flex flex-col sm:block"
on:click={() => setResponse(response.id)}
> -->

<!-- The submit and delete buttons -->
<span class="flex">
<button
class="button clickable !px-2 !py-1 !bg-enabled mr-1 !font-normal"
on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
><button
class="button clickable !px-2 !py-1 !bg-enabled !font-normal"
on:click={() => unsubmitResponse(response.id)}>✔ Unsubmit</button
>
</span>
{#if $errors[response.id]}
<p>has errors</p>
{/if}
</button>
<span class="flex-auto text-white text-left flex flex-col sm:block">
<!-- These texts are wrapped in span because on mobile we want to display them on separate lines -->
<span class="block sm:inline font-normal text-gray-400">{response.type.name}</span>
{#if response?.type?.name != "Pit Scouting"}
<!-- Add a space between them on desktop -->
<span class="block sm:inline "><span class="font-normal text-gray-400 sm:ml-5">Match: </span>{response.match}</span>
{/if}
<!-- Add a space between them on desktop -->
<span class="block sm:inline sm:ml-5"><span class="font-normal text-gray-400">Team: </span>{response.team}</span>
</span>
<!-- </button> -->

<!-- The submit and delete buttons -->
<span class="flex">
<button
class="button clickable transition-all !px-2 !py-1 !bg-enabled mr-1 !font-normal"
on:click={() => deleteResponse(response.id)}>🗑️ Delete</button
><button
class="button clickable transition-all !px-2 !py-1 !bg-enabled !font-normal"
disabled={$errors[response.id]}
on:click={() => unsubmitResponse(response.id)}>↩️ Unsubmit</button>
</span>
</li>
{/each}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/+error.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { page } from '$app/stores';

<button
on:click={() => goto("/")}
class="button clickable mt-5"
class="button clickable mt-5 transition-all"
><span
class="font-normal"
>Return to
Expand Down

0 comments on commit b24df60

Please sign in to comment.