Member/Ecology revamp.
This commit is contained in:
parent
fc7ec52574
commit
59d6e97787
31 changed files with 1763 additions and 1010 deletions
|
|
@ -32,178 +32,178 @@
|
|||
<!-- Member Status Banner -->
|
||||
<MemberStatusBanner />
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<PageHeader :title="`Welcome back, ${memberData?.name || ''}`">
|
||||
<div class="dashboard-meta">
|
||||
<CircleBadge :circle="memberData?.circle || 'community'" />
|
||||
<span>${{ memberData?.contributionTier }} CAD/mo</span>
|
||||
<!-- Welcome Header -->
|
||||
<PageHeader :title="`Welcome back, ${memberData?.name || ''}`">
|
||||
<div class="dashboard-meta">
|
||||
<CircleBadge :circle="memberData?.circle || 'community'" />
|
||||
<span>${{ memberData?.contributionTier }} CAD/mo</span>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<!-- Upcoming Events + Quick Actions -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Upcoming Events</div>
|
||||
|
||||
<div v-if="loadingEvents" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<!-- Upcoming Events + Quick Actions -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Upcoming Events</div>
|
||||
<div v-else-if="registeredEvents.length" class="event-list">
|
||||
<NuxtLink
|
||||
v-for="evt in registeredEvents"
|
||||
:key="evt._id"
|
||||
:to="`/events/${evt.slug || evt._id}`"
|
||||
class="event-item"
|
||||
>
|
||||
<span class="event-date">{{
|
||||
formatEventDate(evt.startDate)
|
||||
}}</span>
|
||||
<span class="event-title">{{ evt.title }}</span>
|
||||
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
|
||||
</NuxtLink>
|
||||
|
||||
<div v-if="loadingEvents" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
<!-- Calendar subscription -->
|
||||
<button class="calendar-btn" @click="copyCalendarLink">
|
||||
{{
|
||||
calendarLinkCopied
|
||||
? "Link copied!"
|
||||
: "Subscribe to calendar"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="registeredEvents.length" class="event-list">
|
||||
<NuxtLink
|
||||
v-for="evt in registeredEvents"
|
||||
:key="evt._id"
|
||||
:to="`/events/${evt.slug || evt._id}`"
|
||||
class="event-item"
|
||||
<div v-else class="empty-state">
|
||||
<p>You haven't registered for any upcoming events</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/events" class="section-link"
|
||||
>Browse all events →</NuxtLink
|
||||
>
|
||||
|
||||
<!-- Calendar subscription instructions -->
|
||||
<div
|
||||
v-if="registeredEvents.length > 0 && showCalendarInstructions"
|
||||
class="calendar-instructions"
|
||||
>
|
||||
<div class="ci-header">
|
||||
<strong>How to Subscribe to Your Calendar</strong>
|
||||
<button
|
||||
type="button"
|
||||
@click="showCalendarInstructions = false"
|
||||
class="ci-close"
|
||||
>
|
||||
<span class="event-date">{{
|
||||
formatEventDate(evt.startDate)
|
||||
}}</span>
|
||||
<span class="event-title">{{ evt.title }}</span>
|
||||
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Calendar subscription -->
|
||||
<button class="calendar-btn" @click="copyCalendarLink">
|
||||
{{
|
||||
calendarLinkCopied
|
||||
? "Link copied!"
|
||||
: "Subscribe to calendar"
|
||||
}}
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p>You haven't registered for any upcoming events</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/events" class="section-link"
|
||||
>Browse all events →</NuxtLink
|
||||
>
|
||||
|
||||
<!-- Calendar subscription instructions -->
|
||||
<div
|
||||
v-if="registeredEvents.length > 0 && showCalendarInstructions"
|
||||
class="calendar-instructions"
|
||||
>
|
||||
<div class="ci-header">
|
||||
<strong>How to Subscribe to Your Calendar</strong>
|
||||
<button
|
||||
type="button"
|
||||
@click="showCalendarInstructions = false"
|
||||
class="ci-close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Google Calendar:</strong> Click "+" then "From
|
||||
URL" then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Apple Calendar:</strong> File then New Calendar
|
||||
Subscription then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Outlook:</strong> Add Calendar then Subscribe from
|
||||
web then paste the link
|
||||
</li>
|
||||
</ul>
|
||||
<p class="ci-note">
|
||||
Your calendar will automatically update when you register or
|
||||
unregister from events.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Quick Actions</div>
|
||||
<NuxtLink
|
||||
to="/ecology"
|
||||
class="quick-action"
|
||||
:class="{ disabled: !canPeerSupport }"
|
||||
:title="
|
||||
!canPeerSupport
|
||||
? 'Complete your membership to access community ecology'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
Community ecology<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile" class="quick-action">
|
||||
Update your profile<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<a
|
||||
href="https://wiki.ghostguild.org"
|
||||
target="_blank"
|
||||
class="quick-action"
|
||||
@click="handleWikiClick"
|
||||
>
|
||||
Browse the wiki<span class="arrow">→</span>
|
||||
</a>
|
||||
<NuxtLink to="/members" class="quick-action">
|
||||
Browse members<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile#account" class="quick-action">
|
||||
Manage account<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Google Calendar:</strong> Click "+" then "From URL"
|
||||
then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Apple Calendar:</strong> File then New Calendar
|
||||
Subscription then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Outlook:</strong> Add Calendar then Subscribe from
|
||||
web then paste the link
|
||||
</li>
|
||||
</ul>
|
||||
<p class="ci-note">
|
||||
Your calendar will automatically update when you register or
|
||||
unregister from events.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Membership Summary + Peer Support -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Membership</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Circle</span>
|
||||
<span
|
||||
class="val"
|
||||
:style="{
|
||||
color: `var(--c-${memberData?.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{ memberData?.circle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Contribution</span>
|
||||
<span class="val"
|
||||
>${{ memberData?.contributionTier }} CAD/month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Status</span>
|
||||
<span class="val">
|
||||
<span :class="isActive ? 'status-active' : ''">
|
||||
{{ isActive ? "Active" : statusConfig.label }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="memberData?.createdAt" class="membership-row">
|
||||
<span class="key">Member since</span>
|
||||
<span class="val">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
}}</span>
|
||||
</div>
|
||||
<NuxtLink to="/member/profile#account" class="section-link">
|
||||
Change circle or contribution →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Community</div>
|
||||
<DashedBox>
|
||||
<p class="peer-text">
|
||||
Connect with other members through shared interests and
|
||||
cooperative topics.
|
||||
</p>
|
||||
<NuxtLink to="/ecology" class="section-link">
|
||||
Browse community ecology →
|
||||
</NuxtLink>
|
||||
</DashedBox>
|
||||
</div>
|
||||
<div class="content-block">
|
||||
<div class="section-label">Quick Actions</div>
|
||||
<NuxtLink
|
||||
to="/ecology"
|
||||
class="quick-action"
|
||||
:class="{ disabled: !canPeerSupport }"
|
||||
:title="
|
||||
!canPeerSupport
|
||||
? 'Complete your membership to access community ecology'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
Community ecology<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile" class="quick-action">
|
||||
Update your profile<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<a
|
||||
href="https://wiki.ghostguild.org"
|
||||
target="_blank"
|
||||
class="quick-action"
|
||||
@click="handleWikiClick"
|
||||
>
|
||||
Browse the wiki<span class="arrow">→</span>
|
||||
</a>
|
||||
<NuxtLink to="/members" class="quick-action">
|
||||
Browse members<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/account" class="quick-action">
|
||||
Manage account<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Membership Summary + Peer Support -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Membership</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Circle</span>
|
||||
<span
|
||||
class="val"
|
||||
:style="{
|
||||
color: `var(--c-${memberData?.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{ memberData?.circle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Contribution</span>
|
||||
<span class="val"
|
||||
>${{ memberData?.contributionTier }} CAD/month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Status</span>
|
||||
<span class="val">
|
||||
<span :class="isActive ? 'status-active' : ''">
|
||||
{{ isActive ? "Active" : statusConfig.label }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="memberData?.createdAt" class="membership-row">
|
||||
<span class="key">Member since</span>
|
||||
<span class="val">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
}}</span>
|
||||
</div>
|
||||
<NuxtLink to="/member/account" class="section-link">
|
||||
Change circle or contribution →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Community</div>
|
||||
<DashedBox>
|
||||
<p class="peer-text">
|
||||
Connect with other members through shared interests and
|
||||
cooperative topics.
|
||||
</p>
|
||||
<NuxtLink to="/ecology" class="section-link">
|
||||
Browse community ecology →
|
||||
</NuxtLink>
|
||||
</DashedBox>
|
||||
</div>
|
||||
</div>
|
||||
</ColumnsLayout>
|
||||
</template>
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ const { trackGoal, isComplete: onboardingComplete } = useOnboarding();
|
|||
|
||||
const handleWikiClick = () => {
|
||||
if (!onboardingComplete.value) {
|
||||
trackGoal('wikiClicked');
|
||||
trackGoal("wikiClicked");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue