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

UX/UI improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 13:26:51 +01:00
parent 418d3cc402
commit 4e6f5d36b8
14 changed files with 1964 additions and 924 deletions
Download patch file Download diff file Expand all files Collapse all files

104
app/layouts/admin.vue
View file

@ -1,6 +1,10 @@
<template>
<div class="site">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a>
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]"
>Skip to content</a
>
<!-- Desktop Sidebar -->
<aside class="sidebar sidebar-desktop">
<NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink>
@ -14,17 +18,26 @@
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/members" :class="{ active: route.path.startsWith('/admin/members') }">
<NuxtLink
to="/admin/members"
:class="{ active: route.path.startsWith('/admin/members') }"
>
Members
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/events" :class="{ active: route.path.startsWith('/admin/events') }">
<NuxtLink
to="/admin/events"
:class="{ active: route.path.startsWith('/admin/events') }"
>
Events
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/series-management" :class="{ active: route.path.includes('/admin/series') }">
<NuxtLink
to="/admin/series-management"
:class="{ active: route.path.includes('/admin/series') }"
>
Series
</NuxtLink>
</li>
@ -38,7 +51,7 @@
</div>
<div class="sidebar-meta">
<span class="admin-tag">admin</span><br>
<span class="admin-tag">admin</span><br />
<a href="#" @click.prevent="logout">Sign out</a>
</div>
</aside>
@ -59,28 +72,49 @@
<USlideover v-model:open="isMobileMenuOpen" side="left">
<template #body>
<aside class="sidebar sidebar-mobile">
<NuxtLink to="/" class="sidebar-brand" @click="isMobileMenuOpen = false">Ghost Guild</NuxtLink>
<NuxtLink
to="/"
class="sidebar-brand"
@click="isMobileMenuOpen = false"
>Ghost Guild</NuxtLink
>
<div class="sidebar-body">
<div class="sidebar-section">Admin</div>
<ul class="sidebar-nav">
<li>
<NuxtLink to="/admin" :class="{ active: route.path === '/admin' }" @click="isMobileMenuOpen = false">
<NuxtLink
to="/admin"
:class="{ active: route.path === '/admin' }"
@click="isMobileMenuOpen = false"
>
Dashboard
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/members" :class="{ active: route.path.startsWith('/admin/members') }" @click="isMobileMenuOpen = false">
<NuxtLink
to="/admin/members"
:class="{ active: route.path.startsWith('/admin/members') }"
@click="isMobileMenuOpen = false"
>
Members
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/events" :class="{ active: route.path.startsWith('/admin/events') }" @click="isMobileMenuOpen = false">
<NuxtLink
to="/admin/events"
:class="{ active: route.path.startsWith('/admin/events') }"
@click="isMobileMenuOpen = false"
>
Events
</NuxtLink>
</li>
<li>
<NuxtLink to="/admin/series-management" :class="{ active: route.path.includes('/admin/series') }" @click="isMobileMenuOpen = false">
<NuxtLink
to="/admin/series-management"
:class="{ active: route.path.includes('/admin/series') }"
@click="isMobileMenuOpen = false"
>
Series
</NuxtLink>
</li>
@ -88,13 +122,23 @@
<div class="sidebar-section">Site</div>
<ul class="sidebar-nav">
<li><NuxtLink to="/member/dashboard" @click="isMobileMenuOpen = false">Your Dashboard</NuxtLink></li>
<li><NuxtLink to="/" @click="isMobileMenuOpen = false">Public Site</NuxtLink></li>
<li>
<NuxtLink
to="/member/dashboard"
@click="isMobileMenuOpen = false"
>Your Dashboard</NuxtLink
>
</li>
<li>
<NuxtLink to="/" @click="isMobileMenuOpen = false"
>Public Site</NuxtLink
>
</li>
</ul>
</div>
<div class="sidebar-meta">
<span class="admin-tag">admin</span><br>
<span class="admin-tag">admin</span><br />
<a href="#" @click.prevent="logout">Sign out</a>
</div>
</aside>
@ -104,23 +148,29 @@
</template>
<script setup>
const route = useRoute()
const isMobileMenuOpen = ref(false)
const route = useRoute();
const isMobileMenuOpen = ref(false);
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
const currentPageName = computed(() => {
const path = route.path
if (path === '/admin') return 'admin'
return path.slice(1).replace(/\//g, ' / ')
})
const path = route.path;
if (path === "/admin") return "admin";
const segments = path.slice(1).split("/");
if (pageBreadcrumbTitle.value && segments.length > 1) {
return [...segments.slice(0, -1), pageBreadcrumbTitle.value].join(" / ");
}
return segments.join(" / ");
});
const logout = async () => {
try {
await $fetch('/api/auth/logout', { method: 'POST' })
await navigateTo('/')
await $fetch("/api/auth/logout", { method: "POST" });
await navigateTo("/");
} catch (error) {
console.error('Logout failed:', error)
console.error("Logout failed:", error);
}
}
};
</script>
<style scoped>
@ -155,7 +205,7 @@ const logout = async () => {
.sidebar-brand {
display: block;
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 16px;
font-weight: 600;
color: var(--candle);
@ -163,7 +213,9 @@ const logout = async () => {
border-bottom: 1px dashed var(--border);
text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand:hover {
text-decoration: none;
}
.sidebar-body {
flex: 1;
@ -239,7 +291,7 @@ const logout = async () => {
}
.brand {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 16px;
font-weight: 600;
color: var(--candle);

28
app/layouts/default.vue
View file

@ -1,6 +1,10 @@
<template>
<div class="site">
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a>
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]"
>Skip to content</a
>
<!-- Desktop Sidebar -->
<AppNavigation class="sidebar-desktop" />
@ -24,20 +28,24 @@
<AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
</template>
</USlideover>
</div>
</template>
<script setup>
const isMobileMenuOpen = ref(false)
const route = useRoute()
const isMobileMenuOpen = ref(false);
const route = useRoute();
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
const currentPageName = computed(() => {
const path = route.path
if (path === '/') return ''
// Convert /member/dashboard → member / dashboard
return path.slice(1).replace(/\//g, ' / ')
})
const path = route.path;
if (path === "/") return "";
const segments = path.slice(1).split("/");
if (pageBreadcrumbTitle.value && segments.length > 1) {
return [...segments.slice(0, -1), pageBreadcrumbTitle.value].join(" / ");
}
return segments.join(" / ");
});
</script>
<style scoped>
@ -71,7 +79,7 @@ const currentPageName = computed(() => {
}
.brand {
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
font-size: 16px;
font-weight: 600;
color: var(--candle);