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

Add event series badge component

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-09 16:45:00 +01:00
parent 896ad0336c
commit 260e10d31a
3 changed files with 161 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -35,6 +35,20 @@
"
class="relative h-96 overflow-hidden"
>
<!-- 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"
>
<UContainer>
<div class="flex items-center justify-center">
<span class="text-sm font-medium text-white">
Members Only Event - Open to all circles and contribution levels
</span>
</div>
</UContainer>
</div>
<img
:src="getImageUrl(event.featureImage)"
:alt="event.featureImage.alt || event.title"
@ -105,68 +119,15 @@
</div>
</div>
<!-- Member-Only Badge -->
<div v-if="event.membersOnly" class="mb-8">
<div
class="inline-flex items-center px-4 py-2 bg-purple-100 dark:bg-purple-900/30 rounded-full"
>
<span
class="text-sm font-medium text-purple-700 dark:text-purple-300"
>
Members Only Event - Open to all circles and contribution levels
</span>
</div>
</div>
<!-- Series Badge -->
<div v-if="event.series?.isSeriesEvent" class="mb-8">
<div
class="p-4 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl border border-purple-500/30"
>
<div class="flex items-start gap-3">
<div
class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold"
>
{{ event.series.position }}
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span
class="text-sm font-semibold text-purple-700 dark:text-purple-300"
>
Part of a Series
</span>
<span
v-if="event.series.totalEvents"
class="text-xs text-purple-600 dark:text-purple-400"
>
({{ event.series.position }} of
{{ event.series.totalEvents }})
</span>
</div>
<NuxtLink
:to="`/series/${event.series.id}`"
class="text-base font-medium text-purple-800 dark:text-purple-200 hover:underline"
>
{{ event.series.title }}
</NuxtLink>
<p
v-if="event.series.description"
class="text-sm text-purple-600 dark:text-purple-400 mt-1"
>
{{ event.series.description }}
</p>
</div>
<NuxtLink
:to="`/series/${event.series.id}`"
class="flex-shrink-0"
>
<UButton color="purple" variant="ghost" size="sm">
View Series
</UButton>
</NuxtLink>
</div>
</div>
<EventSeriesBadge
:title="event.series.title"
:description="event.series.description"
:position="event.series.position"
:total-events="event.series.totalEvents"
:series-id="event.series.id"
/>
</div>
<!-- Target Circles -->
@ -455,6 +416,11 @@ const { isMember, memberData, checkMemberStatus } = useAuth();
onMounted(async () => {
await checkMemberStatus();
// Debug: Log series data
if (event.value?.series) {
console.log("Series data:", event.value.series);
}
// Pre-fill form if member is logged in
if (memberData.value) {
registrationForm.value.name = memberData.value.name;