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>

70
app/pages/events/index.vue
View file

@ -129,10 +129,10 @@
class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
>
<div class="flex-shrink-0 text-center">
<div class="text-2xl font-bold text-guild-100">
<div class="text-2xl font-display font-bold text-guild-100">
{{ event.start.getDate() }}
</div>
<div class="text-xs text-guild-400 uppercase">
<div class="text-ui-label text-guild-400">
{{
event.start.toLocaleDateString("en-US", {
month: "short",
@ -151,7 +151,7 @@
<Icon
v-if="event.membersOnly"
name="heroicons:lock-closed"
class="w-4 h-4 text-purple-500 flex-shrink-0 mt-1"
class="w-4 h-4 text-candlelight-500 flex-shrink-0 mt-1"
/>
</div>
@ -229,7 +229,7 @@
<!-- Event Series -->
<div v-if="activeSeries.length > 0" class="text-center my-12">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
<h2 class="text-display font-bold text-guild-100 mb-8">
Current Event Series
</h2>
</div>
@ -261,10 +261,10 @@
:class="[
'series-list-item__status inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
series.status === 'active'
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
? 'bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400'
: series.status === 'upcoming'
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',
? 'bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300'
: 'bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400',
]"
>
{{ series.status }}
@ -326,7 +326,7 @@
<section class="py-20 bg-guild-800 dark:bg-guild-900">
<UContainer>
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-guild-100 mb-8">
<h2 class="text-display font-bold text-guild-100 mb-8">
Attend Our Events
</h2>
</div>
@ -613,18 +613,18 @@ const formatSeriesType = (type) => {
const getSeriesTypeBadgeClass = (type) => {
const classes = {
workshop_series:
"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
"bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
recurring_meetup:
"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
"bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300",
multi_day:
"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
"bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
course:
"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
tournament: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
"bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
tournament: "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
};
return (
classes[type] ||
"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
"bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400"
);
};
</script>
@ -661,27 +661,27 @@ const getSeriesTypeBadgeClass = (type) => {
}
.guild-calendar :deep(.vuecal__event.event-community) {
background-color: #2563eb;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #1d4ed8;
border-color: var(--color-guild-500);
}
.guild-calendar :deep(.vuecal__event.event-workshop) {
background-color: #059669;
background-color: var(--color-candlelight-500);
color: #f5f5f4;
border-color: #047857;
border-color: var(--color-candlelight-600);
}
.guild-calendar :deep(.vuecal__event.event-social) {
background-color: #7c3aed;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #6d28d9;
border-color: var(--color-guild-500);
}
.guild-calendar :deep(.vuecal__event.event-showcase) {
background-color: #d97706;
background-color: var(--color-ember-400);
color: #f5f5f4;
border-color: #b45309;
border-color: var(--color-ember-500);
}
#event-calendar {
@ -698,9 +698,9 @@ const getSeriesTypeBadgeClass = (type) => {
.month-view .vuecal__cell--today,
.vuecal__cell--today {
background-color: rgba(59, 130, 246, 0.15);
background-color: rgba(184, 135, 58, 0.15);
color: #f5f5f4;
border: 2px solid #3b82f6 !important;
border: 2px solid var(--color-candlelight-500) !important;
.day-of-month {
display: flex;
@ -714,7 +714,7 @@ const getSeriesTypeBadgeClass = (type) => {
font-size: 0.75rem;
margin-right: 0.5rem;
display: none;
color: #3b82f6;
color: var(--color-candlelight-500);
font-weight: 600;
}
@ -775,27 +775,27 @@ const getSeriesTypeBadgeClass = (type) => {
}
&.event-community {
background-color: #2563eb;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #1d4ed8;
border-color: var(--color-guild-500);
}
&.event-workshop {
background-color: #059669;
background-color: var(--color-candlelight-500);
color: #f5f5f4;
border-color: #047857;
border-color: var(--color-candlelight-600);
}
&.event-social {
background-color: #7c3aed;
background-color: var(--color-guild-400);
color: #f5f5f4;
border-color: #6d28d9;
border-color: var(--color-guild-500);
}
&.event-showcase {
background-color: #d97706;
background-color: var(--color-ember-400);
color: #f5f5f4;
border-color: #b45309;
border-color: var(--color-ember-500);
}
}
@ -882,8 +882,8 @@ const getSeriesTypeBadgeClass = (type) => {
}
.guild-calendar :deep(.vuecal__cell--today) {
background-color: rgba(59, 130, 246, 0.1);
border: 2px solid #3b82f6;
background-color: rgba(184, 135, 58, 0.1);
border: 2px solid var(--color-candlelight-500);
}
.guild-calendar :deep(.vuecal__cell--out-of-scope) {