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

Fixed some inconsistencies

Browse Source
This commit is contained in:
Alexis
2025-04-25 16:56:09 +02:00
parent ee29169f4f
commit e634cc8127
7 changed files with 84 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/calendar/PreviewCard.vue
View File

@@ -1,37 +1,51 @@
<script lang="ts" setup> <script lang="ts" setup>
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils"
import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"; import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
import { DateTime } from "luxon"; import { DateTime } from "luxon"
import type { Calendar } from "~/models/CalendarConfig"; import type { Calendar } from "~/models/CalendarConfig"
const props = defineProps<{ const props = defineProps<{
calendar: Calendar, calendar: Calendar
gmId?: string, gmId?: string
showActions?: boolean, showActions?: boolean
}>() }>()
const emit = defineEmits(["on-edit", "on-delete"]) const emit = defineEmits(["on-edit", "on-delete"])
const { locale } = useI18n(); const cardRef = ref(null)
const isCardHovered = useElementHover(cardRef)
const { focused: isCardFocused } = useFocusWithin(cardRef)
const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }); const { locale } = useI18n()
const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "");
const user = useSupabaseUser(); const createdAt = DateTime.fromISO(props.calendar.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId); const updatedAt = computed<string>(() => props.calendar.updatedAt ? DateTime.fromISO(props.calendar.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`);
const user = useSupabaseUser()
const isOwner = computed(() => user.value && props.gmId && user.value.id === props.gmId)
const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calendar.id}` : `/calendars/${props.calendar.shortId}`)
const hasActions = computed(() => isOwner.value && props.showActions)
</script> </script>
<template> <template>
<UiCard <UiCard
class="w-full h-full flex flex-col transition-all" ref="cardRef"
class="w-full h-full flex flex-col"
:link="calendarLink" :link="calendarLink"
:class="cn( :class="cn(
calendar.color ? `card-color element-${calendar.color}` : '', calendar.color ? `group card-color element-${calendar.color}` : '',
)" )"
> >
<UiCardHeader class="gap-4"> <UiCardHeader class="gap-4">
<UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle> <UiCardTitle
class="text-xl"
:class="cn({
'pr-18': hasActions
})"
>
{{ calendar.name }}
</UiCardTitle>
<div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm"> <div v-if="calendar.state === 'published'" class="flex items-center gap-1 text-sm">
<PhFile size="20" weight="fill" /> <PhFile size="20" weight="fill" />
@@ -55,16 +69,19 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
</p> </p>
<div <div
v-if="isOwner && showActions" v-if="hasActions && (isCardHovered || isCardFocused)"
class="flex gap-1 absolute top-4 right-4 z-20" class="flex gap-2 absolute top-4 right-4 z-20"
> >
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')"> <Transition name="fade" appear>
<PhPencil size="16" /> <UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
<PhPencil size="15" weight="fill" />
</UiButton> </UiButton>
</Transition>
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')"> <Transition name="fade" appear>
<PhTrash size="16" /> <UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
<PhTrash size="15" weight="fill" />
</UiButton> </UiButton>
</Transition>
</div> </div>
</UiCardContent> </UiCardContent>

13
components/ui/card/Card.vue
View File

@@ -15,21 +15,22 @@ const emit = defineEmits(["on-click"])
<div <div
:class=" :class="
cn('rounded-lg border bg-card text-card-foreground shadow-xs transition-all isolate', props.class, { cn('rounded-lg border bg-card text-card-foreground shadow-xs transition-all isolate', props.class, {
'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]': 'relative hover:-translate-y-[.2rem]':
props.link || props.hasClick props.link || props.hasClick
}) })
" "
> >
<slot />
<NuxtLink <NuxtLink
v-if="props.link" v-if="props.link"
:to="props.link" :to="props.link"
class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer" class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
/> />
<button <button
v-if="props.hasClick" v-if="props.hasClick"
class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer" class="rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 absolute inset-0 z-10 cursor-pointer"
@click="emit('on-click')" /> @click="emit('on-click')"
/>
<slot />
</div> </div>
</template> </template>

43
components/world/PreviewCard.vue
View File

@@ -1,23 +1,28 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"; import { PhArchive, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue"
import type { World } from "~/models/World"; import type { World } from "~/models/World"
import { DateTime } from "luxon"; import { DateTime } from "luxon"
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils"
const props = defineProps<{ const props = defineProps<{
world: World world: World
}>(); }>()
const emit = defineEmits(["on-edit", "on-delete"]); const emit = defineEmits(["on-edit", "on-delete"])
const { locale } = useI18n(); const cardRef = ref(null)
const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }); const isCardHovered = useElementHover(cardRef)
const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : ""); const { focused: isCardFocused } = useFocusWithin(cardRef)
const { locale } = useI18n()
const createdAt = DateTime.fromISO(props.world.createdAt!).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value })
const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromISO(props.world.updatedAt).toLocaleString(DateTime.DATETIME_MED, { locale: locale.value }) : "")
</script> </script>
<template> <template>
<UiCard <UiCard
class="w-full h-full flex flex-col transition-all" ref="cardRef"
class="w-full h-full flex flex-col"
:link="`/my/worlds/${world.id}`" :link="`/my/worlds/${world.id}`"
:class="cn( :class="cn(
world.color ? `card-color element-${world.color}` : '', world.color ? `card-color element-${world.color}` : '',
@@ -44,14 +49,20 @@ const updatedAt = computed<string>(() => props.world.updatedAt ? DateTime.fromIS
<UiCardContent class="grow"> <UiCardContent class="grow">
<p class="italic">{{ world.description }}</p> <p class="italic">{{ world.description }}</p>
<div class="flex gap-1 absolute top-4 right-4 z-20"> <div
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-indigo-400 dark:hover:bg-indigo-700" @click="emit('on-edit')"> v-if="isCardHovered || isCardFocused"
<PhPencil size="16" /> class="flex gap-2 absolute top-4 right-4 z-20"
>
<Transition name="fade" appear>
<UiButton size="icon" variant="outline" class="size-8 border-foreground/20 group-hover:border-foreground/30 hover:text-background hover:border-foreground hover:bg-foreground" @click="emit('on-edit')">
<PhPencil size="15" weight="fill" />
</UiButton> </UiButton>
</Transition>
<UiButton size="icon" variant="ghost" class=" hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="emit('on-delete')"> <Transition name="fade" appear>
<PhTrash size="16" /> <UiButton size="icon" variant="outline" class="size-8 border-foreground/25 group-hover:border-foreground/40 hover:text-background hover:border-rose-500 hover:bg-rose-500" @click="emit('on-delete')">
<PhTrash size="15" weight="fill" />
</UiButton> </UiButton>
</Transition>
</div> </div>
</UiCardContent> </UiCardContent>

6
pages/explore.vue
View File

@@ -11,7 +11,7 @@ const isLoading = computed(() => calendarStatus.value === "pending")
</script> </script>
<template> <template>
<main class="p-8"> <main class="py-8 px-5 md:px-8">
<Head> <Head>
<Title>{{ $t("pages.explore.title") }}</Title> <Title>{{ $t("pages.explore.title") }}</Title>
</Head> </Head>
@@ -26,10 +26,10 @@ const isLoading = computed(() => calendarStatus.value === "pending")
{{ $t("entity.calendar.namePublicPlural") }} {{ $t("entity.calendar.namePublicPlural") }}
</Heading> </Heading>
<div v-if="isLoading" class="grid md: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 /> <LoadingCard />
</div> </div>
<ul v-else-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2"> <ul v-else-if="availableCalendars?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
<li v-for="calendar in availableCalendars.data" :key="calendar.shortId"> <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
<CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" /> <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
</li> </li>

2
pages/index.vue
View File

@@ -9,7 +9,7 @@ definePageMeta({
</script> </script>
<template> <template>
<main class="p-8"> <main class="py-8 px-5 md:px-8">
<Head> <Head>
<Title> <Title>
TTTools — {{ $t('head.title') }} TTTools — {{ $t('head.title') }}

2
pages/my/index.vue
View File

@@ -110,7 +110,7 @@ function hideEditModal() {
</script> </script>
<template> <template>
<main class="p-8"> <main class="py-8 px-5 md:px-8">
<Head> <Head>
<Title>{{ $t("pages.profile.metaTitle") }}</Title> <Title>{{ $t("pages.profile.metaTitle") }}</Title>
</Head> </Head>

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

@@ -163,7 +163,7 @@ function hideEditModal() {
</script> </script>
<template> <template>
<main class="p-8"> <main class="py-8 px-5 md:px-8">
<template v-if="status === 'pending'"> <template v-if="status === 'pending'">
<Head> <Head>
<Title>{{ $t("entity.world.namePlural") }}</Title> <Title>{{ $t("entity.world.namePlural") }}</Title>