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

Basic actions page

Browse Source 
Rimless TrangaPage
Scroll behavior
This commit is contained in:
glax
2025-10-16 22:50:40 +02:00
parent 2b6818b09e
commit 90dd1d050d
5 changed files with 81 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<UPageList class="gap-2">
<UPageList class="gap-2 h-full overflow-y-scroll">
<UPageCard v-for="chapter in chapters" :key="chapter.key" orientation="horizontal" :ui="{ container: 'p-2 sm:p-2' }">
<template #title>
<p class="text-primary">{{ chapter.title }}</p>

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

@@ -1,11 +1,11 @@
<template>
<UPageBody v-bind="$props" class="mt-0 pb-0 min-md:pr-4 h-full">
<UPageBody v-bind="$props" class="mt-0 pb-0 h-[calc(100dvh-var(--ui-header-height))] relative min-xl:overflow-clip">
<div class="flex min-md:flex-row max-md:flex-col gap-4 h-full relative">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated min-md:w-3/7 min-xl:w-2/7 max-md:w-full px-4 max-md:px-2 py-4">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated min-md:w-3/7 min-xl:w-2/7 max-md:w-full py-4 pl-4 pr-2">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative max-md:px-2', $slots.left ? '' : 'pl-4']">
<div class="w-full flex flex-row justify-between mb-4">
<div class="flex flex-col gap-2 w-full h-full py-4 relative">
<div :class="['w-full flex flex-row justify-between', $slots.left ? 'min-md:pr-4 max-md:px-2' : 'px-4']">
<div class="flex flex-row gap-6">
<UButton
variant="outline"
@@ -22,7 +22,9 @@
<slot name="actions" />
</div>
</div>
<slot />
<div :class="[$slots.left ? rimless ? '' : 'min-md:mr-4 max-md:mx-2' : rimless ? '' : 'mx-4', 'h-full']">
<slot />
</div>
</div>
</div>
</UPageBody>
@@ -36,6 +38,7 @@ const backUrl = route.query.return as string | undefined;
export interface PageProps extends PageBodyProps {
title?: string;
rimless?: boolean;
}
defineProps<PageProps>();