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

Styling (fix margins)

Browse Source 
Remove expanding MangaCards
Center MangaCardList
Fix LibrarySelect
This commit is contained in:
glax
2025-10-14 23:36:39 +02:00
parent 39a1cb3857
commit 3f5c009d2e
11 changed files with 42 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,14 @@
<span class="inline">Ch. {{ chapter.chapterNumber }}</span>
</p>
</template>
<template #footer>
<div class="flex flex-row gap-1 items-center text-dimmed">
<p>Downloaded:</p>
<Icon v-if="chapter.downloaded" name="i-lucide-circle-check-big" />
<Icon v-else name="i-lucide-circle-x" />
</div>
</template>
<template #description>
<p>{{ chapter.fileName }}</p>
</template>
<template #default>
<div class="flex flex-row gap-2 w-full">
<div class="flex flex-row gap-2 w-full items-center">
<UTooltip :text="chapter.downloaded ? 'Downloaded' : 'Not downloaded'">
<UIcon :name="chapter.downloaded ? 'i-lucide-cloud-check' : 'i-lucide-cloud-alert'" size="20" />
</UTooltip>
<div
v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) =>
a.mangaConnectorName < b.mangaConnectorName ? -1 : 1

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

@@ -33,7 +33,7 @@ export interface LibrarySelectProps {
const props = defineProps<LibrarySelectProps>();
const library = ref(props.libraryId);
const library = computed(() => props.libraryId);
const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
const loading = ref(false);

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" class="mt-0 pb-0 pr-4 h-full">
<UPageBody v-else v-bind="$props" class="mt-0 pb-0 px-4 h-full">
<template v-for="(_, slotName) in $slots" #[slotName]>
<slot :name="slotName" />
</template>

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

@@ -1,34 +1,12 @@
<template>
<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-4 mr-4"
@click="$emit('click')">
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">
<MangaCover :manga="manga" blur />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
</div>
</UCard>
<UCard
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-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">
<MangaCover :manga="manga" class="shrink-0" />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
</div>
<div class="flex flex-col h-(--mangacover-height) shrink mx-2 mt-4">
<p class="font-semibold text-xl">{{ manga.name }}</p>
</div>
</div>
<div class="absolute bottom-0 w-full p-2 flex flex-row justify-end">
<slot name="actions" v-bind="manga" />
</div>
</UCard>
</template>
<script setup lang="ts">
@@ -38,10 +16,8 @@ type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga'];
defineProps<MangaCardProps>();
defineEmits(['click']);
export interface MangaCardProps extends /* @vue-ignore */ PageCardProps {
manga: Manga | MinimalManga;
expanded?: boolean;
}
</script>

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

@@ -1,10 +1,12 @@
<template>
<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 class="flex flex-row flex-wrap gap-2 justify-evenly">
<MangaCard
v-for="(m, i) in manga"
:key="m.key"
:manga="m"
:expanded="i === expanded"
class="cursor-pointer"
@click="$emit('click', m)" />
</div>
</template>
@@ -14,5 +16,7 @@ type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga'];
const expanded = ref(-1);
defineEmits<{ (e: 'click', manga: MinimalManga | Manga): void }>();
defineProps<{ manga?: (MinimalManga | Manga)[] }>();
</script>

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

@@ -1,7 +1,7 @@
<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">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-2/7 h-full px-4 py-4">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">