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

Lots of UI fixes

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-08 19:02:24 +01:00
parent 1f7a0f40c0
commit e8e3b84276
24 changed files with 3652 additions and 1770 deletions
Download patch file Download diff file Expand all files Collapse all files

97
app/pages/member/dashboard.vue
View file

@ -173,14 +173,28 @@
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
Your Upcoming Events
</h2>
<UButton
to="/events"
variant="ghost"
size="sm"
class="text-ghost-300 hover:text-ghost-100"
>
Browse All Events
</UButton>
<div class="flex items-center gap-2">
<UButton
v-if="registeredEvents.length > 0"
@click="copyCalendarLink"
variant="ghost"
size="sm"
class="text-ghost-300 hover:text-ghost-100"
icon="heroicons:calendar"
>
{{
calendarLinkCopied ? "Link Copied!" : "Get Calendar Link"
}}
</UButton>
<UButton
to="/events"
variant="ghost"
size="sm"
class="text-ghost-300 hover:text-ghost-100"
>
Browse All Events
</UButton>
</div>
</div>
</template>
@ -261,6 +275,46 @@
Browse Events
</UButton>
</div>
<!-- Calendar subscription instructions -->
<div
v-if="registeredEvents.length > 0 && showCalendarInstructions"
class="mt-4 p-4 bg-ghost-800 border border-ghost-600"
>
<div class="flex items-start justify-between gap-4">
<div class="flex-1">
<h4 class="text-sm font-semibold text-ghost-100 mb-2">
How to Subscribe to Your Calendar
</h4>
<ul
class="text-xs text-ghost-300 space-y-1 list-disc list-inside"
>
<li>
<strong>Google Calendar:</strong> Click "+" → "From URL" →
Paste the link
</li>
<li>
<strong>Apple Calendar:</strong> File → New Calendar
Subscription → Paste the link
</li>
<li>
<strong>Outlook:</strong> Add Calendar → Subscribe from web
→ Paste the link
</li>
</ul>
<p class="text-xs text-ghost-400 mt-2">
Your calendar will automatically update when you register or
unregister from events.
</p>
</div>
<button
@click="showCalendarInstructions = false"
class="text-ghost-400 hover:text-ghost-200"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>
</div>
</div>
</UCard>
</div>
</UContainer>
@ -272,6 +326,33 @@ const { memberData, checkMemberStatus } = useAuth();
const registeredEvents = ref([]);
const loadingEvents = ref(false);
const calendarLinkCopied = ref(false);
const showCalendarInstructions = ref(false);
// Calendar subscription URL
const calendarUrl = computed(() => {
const memberId = memberData.value?._id || memberData.value?.id;
if (!memberId) return "";
const config = useRuntimeConfig();
const baseUrl = config.public.appUrl || "http://localhost:3000";
// Use webcal protocol for calendar subscription
const webcalUrl = baseUrl.replace(/^https?:/, "webcal:");
return `${webcalUrl}/api/members/my-calendar?memberId=${memberId}`;
});
// Copy calendar subscription link to clipboard
const copyCalendarLink = async () => {
try {
await navigator.clipboard.writeText(calendarUrl.value);
calendarLinkCopied.value = true;
showCalendarInstructions.value = true;
setTimeout(() => {
calendarLinkCopied.value = false;
}, 2000);
} catch (err) {
console.error("Failed to copy calendar link:", err);
}
};
// Handle authentication check on page load
const { pending: authPending } = await useLazyAsyncData(

19
app/pages/member/profile.vue
View file

@ -343,20 +343,6 @@
Peer Support
</h2>
<div
class="mb-6 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-4"
>
<p class="text-ghost-300 text-sm leading-relaxed">
Offer guidance to fellow members through the
<NuxtLink
to="/peer-support"
class="text-purple-400 hover:text-purple-300 underline"
>
Peer Support directory
</NuxtLink>
</p>
</div>
<div class="space-y-6">
<!-- Enable Toggle -->
<div class="flex items-start gap-4">
@ -416,7 +402,7 @@
!formData.peerSupportSkillTopics?.includes(t),
)"
:key="tag"
class="inline-block ml-2 text-blue-400 hover:text-blue-300 cursor-pointer underline"
class="inline-block ml-2 text-primary-400 hover:text-primary-300 cursor-pointer underline"
@click="addSuggestedSkillTopic(tag)"
>
{{ tag }}
@ -640,9 +626,6 @@
<p class="font-medium text-ghost-100">
{{ tier.label }}
</p>
<p class="text-sm text-ghost-400 mt-1">
{{ tier.features[0] }}
</p>
</div>
<div
v-if="selectedContributionTier === tier.value"