Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added back breadcrumb

Browse Source
This commit is contained in:
Alexis
2025-04-29 16:16:45 +02:00
parent acb5c0d92f
commit 6b01ce181d
5 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/calendar/menu/Menu.vue
View File

@@ -11,18 +11,15 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
<template> <template>
<header class="md:mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors"> <header class="md:mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
<div class="px-4 md:px-8 flex items-center justify-between gap-2"> <div class="px-5 md:px-8 flex items-center justify-between gap-2">
<menu class="flex items-center md:gap-2"> <menu class="flex items-center md:gap-2">
<li> <li>
<LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" /> <LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
</li> </li>
<li class="md:hidden">
<SidebarToggle />
</li>
<li class="max-md:hidden"> <li class="max-md:hidden">
<LazyCalendarMenuToday v-if="defaultDate" /> <LazyCalendarMenuToday v-if="defaultDate" />
</li> </li>
<li class="ml-4"> <li class="ml-2 md:ml-4">
<CalendarCurrentDate /> <CalendarCurrentDate />
</li> </li>
</menu> </menu>

76
components/global/Breadcrumb.vue
View File

@@ -15,46 +15,52 @@ defineProps<{
</script> </script>
<template> <template>
<UiBreadcrumb> <div class="flex gap-3 items-center">
<UiBreadcrumbList> <div class="md:hidden">
<UiBreadcrumbItem v-if="route.path !== '/my'"> <SidebarToggle />
<UiBreadcrumbLink as-child> </div>
<NuxtLink to="/my">
{{ $t("breadcrumbs.profile") }}
</NuxtLink>
</UiBreadcrumbLink>
</UiBreadcrumbItem>
<UiBreadcrumbItem v-else>
<UiBreadcrumbPage>
{{ $t("breadcrumbs.profile") }}
</UiBreadcrumbPage>
</UiBreadcrumbItem>
<template v-for="(item, index) in items" :key="index"> <UiBreadcrumb>
<UiBreadcrumbSeparator> <UiBreadcrumbList>
<PhCaretRight /> <UiBreadcrumbItem v-if="route.path !== '/my'">
</UiBreadcrumbSeparator> <UiBreadcrumbLink as-child>
<UiBreadcrumbItem> <NuxtLink to="/my">
<UiBreadcrumbLink v-if="item.to" as-child> {{ $t("breadcrumbs.profile") }}
<NuxtLink :to="item.to"> </NuxtLink>
</UiBreadcrumbLink>
</UiBreadcrumbItem>
<UiBreadcrumbItem v-else>
<UiBreadcrumbPage>
{{ $t("breadcrumbs.profile") }}
</UiBreadcrumbPage>
</UiBreadcrumbItem>
<template v-for="(item, index) in items" :key="index">
<UiBreadcrumbSeparator>
<PhCaretRight />
</UiBreadcrumbSeparator>
<UiBreadcrumbItem>
<UiBreadcrumbLink v-if="item.to" as-child>
<NuxtLink :to="item.to">
<template v-if="item.label">
{{ item.label }}
</template>
<template v-else>
{{ $t(`breadcrumbs.${item.translateKey}`) }}
</template>
</NuxtLink>
</UiBreadcrumbLink>
<UiBreadcrumbPage v-else>
<template v-if="item.label"> <template v-if="item.label">
{{ item.label }} {{ item.label }}
</template> </template>
<template v-else> <template v-else>
{{ $t(`breadcrumbs.${item.translateKey}`) }} {{ $t(`breadcrumbs.${item.translateKey}`) }}
</template> </template>
</NuxtLink> </UiBreadcrumbPage>
</UiBreadcrumbLink> </UiBreadcrumbItem>
<UiBreadcrumbPage v-else> </template>
<template v-if="item.label"> </UiBreadcrumbList>
{{ item.label }} </UiBreadcrumb>
</template> </div>
<template v-else>
{{ $t(`breadcrumbs.${item.translateKey}`) }}
</template>
</UiBreadcrumbPage>
</UiBreadcrumbItem>
</template>
</UiBreadcrumbList>
</UiBreadcrumb>
</template> </template>

4
pages/my/calendars/[id].vue
View File

@@ -60,8 +60,8 @@ watch([calendar], () => {
<Title>{{ calendar.data.name }}</Title> <Title>{{ calendar.data.name }}</Title>
</Head> </Head>
<div class="h-full md:grid md:grid-rows-[auto_1fr] pt-8 gap-y-1 md:gap-y-2"> <div class="h-full grid grid-rows-[auto_1fr] pt-8 md:gap-y-2">
<div class="px-5 md:px-8 max-md:hidden"> <div class="px-5 md:px-8 max-md:mb-2">
<Breadcrumb <Breadcrumb
v-if="calendar.data.world" v-if="calendar.data.world"
:items="[ :items="[

21
pages/my/index.vue
View File

@@ -9,9 +9,11 @@ definePageMeta({
middleware: ["auth-guard", "reset-menu"] middleware: ["auth-guard", "reset-menu"]
}) })
const { data: worlds } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId: user?.value!.id } }) const { data: worlds, status: worldStatus } = await useLazyFetch<{ data: World[] }>("/api/worlds/query", { query: { gmId: user?.value!.id }, key: "user-worlds", keepalive: true })
const sortedWorlds = computed(() => worlds.value?.data ? [...worlds.value.data].sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : []) const sortedWorlds = computed(() => worlds.value?.data ? [...worlds.value.data].sort((a, b) => (a.id ?? 0) - (b.id ?? 0)) : [])
const isLoading = computed(() => worldStatus.value === "idle")
// Redirect user back home when they log out on the page // Redirect user back home when they log out on the page
watch(user, (n) => { watch(user, (n) => {
if (!n) { if (!n) {
@@ -115,9 +117,15 @@ function hideEditModal() {
<Title>{{ $t("pages.profile.metaTitle") }}</Title> <Title>{{ $t("pages.profile.metaTitle") }}</Title>
</Head> </Head>
<Heading level="h1"> <div class="flex items-center gap-3">
{{ $t("pages.profile.title", { user: user?.user_metadata.full_name }) }} <div class="md:hidden">
</Heading> <SidebarToggle />
</div>
<Heading level="h1">
{{ $t("pages.profile.title", { user: user?.user_metadata.full_name }) }}
</Heading>
</div>
<section class="mt-4"> <section class="mt-4">
<Spacing size="lg"> <Spacing size="lg">
@@ -127,7 +135,10 @@ function hideEditModal() {
</Heading> </Heading>
</div> </div>
<ul v-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2"> <div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<LoadingCard />
</div>
<ul v-else-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<li v-for="world in sortedWorlds" :key="world.id"> <li v-for="world in sortedWorlds" :key="world.id">
<WorldPreviewCard :world="world" @on-edit="() => deployEditModal(world)" @on-delete="() => deployDeleteModal(world)" /> <WorldPreviewCard :world="world" @on-edit="() => deployEditModal(world)" @on-delete="() => deployDeleteModal(world)" />
</li> </li>

16
pages/my/worlds/[id].vue
View File

@@ -180,17 +180,17 @@ function hideEditModal() {
<header class="mb-8"> <header class="mb-8">
<Spacing size="lg"> <Spacing size="lg">
<div class="max-md:hidden"> <Breadcrumb
<Breadcrumb :items="[
:items="[ { label: world.data.name }
{ label: world.data.name } ]"
]" />
/>
</div>
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<Heading level="h1">{{ world.data.name }}</Heading> <div class="flex items-center gap-3">
<Heading level="h1">{{ world.data.name }}</Heading>
</div>
<UiTooltipProvider :delay-duration="250"> <UiTooltipProvider :delay-duration="250">
<UiTooltip> <UiTooltip>