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

responsive mobile layout

Browse Source
This commit is contained in:
glax
2025-10-13 20:46:09 +02:00
parent f641272c22
commit c292da4d60
12 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/app/pages/download/[mangaconnectorName]/[mangaId].vue
View File

@@ -38,5 +38,5 @@ const onDownloadClick = async () => {
loading.value = false;
};
useHead({title: `Download ${manga.value?.name} from ${mangaConnector.value?.name}`});
useHead({ title: `Download ${manga.value?.name} from ${mangaConnector.value?.name}` });
</script>

2
website/app/pages/index.vue
View File

@@ -13,5 +13,5 @@ const { data: manga, refresh } = await useApi('/v2/Manga', { key: FetchKeys.Mang
onMounted(() => refresh());
const expanded = ref(-1);
useHead({title: 'Tranga'});
useHead({ title: 'Tranga' });
</script>

4
website/app/pages/manga/[mangaId]/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<MangaDetailPage :manga="manga">
<div class="grid gap-3 grid-cols-[70%_30%]">
<div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]">
<ChaptersList v-if="manga" :manga-id="manga.key" />
<UCard>
<template #header>
@@ -57,5 +57,5 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
await refreshNuxtData(FetchKeys.Manga.Id(mangaId));
};
useHead({title: `Manga ${manga.value?.name}`});
useHead({ title: `Manga ${manga.value?.name}` });
</script>

2
website/app/pages/manga/[mangaId]/merge/[targetId].vue
View File

@@ -21,5 +21,5 @@ const mangaId = route.params.mangaId as string;
const { data: target } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId }, key: FetchKeys.Manga.Id(targetId) });
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
useHead({title: `Merge ${manga.value?.name} with ${target.value?.name}`});
useHead({ title: `Merge ${manga.value?.name} with ${target.value?.name}` });
</script>

2
website/app/pages/manga/[mangaId]/merge/index.vue
View File

@@ -19,5 +19,5 @@ const mangaId = route.params.mangaId as string;
const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });
useHead({title: `Merge Manga ${manga.value?.name}`});
useHead({ title: `Merge Manga ${manga.value?.name}` });
</script>

12
website/app/pages/search.vue
View File

@@ -1,13 +1,13 @@
<template>
<UPageBody>
<UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }" class="h-fit">
<UPageSection :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-4 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }" class="h-fit">
<UButton variant="soft" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
<div class="flex flex-row w-full h-full justify-between gap-4">
<div class="flex max-sm:flex-col flex-row w-full h-full justify-between gap-4">
<UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
<UCard class="grow">
<div class="flex flex-col justify-between gap-2">
<UInput v-model="query" class="w-full" :disabled="busy" />
<div class="flex gap-1 w-full justify-center">
<div class="flex flex-wrap gap-1 w-full justify-center">
<UButton
v-for="c in connectors"
:key="c.key"
@@ -27,14 +27,14 @@
</UPageSection>
<UPageSection
v-if="searchResult.length > 0"
:ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }">
:ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-1 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }">
<template #description>
<p class="text-lg">
Result for <span class="text-secondary">'{{ searchQuery }}'</span>
</p>
</template>
<template #default>
<div class="relative flex flex-row flex-wrap gap-6 mt-0">
<div class="relative flex flex-row flex-wrap gap-4 mt-0">
<MangaCard
v-for="(m, i) in searchResult"
:key="m.key"
@@ -120,5 +120,5 @@ const items = ref<StepperItem[]>([
{ title: 'Results', icon: 'i-lucide-logs' },
]);
useHead({title: 'Search Manga'});
useHead({ title: 'Search Manga' });
</script>

12
website/app/pages/settings.vue
View File

@@ -14,13 +14,11 @@
<template #header>
<h1>Maintenance</h1>
</template>
<div class="flex flex-col gap-1 items-end basis-1">
<UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
>Clean database</UButton
>
</div>
<UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase"
>Clean database</UButton
>
<UFormField label="API Url" name="apiUrl">
<UInput v-model="apiUrl" class="max-w-full w-lg" placeholder="http://<ip:port>/" />
<UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
<UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
</UFormField>
</UCard>
@@ -54,5 +52,5 @@ const cleanUpDatabase = async () => {
cleanUpDatabaseBusy.value = false;
};
useHead({title: 'Settings'});
useHead({ title: 'Settings' });
</script>