Hornwitser
ae1c653af6
Pull out the list of events into its own page sorted by name and show the event slots in chronological order on the schedule page, with past slots hidden by default. This makes the content underneath the schedule the most immediately useful to have in the moment, while the full list is kept separately and in a predictable order.
72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/events">Events</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/schedule">Schedule</NuxtLink>
|
|
</li>
|
|
<li v-if="accountStore.canEdit">
|
|
<NuxtLink to="/edit">Edit</NuxtLink>
|
|
</li>
|
|
<li v-if="accountStore.isAdmin">
|
|
<NuxtLink to="/admin">Admin</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/about">About</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="account">
|
|
<template v-if="accountStore.valid">
|
|
{{ accountStore.name }}
|
|
(s:{{ sessionStore.id }} a:{{ accountStore.id }}{{ sessionStore.push ? " push" : null }})
|
|
{{ accountStore.type }}
|
|
<NuxtLink to="/account/settings">Settings</NuxtLink>
|
|
<ButtonLogOut v-if="accountStore.type !== 'anonymous'"/>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink to="/login">Log In</NuxtLink>
|
|
<NuxtLink to="/register">Register</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const accountStore = useAccountStore();
|
|
const sessionStore = useSessionStore();
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
line-height: 1.5; /* Prevent layout shift from log out button */
|
|
display: flex;
|
|
column-gap: 1em;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--foreground);
|
|
margin-block-start: 1rem;
|
|
}
|
|
.account {
|
|
display: flex;
|
|
justify-content: end;
|
|
flex-grow: 1;
|
|
column-gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav ul {
|
|
padding: 0;
|
|
display: flex;
|
|
column-gap: 0.5em;
|
|
list-style: none;
|
|
}
|
|
</style>
|