Skip to content

Commit

Permalink
navigation updates (#193)
Browse files Browse the repository at this point in the history
Updates overall navigation items

* link in the nav hat
* adds online to the event picker
* adds button to the root hero
* updates venue in the online hero sub pages
  • Loading branch information
theClarkSell authored Jan 2, 2024
2 parents 2382198 + 52a4e79 commit 067b9ce
Show file tree
Hide file tree
Showing 14 changed files with 69 additions and 27 deletions.
6 changes: 6 additions & 0 deletions src/_components/EventPicker.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
<img class="w-32" src="/images/characters/TestLongHorn.svg" alt="THAT Logo" />
</div>
</button>
<button on:click={() => dispatch('eventSelected', { event: 'ONLINE' })}>
<div
class="flex h-32 w-32 transform cursor-pointer items-center rounded-md p-2 shadow-lg transition duration-500 ease-in-out hover:scale-110 hover:bg-slate-200">
<img class="w-32" src="/images/That-Conference-Online-Logo.svg" alt="THAT Logo" />
</div>
</button>
<button on:click={() => dispatch('eventSelected', { event: 'WI' })}>
<div
class="flex h-32 w-32 transform cursor-pointer items-center rounded-md p-2 shadow-lg transition duration-500 ease-in-out hover:scale-110 hover:bg-slate-200">
Expand Down
4 changes: 2 additions & 2 deletions src/_components/cta/_CallForSpeakers.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="col-span-5">
<h3
class="text-center text-4xl font-extrabold uppercase tracking-wide text-white sm:text-left">
Call For Counselors is Open
Call For Counselors is Now Open
</h3>
</div>

Expand All @@ -33,7 +33,7 @@
</p>

<div class="pt-12">
<HighlightLink href={`/call-for-counselors/${event.slug}`}>Learn More</HighlightLink>
<HighlightLink href={`/cfp`}>Learn More</HighlightLink>
</div>
</div>

Expand Down
3 changes: 3 additions & 0 deletions src/_components/navigation/default/Base.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
case 'WI':
goto('/wi');
break;
case 'ONLINE':
goto('/online');
break;
}
}}>
<span>Upcoming Conferences</span>
Expand Down
3 changes: 2 additions & 1 deletion src/_components/navigation/thatConferenceLive/NavHat.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script>
export let event;
import { LeftArrow } from '$elements/svgs';
import UserProfile from '$components/navigation/_components/UserProfile.svelte';
Expand All @@ -23,7 +24,7 @@
</div>
<div class="flex items-center space-x-12">
<div class="flex items-center space-x-3">
<a href={`/`}>
<a href={`/${event.slug}`}>
<div class="flex space-x-4 font-semibold uppercase tracking-wide antialiased">
<div>THAT Conference Online</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions src/routes/(root)/_root/components/hero.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@
</p>
<div class="mt-20 flex flex-wrap">
<a href="/tx" class="anchorButton m-2 grow">
<div>THAT CONFERENCE TEXAS</div>
<div>TEXAS</div>
</a>
<a href="/wi" class="anchorButton m-2 grow">
<div>THAT CONFERENCE WISCONSIN</div>
<div>WISCONSIN</div>
</a>
<a href="/online" class="anchorButton m-2 grow">
<div>ONLINE</div>
</a>
</div>
</div>
Expand Down Expand Up @@ -57,4 +60,8 @@
.anchorButton:focus {
@apply underline underline-offset-4;
}
.anchorButtonLight {
@apply rounded-md border-2 border-thatBlue-500 px-4 py-4 text-center font-medium tracking-wide text-thatBlue-500 shadow-md md:text-xl;
}
</style>
13 changes: 10 additions & 3 deletions src/routes/(that conferences)/_components/attendees/Hero.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
export let event;
export let isOnline = false;
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
Expand All @@ -15,9 +16,15 @@
<div class="flex flex-col justify-between px-4">
<div class="flex max-w-3xl flex-col space-y-8">
<h2 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{#if isOnline}
<span class="text-green-500">ONLINE</span> / {dayjs(event.startDate).format('MMMM Do')} - {dayjs(
event.endDate
).format('Do, YYYY')}
{:else}
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{/if}
</h2>
<h1
class="text-4xl font-extrabold uppercase text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
Expand Down
13 changes: 10 additions & 3 deletions src/routes/(that conferences)/_components/schedule/Hero.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script>
export let event;
export let days = [];
export let isOnline = false;
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
Expand All @@ -17,9 +18,15 @@
<div>
<div class="flex max-w-3xl flex-col space-y-8 px-4">
<h2 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{#if isOnline}
<span class="text-green-500">ONLINE</span> / {dayjs(event.startDate).format('MMMM Do')} - {dayjs(
event.endDate
).format('Do, YYYY')}
{:else}
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{/if}
</h2>
<h1
class="text-4xl font-extrabold uppercase text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
Expand Down
11 changes: 8 additions & 3 deletions src/routes/(that conferences)/_components/speakers/Hero.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
export let event;
export let isOnline = false;
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
Expand All @@ -15,9 +16,13 @@
<div class="flex flex-col justify-between px-4">
<div class="flex max-w-3xl flex-col space-y-8">
<h2 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{#if !isOnline}
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> /
{dayjs(event.startDate).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{:else}
<span class="text-green-500">ONLINE</span> /
{dayjs(event.startDate).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{/if}
</h2>
<h1
class="text-4xl font-extrabold uppercase text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
Expand Down
15 changes: 11 additions & 4 deletions src/routes/(that conferences)/_components/sponsors/Hero.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script>
export let event;
export let isOnline = false;
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
Expand All @@ -13,15 +14,21 @@
<Hero imagePath="/images/heros/sponsor.jpg">
<div class="flex max-w-3xl flex-col space-y-8 px-4">
<h2 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{#if isOnline}
<span class="text-green-500">ONLINE</span> / {dayjs(event.startDate).format('MMMM Do')} - {dayjs(
event.endDate
).format('Do, YYYY')}
{:else}
<span class="text-green-500">{`${venue.city}, ${venue.state}`}</span> / {dayjs(
event.startDate
).format('MMMM Do')} - {dayjs(event.endDate).format('Do, YYYY')}
{/if}
</h2>

<div>
<h1
class="text-4xl font-extrabold uppercase text-white sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl">
Partners & Sponsors
Sponsors and Partners
</h1>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

<main>
<header>
<Hero {event} />
<Hero {event} isOnline={true} />
</header>

<div class="relative mx-auto my-24 max-w-2xl px-4 lg:max-w-7xl">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@

<div class="relative">
<section>
<Hero {event} days={['Monday', 'Tuesday', 'Wednesday']} />
<Hero {event} days={['Monday', 'Tuesday', 'Wednesday']} isOnline={true} />
</section>

<section>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<main>
<header>
<Hero {event} />
<Hero {event} isOnline={true} />
</header>

<section class="mx-auto my-24 max-w-2xl lg:max-w-7xl">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<Seo title={metaTags.title} tags={metaTags.tags} />
<main>
<Hero {event} />
<Hero {event} isOnline={true} />
<div class="relative">
<div class="mx-auto max-w-2xl lg:max-w-7xl">
{#if levels['RANGER']}
Expand Down
9 changes: 4 additions & 5 deletions src/routes/(that conferences)/online/_components/Hero.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,10 @@
<div class="col-span-5">
<div class="flex flex-col items-center space-y-8 sm:items-start">
<h1 class="text-2xl font-bold uppercase tracking-wider text-white antialiased">
<span class="text-green-500">
{dayjs(event.startDate).format('MMMM Do')} - {dayjs(event.endDate).format(
'MMMM Do, YYYY'
)}
</span>
<span class="text-green-500">ONLINE </span> /
{dayjs(event.startDate).format('MMMM Do')} - {dayjs(event.endDate).format(
'MMMM Do, YYYY'
)}
</h1>
<p class="text-5xl font-extrabold tracking-wider text-white antialiased">
Join The Live Conversations From The Main Stage At THAT Conference
Expand Down

1 comment on commit 067b9ce

@vercel
Copy link

@vercel vercel bot commented on 067b9ce Jan 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.