Skip to content

Commit

Permalink
refactor: add session ux
Browse files Browse the repository at this point in the history
  • Loading branch information
@theClarkSell
theClarkSell committed Jan 6, 2024
1 parent 531759b commit 67c716b
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 185 deletions.
23 changes: 11 additions & 12 deletions src/routes/activities/_components/form/ActivityForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,7 @@
<section in:fade>
<SectionTitle
stepNumber="1"
title={isBackdoor ? 'Selected Location/Event' : `Select a Location/Event`}
description={isBackdoor ? '' : 'Where do you want to host this activity?'} />
title={isBackdoor ? 'Selected Location/Event' : `Select a Location/Event`} />

<EventSection
{isBackdoor}
Expand Down Expand Up @@ -250,7 +249,7 @@
<section in:fade class="mt-8">
<SectionTitle
title="Activity Takeaways and Resources"
stepNumber="6"
stepNumber={showLongForm ? '6' : '4'}
description="Do you have some supporting resources for folks? Add them here for others to easily reference later." />

<ResourcesSection initialData={formattedInitial} setField={setValue} {touched} {errors} />
Expand All @@ -269,7 +268,7 @@
<section in:fade class:hidden={showLongForm} class="mt-8">
<SectionTitle
title="Schedule the Time"
stepNumber="3"
stepNumber="5"
description="Pick a day and time (in your time zone) you will be hosting this activity." />

<WhenSection
Expand Down Expand Up @@ -310,13 +309,13 @@
disabled={isValid}
on:click|preventDefault={() => handleWithdraw(initialData)}
tabindex="-1"
class="order focus:ring-red w-full rounded-md
class="order focus:ring-red w-full rounded-md
border-2 border-transparent bg-red-400
px-4 py-2 text-sm font-medium
px-4 py-2 text-sm font-medium
leading-5
text-white
transition
duration-150 ease-in-out hover:bg-red-600
text-white
transition
duration-150 ease-in-out hover:bg-red-600
focus:border-red-700 focus:outline-none active:bg-red-700">
Cancel / Withdraw
</button>
Expand All @@ -328,11 +327,11 @@
type="submit"
class="w-full rounded-md border-2
border-thatBlue-500 bg-white px-4
py-2 text-sm font-medium
leading-5 text-thatBlue-500
py-2 text-sm font-medium
leading-5 text-thatBlue-500
transition duration-150
ease-in-out hover:bg-thatBlue-500 hover:text-white focus:border-thatBlue-800 focus:bg-thatBlue-500
focus:text-white
focus:text-white
focus:outline-none focus:ring-thatBlue-500 active:bg-thatBlue-800">
{initialData?.id ? 'Update Activity' : 'Submit Activity'}
</button>
Expand Down
220 changes: 118 additions & 102 deletions src/routes/activities/_components/form/_Event.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<Input hidden name="eventId" value={eventSelected} />

<div in:fade class="px-4 py-5 sm:px-6 ">
<div in:fade class="px-4 py-5 sm:px-6">
{#if isBackdoor}
<ul class="grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6">
<li class="col-span-1 rounded-md shadow-sm">
Expand Down Expand Up @@ -77,9 +77,101 @@
</ul>
{:else}
<ul class="grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6">
<!-- divider for Hybrid Events-->
{#if activeEvents.hybrid.length > 0}
<div class="relative col-span-1 m-4 sm:col-span-2">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300" />
</div>
<div class="relative flex justify-center">
<span
class="rounded-md bg-gray-100 px-2 text-sm uppercase tracking-wider text-gray-500">
Upcoming THAT Conferences
</span>
</div>
</div>

{#each activeEvents.hybrid as event, i (i)}
<li in:fade={{ delay: i * 200 }} class="col-span-1 rounded-md shadow-sm">
{#await canAddSession(event.id) then accessResults}
{#if accessResults}
<div class="transition duration-500 ease-in-out transform hover:scale-105">
<input
type="radio"
id={event.name}
bind:group={eventSelected}
value={event.id}
on:change={handleOnChange} />

<label for={event.name} class="h-full flex">
{#if event.id !== eventSelected}
<div
class="flex-1 flex items-center justify-between border border-gray-200 bg-white hover:bg-gray-50 rounded-md truncate">
<div class="flex-shrink-0">
<img class="p-2 h-14 object-fit" alt="" src={event.logo} />
</div>

<div class="flex-1 px-2 py-2 text-sm truncate">
<p class="text-gray-900 font-medium">
{event.name}
</p>

<p class="text-gray-500">
{dayjs(event.startDate).format('dddd, MMMM D, YYYY')}
</p>
</div>
</div>
{:else}
<div
class="flex-1 flex items-center justify-between border border-green-500 bg-green-100 rounded-md truncate">
<div class="flex-shrink-0">
<img class="p-2 h-14 object-fit" alt="" src={event.logo} />
</div>

<div class="flex-1 px-2 py-2 text-sm truncate">
<p class="text-gray-900 font-bold">
{event.name}
</p>

<p class="text-gray-500">
{dayjs(event.startDate).format('dddd, MMMM D, YYYY')}
</p>
</div>

<div class="flex-shrink-0 pr-4">
<span
class="h-6 w-6 rounded-full bg-green-500 bg-opacity-60 flex items-center justify-center">
<CheckFull height="h-4" width="w-4" />
</span>
</div>
</div>
{/if}
</label>
</div>
{:else}
<EventNoAccess {event} />
{/if}
{/await}
</li>
{/each}
{/if}

<!-- divider -->

<div class="relative col-span-1 m-4 sm:col-span-2">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300" />
</div>
<div class="relative flex justify-center">
<span class="rounded-md bg-gray-100 px-2 text-sm uppercase tracking-wider text-gray-500">
THAT.US Online Open Spaces
</span>
</div>
</div>

<li
in:fade
class="col-span-1 transform rounded-md shadow-sm transition duration-500 ease-in-out hover:scale-105 ">
class="col-span-1 transform rounded-md shadow-sm transition duration-500 ease-in-out hover:scale-105">
<input
type="radio"
id={activeEvents.daily.name}
Expand Down Expand Up @@ -129,117 +221,41 @@

<!-- divider -->

<div class="relative col-span-1 m-4 sm:col-span-2">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300" />
</div>
<div class="relative flex justify-center">
<span class="rounded-md bg-gray-100 px-2 text-sm uppercase tracking-wider text-gray-500">
Upcoming Online Events
</span>
</div>
</div>

<!-- end divider -->

{#each activeEvents.online as event, i (i)}
<li class="col-span-1 rounded-md shadow-sm">
{#await canAddSession(event.id)}
<div in:fade class="col-span-1 shadow-sm rounded-md">
<div class="shadow-sm rounded-md bg-white p-4 w-full mx-auto">
<div class="animate-pulse">
<div class="flex-1 space-y-2">
<div class="h-3 bg-gray-400 rounded w-1/2" />
<div class="h-3 bg-gray-300 rounded w-3/4" />
</div>
</div>
</div>
</div>
{:then accessResults}
{#if accessResults}
<div
in:fade
class={`transition duration-500 ease-in-out transform ${
event.id !== eventSelected ? 'hover:scale-105' : ''
}`}>
<input
type="radio"
id={event.name}
bind:group={eventSelected}
value={event.id}
on:change={handleOnChange} />

<label for={event.name} class="h-full flex">
{#if event.id !== eventSelected}
<div
class="flex-1 flex items-center justify-between border border-gray-200 bg-white hover:bg-gray-50 rounded-md truncate cursor-pointer">
<div class="flex-shrink-0">
<img class="p-2 h-14 object-fit" alt="" src={event.logo} />
</div>

<div class="flex-1 px-2 py-2 text-sm truncate">
<p class="text-gray-900 font-medium">
{event.name}
</p>

<p class="text-gray-500">
{dayjs(event.startDate).format('dddd, MMMM D, YYYY')}
</p>
</div>
</div>
{:else}
<div
class="flex-1 flex items-center justify-between border border-green-500 bg-green-100 rounded-md truncate">
<div class="flex-shrink-0">
<img class="p-2 h-14 object-fit" alt="" src={event.logo} />
</div>

<div class="flex-1 px-2 py-2 text-sm truncate">
<p class="text-gray-900 font-bold">
{event.name}
</p>

<p class="text-gray-500">
{dayjs(event.startDate).format('dddd, MMMM D, YYYY')}
</p>
</div>

<div class="flex-shrink-0 pr-4">
<span
class="h-6 w-6 rounded-full bg-green-500 bg-opacity-60 flex items-center justify-center">
<CheckFull height="h-4" width="w-4" />
</span>
</div>
</div>
{/if}
</label>
</div>
{:else}
<EventNoAccess {event} />
{/if}
{/await}
</li>
{/each}

<!-- divider for Hybrid Events-->
{#if activeEvents.hybrid.length > 0}
{#if activeEvents.online > 1}
<div class="relative col-span-1 m-4 sm:col-span-2">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300" />
</div>
<div class="relative flex justify-center">
<span
class="rounded-md bg-gray-100 px-2 text-sm uppercase tracking-wider text-gray-500">
Upcoming In-Person Events
Upcoming Online Events
</span>
</div>
</div>

{#each activeEvents.hybrid as event, i (i)}
<li in:fade={{ delay: i * 200 }} class="col-span-1 rounded-md shadow-sm">
{#await canAddSession(event.id) then accessResults}
<!-- end divider -->

{#each activeEvents.online as event, i (i)}
<li class="col-span-1 rounded-md shadow-sm">
{#await canAddSession(event.id)}
<div in:fade class="col-span-1 shadow-sm rounded-md">
<div class="shadow-sm rounded-md bg-white p-4 w-full mx-auto">
<div class="animate-pulse">
<div class="flex-1 space-y-2">
<div class="h-3 bg-gray-400 rounded w-1/2" />
<div class="h-3 bg-gray-300 rounded w-3/4" />
</div>
</div>
</div>
</div>
{:then accessResults}
{#if accessResults}
<div class="transition duration-500 ease-in-out transform hover:scale-105">
<div
in:fade
class={`transition duration-500 ease-in-out transform ${
event.id !== eventSelected ? 'hover:scale-105' : ''
}`}>
<input
type="radio"
id={event.name}
Expand All @@ -250,7 +266,7 @@
<label for={event.name} class="h-full flex">
{#if event.id !== eventSelected}
<div
class="flex-1 flex items-center justify-between border border-gray-200 bg-white hover:bg-gray-50 rounded-md truncate">
class="flex-1 flex items-center justify-between border border-gray-200 bg-white hover:bg-gray-50 rounded-md truncate cursor-pointer">
<div class="flex-shrink-0">
<img class="p-2 h-14 object-fit" alt="" src={event.logo} />
</div>
Expand Down
6 changes: 2 additions & 4 deletions src/routes/activities/_components/form/_SectionTitle.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<script>
export let title = '';
export let description = '';
import Icon from 'svelte-awesome';
import { stepForward } from '$components/svelte-awesome-icons';
export let stepNumber;
</script>

<div class="pb-2 pt-20">
Expand All @@ -15,7 +13,7 @@
<div class="block bg-gray-100 px-1">
<span
class="flex h-8 w-8 items-center justify-center rounded-full bg-white ring-4 ring-gray-300">
<Icon data={stepForward} class="h-4 w-4 text-gray-500" />
{stepNumber}
</span>
</div>

Expand Down
Loading

0 comments on commit 67c716b

Please sign in to comment.