Skip to content

Commit

Permalink
adds that conference online (#187)
Browse files Browse the repository at this point in the history 
In this PR we're adding the route that handles all things THAT Conference Online. Everything that stems from that event listing page.
  • Loading branch information
@theClarkSell
theClarkSell authored Dec 31, 2023
2 parents 51c7174 + cd53956 commit ce8bd11
Show file tree
Hide file tree
Showing 47 changed files with 1,491 additions and 698 deletions.
12 changes: 10 additions & 2 deletions src/_components/activities/UpNextEvent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
.slice(0, 9);
</script>

<section class="bg-thatBlue-700 py-12 lg:py-24">
<div class="relative mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<section class="bg-thatBlue-800 py-12 lg:py-24">
<div class="relative isolate mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<div class="space-y-12">
<div class="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none">
<h2
Expand Down Expand Up @@ -45,5 +45,13 @@
<slot name="action" />
</div>
</div>
<div
class="absolute inset-x-0 top-28 -z-10 flex transform-gpu justify-center overflow-hidden blur-2xl"
aria-hidden="true">
<div
class="aspect-[1318/752] w-[82.375rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-25"
style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)">
</div>
</div>
</div>
</section>
11 changes: 7 additions & 4 deletions src/_components/members/MemberCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let profileSlug;
export let earnedMeritBadges = [];
export let profileLinks = [];
export let darkMode = false;
import buildImageSrc from '$lib/image';
import config from '$lib/config.public';
Expand All @@ -18,7 +19,9 @@

<a href="/members/{profileSlug}">
<div
class="h-full transform rounded-lg bg-white text-center shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-gray-100">
class="h-full transform rounded-lg bg-white/5 text-center shadow ring-1 ring-white/10 transition duration-500 ease-in-out hover:scale-105 hover:bg-gray-50/90"
class:text-white={darkMode}
class:hover:text-gray-500={darkMode}>
<div class="flex flex-col p-4">
<div>
<span class="relative inline-block">
Expand All @@ -39,20 +42,20 @@
{/if}
</span>

<h3 class="text-md mt-4 font-bold leading-5 tracking-tight text-gray-500">
<h3 class="mt-4 text-lg font-bold leading-9">
{`${firstName} ${lastName}`}
</h3>
</div>
<div class="flex-grow">
<dl class="mt-1 flex flex-col justify-between">
{#if jobTitle}
<dt class="sr-only">Title</dt>
<dd class="text-sm leading-5 text-gray-500">{jobTitle}</dd>
<dd class="text-sm font-light leading-5">{jobTitle}</dd>
{/if}

{#if company}
<dt class="sr-only">Company</dt>
<dd class="text-sm leading-5 text-gray-500">{company}</dd>
<dd class="text-sm font-light leading-5">{company}</dd>
{/if}

<dt class="sr-only">Social Links</dt>
Expand Down
51 changes: 51 additions & 0 deletions src/_components/navigation/thatConferenceLive/EventNav.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script>
export let event;
import { Shell as ShellButton, StandardShell } from '$elements/buttons';
import NavLink from '../_components/NavLink.svelte';
function buildUrl(page) {
return `/${event.slug}/${page}/`;
}
function buildAnchorLink(anchor) {
return `/${event.slug}#${anchor}`;
}
</script>

<div class=" bg-white py-12">
<div class="mx-auto flex max-w-screen-2xl items-center justify-between">
<!-- logo -->
<div class="flex items-center">
<div class="cursor">
<a data-sveltekit-prefetch href="/{event.slug}/">
<img
class="h-16"
src="/images/That-Conference-Online-Logo.svg"
alt="THAT Conference Logo" />
</a>
</div>

<!-- links -->
<div class="ml-8 flex space-x-4 text-lg font-bold">
<NavLink href={buildUrl('speakers')}>Speakers</NavLink>
<NavLink href={buildAnchorLink('schedule')}>Schedule</NavLink>
<NavLink href={buildUrl('attendees')}>Attendees</NavLink>
<NavLink href={buildUrl('sponsors')}>Sponsors</NavLink>
</div>
</div>

<div class="flex space-x-4">
<ShellButton>
<div class="px-4 py-2">
<a href="/sponsorships/apply/#prospectus">Sponsor Today</a>
</div>
</ShellButton>
<StandardShell>
<div class="px-4 py-2">
<a href={buildAnchorLink('tickets')}>Purchase Tickets</a>
</div>
</StandardShell>
</div>
</div>
</div>
106 changes: 106 additions & 0 deletions src/_components/navigation/thatConferenceLive/MobileEventNav.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<script>
export let event;
export let hidden;
import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte';
import { clickOutside } from '$elements/actions';
import { StandardShell } from '$elements/buttons';
import MobileUsersProfile from '$components/navigation/_components/MobileUsersProfile.svelte';
import NavLink from '../_components/NavLink.svelte';
const dispatch = createEventDispatcher();
function buildUrl(page) {
return `/${event.slug}/${page}/`;
}
function buildAnchorLink(anchor) {
return `/${event.slug}#${anchor}`;
}
</script>

<div
use:clickOutside
on:click_outside={() => dispatch('show', true)}
class="relative bg-white py-6">
<div class="mx-8 flex items-center justify-between">
<!-- logo -->
<div class="cursor">
<a href={`/${event.slug}`}>
<img class="h-16" src="/images/ThatConferenceLogo.svg" alt="THAT Logo" />
</a>
</div>

<!-- button -->
<div>
{#if hidden}
<button
type="button"
class="rounded-md p-2
text-gray-600 transition duration-150 ease-in-out
hover:bg-gray-100 hover:text-gray-500
focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
on:click|preventDefault={() => dispatch('show', false)}>
<svg class="h-10 w-12" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
{:else}
<button
type="button"
class="rounded-md p-2
text-gray-600 transition duration-150 ease-in-out
hover:bg-gray-100 hover:text-gray-500
focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
on:click|preventDefault={() => dispatch('show', true)}>
<svg class="h-10 w-12" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
{/if}
</div>
</div>

{#if !hidden}
<div class="mx-4 mt-6">
<div class=" border-t">
<div class="flex w-full flex-col space-y-2 py-6 text-base font-medium">
<NavLink on:click={() => dispatch('show', true)} href={buildAnchorLink('tickets')}
>Tickets</NavLink>
<NavLink on:click={() => dispatch('show', true)} href={buildUrl('speakers')}
>Speakers</NavLink>
<NavLink on:click={() => dispatch('show', true)} href={buildAnchorLink('schedule')}
>Schedule</NavLink>
<NavLink on:click={() => dispatch('show', true)} href={buildUrl('attendees')}
>Attendees</NavLink>
<NavLink on:click={() => dispatch('show', true)} href={buildUrl('sponsors')}
>Sponsors</NavLink>
</div>

<div class="py-6">
<div>
{#if $page.data.user.isAuthenticated}
<MobileUsersProfile darkMode={true} />
{:else}
<StandardShell>
<div class="px-4 py-2">
<a rel="external" href="/login/">Log in</a>
</div>
</StandardShell>
{/if}
</div>
</div>
</div>
</div>
{/if}
</div>
26 changes: 26 additions & 0 deletions src/_components/navigation/thatConferenceLive/MobileNavHat.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<script>
export let event;
import { LeftArrow } from '$elements/svgs';
const [venue] = event.venues;
</script>

<div class="relative col-span-1 grid h-14 place-self-center bg-that-navy text-white">
<div class="mx-8 flex items-center justify-between">
<div class="font-semibold antialiased">
<a href="/" class="flex items-center space-x-2">
<LeftArrow />
<span>Back to THAT</span>
</a>
</div>

<div>
<a href={`/${event.slug}`}>
<div class="flex space-x-4 font-semibold uppercase tracking-wide antialiased">
<div class="uppercase">{`${venue.city}, ${venue.state}`}</div>
</div>
</a>
</div>
</div>
</div>
38 changes: 38 additions & 0 deletions src/_components/navigation/thatConferenceLive/Nav.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script>
export let event;
import { page } from '$app/stores';
import lodash from 'lodash';
import CreateProfileNotification from '$components/notifications/CreateProfile.svelte';
import NavHat from './NavHat.svelte';
import EventNav from './EventNav.svelte';
import MobileNavHat from './MobileNavHat.svelte';
import MobileEventNav from './MobileEventNav.svelte';
const { isEmpty } = lodash;
let hidden = true;
function handleShow({ detail }) {
hidden = detail;
}
</script>

<nav class="relative">
{#if $page.data.user.isAuthenticated}
{#if isEmpty($page.data.user.profile)}
<CreateProfileNotification />
{/if}
{/if}

<div class="block xl:hidden">
<MobileNavHat {event} />
<MobileEventNav {hidden} {event} on:show={handleShow} />
</div>

<div class="hidden xl:block">
<NavHat {event} />
<EventNav {event} />
</div>
</nav>
39 changes: 39 additions & 0 deletions src/_components/navigation/thatConferenceLive/NavHat.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script>
import { LeftArrow } from '$elements/svgs';
import UserProfile from '$components/navigation/_components/UserProfile.svelte';
import Cart from '$components/navigation/_components/Cart.svelte';
</script>

<div class="relative h-16 bg-that-navy px-24 text-white">
<div class="flex h-full items-center justify-between">
<div class="flex space-x-3">
<div class="font-semibold antialiased">
<a href="/" class="flex items-center space-x-2">
<LeftArrow />
<span>Back to THAT</span>
</a>
</div>
<div>-</div>
<div class="font-semibold antialiased">
<a href="/" class="flex items-center space-x-2">
<span>Join Free, Claim Your Seat Today!</span>
</a>
</div>
</div>
<div class="flex items-center space-x-12">
<div class="flex items-center space-x-3">
<a href={`/`}>
<div class="flex space-x-4 font-semibold uppercase tracking-wide antialiased">
<div>THAT Conference Online</div>
</div>
</a>
</div>

<div class="flex items-center space-x-4 font-bold">
<Cart />
<UserProfile />
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/_components/newsletter/Wide.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import HubspotForm from './HubspotForm.svelte';
</script>

<section class="overflow-clip bg-thatBlue-700 py-12 lg:py-36">
<section class="overflow-clip bg-thatBlue-800 py-12 lg:py-36">
<div
class="relative isolate mx-auto max-w-screen-xl px-4 sm:px-6 lg:flex lg:items-center lg:px-8">
<div class="lg:w-0 lg:flex-1">
Expand Down
10 changes: 5 additions & 5 deletions src/_elements/FeaturedActivity.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<a data-sveltekit-prefetch href="/activities/{id}">
<div
class="h-full w-full transform rounded-lg bg-that-blue px-6 py-10 text-center shadow transition duration-500 ease-in-out hover:scale-105 hover:bg-thatBlue-400 xl:px-10 xl:text-left">
class="h-full w-full transform rounded-lg bg-white/5 px-3 py-6 text-center text-white shadow ring-1 ring-white/10 transition duration-500 ease-in-out hover:scale-105 hover:bg-gray-50 hover:text-gray-500 xl:px-10 xl:text-left">
<div class="space-y-6 xl:space-y-10">
<div
class="mx-auto h-40 w-40 rounded-full bg-gradient-to-t from-thatRed-500 to-thatOrange-500 xl:h-56 xl:w-56">
Expand All @@ -37,14 +37,14 @@
alt={`${host.firstName} ${host.lastName}`} />
</div>

<div class="flex flex-col text-lg font-medium leading-6">
<h4 class="text-white">{title}</h4>
<div class="flex flex-col text-center text-lg font-bold">
<h4>{title}</h4>

<p class="text-sm italic text-thatBlue-200">
<p class="mt-2 text-sm font-light">
{dayjs(startTime).format('dddd, MMMM D, YYYY - h:mm A z')}
</p>

<p class="text-right text-thatBlue-200">
<p class="mt-2 text-right text-lg font-bold leading-9">
{`${host.firstName} ${host.lastName}`}
</p>
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/routes/(redirects)/online/+page.server.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { redirect } from '@sveltejs/kit';
// import { events } from '$lib/config.public';

export async function load() {
//todo: grab from the config
throw redirect(302, `/online/tx/2024`);
}
17 changes: 0 additions & 17 deletions src/routes/(that conference online)/[event]/[date]/+layout.js
View file

This file was deleted.

Loading

1 comment on commit ce8bd11

@vercel
Copy link

@vercel vercel bot commented on ce8bd11 Dec 31, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

thatconference-com – ./

thatconference-com-that-conference.vercel.app
thatconference-com-git-main-that-conference.vercel.app
thatconference-com.vercel.app
thatconference.com

Please sign in to comment.