glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 09:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "TrangaPage" composable

Browse Source
This commit is contained in:
glax
2025-10-14 21:08:30 +02:00
parent a622c7c45a
commit 39a1cb3857
13 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/app/components/LoadingPage.vue
View File

@@ -2,7 +2,7 @@
<UPageBody v-if="loading">
<UPageHero title="Loading..." />
</UPageBody>
<UPageBody v-else v-bind="$props">
<UPageBody v-else v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
<template v-for="(_, slotName) in $slots" #[slotName]>
<slot :name="slotName" />
</template>

4
website/app/components/MangaCard.vue
View File

@@ -2,7 +2,7 @@
<UCard
v-if="!expanded"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-2 mb-2"
class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4"
@click="$emit('click')">
<MangaCover :manga="manga" blur />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
@@ -13,7 +13,7 @@
v-else
orientation="horizontal"
reverse
class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-2 mb-2"
class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-4 mr-4"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
@click="$emit('click')">
<div class="flex flex-row w-full h-full basis-auto">

12
website/app/components/MangaCardList.vue
View File

@@ -1,9 +1,11 @@
<template>
<MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
<template #actions="forManga">
<UButton :to="`/manga/${forManga.key}`">Details</UButton>
</template>
</MangaCard>
<div class="flex flex-row flex-wrap gap-2">
<MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
<template #actions="forManga">
<UButton :to="`/manga/${forManga.key}`">Details</UButton>
</template>
</MangaCard>
</div>
</template>
<script setup lang="ts">

27
website/app/components/MangaDetailPage.vue
View File

@@ -1,7 +1,7 @@
<template>
<UPage class="h-full">
<TrangaPage v-bind="$props">
<template #left>
<div class="flex flex-col gap-2 p-4 bg-elevated">
<div class="flex flex-col gap-2">
<MangaCover v-if="manga" :manga="manga" class="self-center" />
<USkeleton v-else class="w-[240px] h-[350px]" />
<p v-if="manga" class="font-semibold text-xl">
@@ -23,29 +23,20 @@
<USkeleton v-else class="w-full h-30" />
</div>
</template>
<UPageBody class="relative min-sm:mr-12 max-sm:mx-4">
<div class="w-full flex flex-row justify-between">
<div>
<UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
<p v-if="title" class="text-3xl">{{ title }}</p>
</div>
<div v-if="manga" class="flex flex-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</UPageBody>
</UPage>
<template #actions>
<slot name="actions" />
</template>
<slot />
</TrangaPage>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
import TrangaPage, { type PageProps } from '~/components/TrangaPage.vue';
type Manga = components['schemas']['Manga'];
export interface MangaDetailPageProps {
export interface MangaDetailPageProps extends PageProps {
manga?: Manga;
title?: string;
backPath?: string;
}
defineProps<MangaDetailPageProps>();

36
website/app/components/TrangaPage.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<UPageBody v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
<div class="flex flex-row gap-4 h-full relative">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-1/5 h-full pl-4 py-4">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">
<div class="w-full flex flex-row justify-between mb-4">
<div class="flex flex-row gap-6">
<UButton variant="outline" color="neutral" :to="back?.href ?? '/'" :icon="back?.icon ?? 'i-lucide-home'">{{
back?.text ?? 'Home'
}}</UButton>
<slot name="title">
<p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
</slot>
</div>
<div class="flex flew-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</div>
</div>
</UPageBody>
</template>
<script setup lang="ts">
import type { PageBodyProps } from '#ui/components/PageBody.vue';
export interface PageProps extends PageBodyProps {
title?: string;
back?: { href?: string; text?: string; icon?: string };
}
defineProps<PageProps>();
</script>