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

chore(visual): Phase 4 audit polish on event/series surface

Browse source 
Migrates event/series UI from Tailwind/Nuxt UI form components to the
zine pattern (dashed borders, CSS-var palette, native inputs). Restructures
single-event and series detail/index pages to the two-column grid pattern
matching about.vue and member/dashboard.vue.

Touches:
- app/components/EventSeriesTicketCard.vue — phantom-palette → CSS-var
  migration (--candle, --ember, --surface), color="gray" → "neutral"
- app/components/EventTicketCard.vue — --candle-faint border var
- app/components/EventTicketPurchase.vue — accent-color: var(--candle)
- app/pages/events/[slug].vue — page-fill flex chain, .event-body grid
- app/pages/events/index.vue — series link uses series.id (was _id)
- app/pages/series/[id].vue — two-column layout (1fr/280px) + sidebar
- app/pages/series/index.vue — full rewrite to dashed-border zine pattern

Per docs/specs/events-visual-audit-findings.md Phase 4. Behavior unchanged.
This commit is contained in:
Jennie Robinson Faber 2026-04-25 18:41:04 +01:00
parent 8f0648de57
commit 0f2f1d1cbf
7 changed files with 376 additions and 337 deletions
Download patch file Download diff file Expand all files Collapse all files

168
app/pages/series/[id].vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div class="page-fill">
<div v-if="pending" class="loading">Loading series details...</div>
<div v-else-if="error" class="loading">
@ -8,7 +8,7 @@
<NuxtLink to="/events">&larr; Back to Events</NuxtLink>
</div>
<div v-else>
<div v-else class="page-fill">
<!-- BACK LINK -->
<div class="back-link">
<NuxtLink to="/events">&larr; Back to Events</NuxtLink>
@ -26,46 +26,59 @@
</div>
</div>
<!-- DESCRIPTION -->
<div v-if="series.description" class="section">
<p>{{ series.description }}</p>
</div>
<!-- TWO-COLUMN BODY -->
<div class="series-body" :class="{ 'has-aside': series.tickets?.enabled }">
<!-- LEFT: MAIN CONTENT -->
<div class="series-main">
<div v-if="series.description" class="section description">
<p>{{ series.description }}</p>
</div>
<!-- EVENT LIST -->
<div class="section">
<div class="section-label">Sessions</div>
<div v-if="series.events?.length">
<div v-for="(event, index) in series.events" :key="event._id || index" class="event-row">
<span class="event-num">{{ String(index + 1).padStart(2, '0') }}</span>
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<div class="event-info">
<NuxtLink :to="`/events/${event.slug || event._id || event.id}`" class="event-title-link">
{{ event.title }}
</NuxtLink>
<span class="event-status">{{ getEventStatus(event) }}</span>
<div class="section" :class="{ 'section-flush': series.events?.length }">
<div class="section-label">Sessions</div>
<div v-if="series.events?.length" class="sessions-box">
<div v-for="(event, index) in series.events" :key="event._id || index" class="event-row">
<span class="event-num">{{ String(index + 1).padStart(2, '0') }}</span>
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<div class="event-info">
<div class="event-info-head">
<NuxtLink :to="`/events/${event.slug || event._id || event.id}`" class="event-title-link">
{{ event.title }}
</NuxtLink>
<span class="event-status">{{ getEventStatus(event) }}</span>
</div>
<p v-if="event.description" class="event-description">{{ event.description }}</p>
</div>
</div>
</div>
<p v-else class="empty">No sessions scheduled yet.</p>
</div>
<!-- Questions (inline when no sidebar) -->
<div v-if="!series.tickets?.enabled" class="section">
<div class="section-label">Questions?</div>
<p>If you have questions about this series, reach out to us.</p>
<a href="mailto:events@ghostguild.org">events@ghostguild.org</a>
</div>
</div>
<p v-else class="empty">No sessions scheduled yet.</p>
</div>
<!-- PASS PURCHASE -->
<div v-if="series.tickets?.enabled" class="section">
<SeriesPassPurchase
:series-id="series.id"
:series-info="{ id: series.id, title: series.title, totalEvents: series.totalEvents || series.events?.length || 0, type: series.type }"
:series-events="series.events || []"
:user-email="memberData?.email"
:user-name="memberData?.name"
@purchase-success="handlePurchaseSuccess"
/>
</div>
<!-- RIGHT: SIDEBAR -->
<aside v-if="series.tickets?.enabled" class="series-aside">
<SeriesPassPurchase
:series-id="series.id"
:series-info="{ id: series.id, title: series.title, totalEvents: series.totalEvents || series.events?.length || 0, type: series.type }"
:series-events="series.events || []"
:user-email="memberData?.email"
:user-name="memberData?.name"
@purchase-success="handlePurchaseSuccess"
/>
<!-- QUESTIONS -->
<div class="section">
<div class="section-label">Questions?</div>
<p>If you have questions about this series, reach out to us.</p>
<a href="mailto:events@ghostguild.org">events@ghostguild.org</a>
<div class="aside-panel">
<div class="box-title">Questions?</div>
<p class="aside-detail">Drop us a line.</p>
<a class="aside-link" href="mailto:events@ghostguild.org">events@ghostguild.org</a>
</div>
</aside>
</div>
</div>
</div>
@ -137,28 +150,105 @@ useHead(() => ({
}
.meta-text { color: var(--text-faint); }
/* ---- PAGE FILL (aside border reaches viewport bottom) ---- */
.page-fill {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* ---- TWO-COLUMN BODY ---- */
.series-body {
display: grid;
grid-template-columns: 1fr;
}
.series-body.has-aside {
grid-template-columns: 1fr 280px;
flex: 1;
}
.series-main { min-width: 0; }
.series-aside {
border-left: 1px dashed var(--border);
padding: 0;
}
.section {
padding: 24px 32px;
border-bottom: 1px dashed var(--border);
}
.series-main .section:last-child {
border-bottom: none;
}
.section p { font-size: 12px; color: var(--text-dim); line-height: 1.7; max-width: 560px; margin-bottom: 8px; }
.section a { font-size: 12px; color: var(--candle); }
.section.description p { font-size: 14px; color: var(--text); }
.section-flush { padding-bottom: 0; }
.sessions-box {
border-top: 1px dashed var(--border);
margin: 10px -32px 0;
}
.event-row {
display: grid;
grid-template-columns: 32px 80px 1fr;
grid-template-columns: 32px auto 1fr;
gap: 12px;
align-items: baseline;
padding: 10px 0;
padding: 10px 32px;
border-bottom: 1px dashed var(--border);
font-size: 12px;
}
.event-row:last-child { border-bottom: none; }
.event-num { color: var(--text-faint); font-size: 11px; }
.event-date { color: var(--text-faint); }
.event-date { color: var(--text-faint); white-space: nowrap; }
.event-info { min-width: 0; }
.event-title-link { color: var(--text); text-decoration: none; font-size: 13px; }
.event-title-link:hover { color: var(--candle); }
.event-status { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
.event-description {
font-size: 11px;
color: var(--text-dim);
line-height: 1.5;
margin: 4px 0 0;
max-width: 560px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.empty { font-size: 12px; color: var(--text-faint); }
/* ---- ASIDE PANELS ---- */
.aside-panel {
padding: 20px 24px;
border-bottom: 1px dashed var(--border);
}
.aside-panel:last-child { border-bottom: none; }
.box-title {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 8px;
}
.aside-detail {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 4px;
}
.aside-link {
font-size: 12px;
color: var(--candle);
}
@media (max-width: 768px) {
.series-body.has-aside {
grid-template-columns: 1fr;
}
.series-aside {
border-left: none;
border-top: 1px dashed var(--border);
}
}
</style>