Skip to content

Commit

Permalink
Changed UI a bit to make it more reactive
Browse files Browse the repository at this point in the history
  • Loading branch information
@SomewhatMay
SomewhatMay committed Mar 12, 2024
1 parent 52f3c12 commit 9463c58
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 68 deletions.
5 changes: 4 additions & 1 deletion src/lib/components/AddForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,9 @@


<div class="space-y-4">
<div class="text-2xl text-text block font-bold text-center">Create Form</div>
<hr class="text-text/50 mb-2" style="margin-top: 8px" />

<div class="my-2">
<div class="sm:flex justify-between items-center gap-2">
<span
Expand Down Expand Up @@ -236,7 +239,7 @@

<div class="flex px-20 mt-3">
<button
class="button flex-auto"
class="button flex-auto mb-5"
class:clickable={!error}
class:!bg-disabled={error}
class:!text-gray-500={error}
Expand Down
77 changes: 42 additions & 35 deletions src/lib/components/FormsList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,50 @@
</script>

<div class="py-4">
<span class="text-2xl text-text block mb-2 font-bold">Forms</span>
<div class="text-2xl text-text block mb-2 font-bold text-center">Existing Forms</div>
<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 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)}
>

<!-- 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>
</button>
<!-- Display a short message if there are no forms -->
{#if responses.length == 0}
<div class="text-gray-400 text-xs w-max mx-auto mt-2 mb-4 text-center">Unsubmitted forms will appear here.<br /> Click on them to edit them.</div>
{:else}
<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 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 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={() => submitResponse(response.id)}>
{#if $errors[response.id]}
🚫 Has Errors
{:else}
✔ Submit
{/if}
<!-- 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>
</button>
</span>
</li>
{/each}
</ul>

<!-- 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={() => submitResponse(response.id)}>
{#if $errors[response.id]}
🚫 Has Errors
{:else}
✔ Submit
{/if}
</button>
</span>
</li>
{/each}
</ul>
{/if}
</div>
69 changes: 37 additions & 32 deletions src/lib/components/ResponseList.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,44 @@

<div>
<span>
<hr class="mt-3"/>
<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 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)}
> -->
{#if $responseQueue.length > 0}
<hr class="mb-2"/>
<div class="text-2xl text-text block mb-2 font-bold text-center">Response Queue</div>
<div class="text-gray-400 text-xs w-max mx-auto mt-2 mb-4 text-center">These forms are being sent to strategy. This may take some time.</div>
<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 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)}
> -->

<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"}
<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 "><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}
</ul>
<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}
</ul>
<hr class="text-text/50 mb-2 mt-3" />
{/if}
</span>
</div>

0 comments on commit 9463c58

Please sign in to comment.