jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/pages/events/[id].vue
View file

@ -5,7 +5,7 @@
>
<div class="text-center">
<div
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-guild-200">Loading event details...</p>
</div>
@ -20,7 +20,7 @@
<p class="text-guild-300 mb-6">
The event you're looking for doesn't exist.
</p>
<NuxtLink to="/events" class="text-blue-400 hover:underline">
<NuxtLink to="/events" class="text-candlelight-500 hover:underline">
← Back to Events
</NuxtLink>
</div>
@ -38,7 +38,7 @@
<!-- Members Only Banner -->
<div
v-if="event.membersOnly"
class="absolute top-0 left-0 right-0 z-10 bg-purple-600/95 backdrop-blur-sm py-2"
class="absolute top-0 left-0 right-0 z-10 bg-candlelight-500/95 backdrop-blur-sm py-2"
>
<UContainer>
<div class="flex items-center justify-center">
@ -62,7 +62,7 @@
<div class="absolute inset-0 flex items-center">
<UContainer>
<div class="max-w-4xl">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
<h1 class="text-display-xl font-bold text-white mb-4">
{{ event.title }}
</h1>
</div>
@ -71,7 +71,7 @@
</div>
<!-- Page Header (fallback when no image) -->
<PageHeader v-else :title="event.title" theme="blue" size="medium" />
<PageHeader v-else :title="event.title" size="medium" />
<!-- Event Details Section -->
<section class="py-16 bg-guild-900">
@ -81,21 +81,21 @@
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<p class="text-sm text-guild-400">Date</p>
<p class="font-semibold text-guild-100">
<p class="text-ui-label text-guild-400">Date</p>
<p class="text-ui-mono font-semibold text-guild-100">
{{ formatDate(event.startDate) }}
</p>
</div>
<div>
<p class="text-sm text-guild-400">Time</p>
<p class="font-semibold text-guild-100">
<p class="text-ui-label text-guild-400">Time</p>
<p class="text-ui-mono font-semibold text-guild-100">
{{ formatTime(event.startDate, event.endDate) }}
</p>
</div>
<div>
<p class="text-sm text-guild-400">Location</p>
<p class="text-ui-label text-guild-400">Location</p>
<p class="font-semibold text-guild-100">
{{ event.location }}
</p>
@ -119,14 +119,14 @@
<!-- Event Cancelled Notice -->
<div v-if="event.isCancelled" class="mb-8">
<div class="p-6 bg-red-900/20 rounded-xl border border-red-800">
<h3 class="text-lg font-semibold text-red-300 mb-2">
<div class="p-6 bg-ember-900/20 rounded-xl border border-ember-800">
<h3 class="text-lg font-semibold text-ember-300 mb-2">
Event Cancelled
</h3>
<p class="text-red-400" v-if="event.cancellationMessage">
<p class="text-ember-400" v-if="event.cancellationMessage">
{{ event.cancellationMessage }}
</p>
<p class="text-red-400" v-else>
<p class="text-ember-400" v-else>
This event has been cancelled. We apologize for any
inconvenience.
</p>
@ -150,14 +150,14 @@
>
<div class="flex items-center space-x-2">
<span
class="text-sm font-medium text-gray-800 dark:text-guild-200"
class="text-sm font-medium text-guild-200"
>Recommended for:</span
>
<div class="flex flex-wrap gap-2">
<span
v-for="circle in event.targetCircles"
:key="circle"
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-300 dark:border-blue-800/50"
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-candlelight-900/20 dark:bg-candlelight-900/30 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700 dark:border-candlelight-800/50"
>
{{ formatCircleName(circle) }}
</span>
@ -167,7 +167,7 @@
<!-- Event Description -->
<div class="prose prose-lg dark:prose-invert max-w-none mb-12">
<h2 class="text-2xl font-bold text-guild-100 mb-4">
<h2 class="text-display-sm font-bold text-guild-100 mb-4">
About This Event
</h2>
@ -191,7 +191,7 @@
</p>
<div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
<h3 class="text-xl font-semibold text-guild-100 mb-4">
<h3 class="text-display-sm font-semibold text-guild-100 mb-4">
Event Agenda
</h3>
<ul class="space-y-3">
@ -201,7 +201,7 @@
class="flex items-start"
>
<span
class="inline-block w-6 h-6 bg-blue-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
class="inline-block w-6 h-6 bg-candlelight-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
>
{{ index + 1 }}
</span>
@ -214,7 +214,7 @@
v-if="event.speakers && event.speakers.length > 0"
class="mt-8"
>
<h3 class="text-xl font-semibold text-guild-100 mb-4">
<h3 class="text-display-sm font-semibold text-guild-100 mb-4">
Speakers
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@ -257,18 +257,18 @@
<!-- Already Registered Status -->
<div v-if="registrationStatus === 'registered'">
<div
class="p-4 bg-green-100 dark:bg-green-900/20 rounded-lg border border-green-400 dark:border-green-800 mb-6"
class="p-4 bg-candlelight-900/20 dark:bg-candlelight-900/20 rounded-lg border border-candlelight-700 dark:border-candlelight-800 mb-6"
>
<div
class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
>
<div>
<p
class="font-semibold text-green-800 dark:text-green-300"
class="font-semibold text-candlelight-500 dark:text-candlelight-400"
>
You're registered!
</p>
<p class="text-sm text-green-700 dark:text-green-400">
<p class="text-sm text-candlelight-600 dark:text-candlelight-500">
We've sent a confirmation to your email
</p>
</div>
@ -324,7 +324,7 @@
v-else-if="isCancelled"
to="/member/profile#account"
>
<UButton color="blue" size="lg" class="px-8">
<UButton color="primary" size="lg" class="px-8">
Reactivate Membership
</UButton>
</NuxtLink>
@ -383,7 +383,7 @@
<!-- Not Logged In - Show Registration Form -->
<div v-else>
<h3 class="text-xl font-bold text-guild-100 mb-6">
<h3 class="text-display-sm font-bold text-guild-100 mb-6">
Register for This Event
</h3>
<form @submit.prevent="handleRegistration" class="space-y-4">
@ -465,7 +465,7 @@
class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
>
<div
class="h-full bg-blue-500 rounded-full"
class="h-full bg-candlelight-500 rounded-full"
:style="`width: ${((event.registeredCount || 0) / event.maxAttendees) * 100}%`"
/>
</div>
@ -541,7 +541,7 @@
</p>
<a
href="mailto:events@ghostguild.org"
class="text-blue-400 hover:underline"
class="text-candlelight-500 hover:underline"
>
events@ghostguild.org
</a>