colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: scrollbar isolée dans la zone de contenu + suppression des flèches
All checks were successful
Deploy / deploy (push) Successful in 2m38s
Details

Browse Source 
- Layout: h-screen overflow-hidden, <main> flex-col avec mt-16
- Pages avec toolbar: toolbar hors du conteneur scrollable (flex-col + overflow-y-auto flex-1)
- Pages sans toolbar: wrapper overflow-y-auto h-full
- app.scss: scrollbar-width/color limité à Firefox via @supports (-moz-appearance: none) pour éviter le conflit avec les pseudo-éléments webkit sur Chrome 121+
- Suppression des flèches de scrollbar via ::-webkit-scrollbar-button
- html/body overflow:hidden pour éviter la double scrollbar
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-13 19:32:45 +01:00
parent d4e456961a
commit 15cb59e420
11 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/styles/app.scss
View File

@@ -3,6 +3,11 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
html, body {
overflow: hidden;
height: 100%;
}
body {
background-color: white;
}
@@ -82,6 +87,33 @@ body {
@apply bg-gray-700;
}
/* Firefox uniquement — évite le conflit avec les pseudo-éléments webkit sur Chrome 121+ */
@supports (-moz-appearance: none) {
* {
scrollbar-width: thin;
scrollbar-color: #16a34a transparent;
}
.dark * {
scrollbar-color: #16a34a #1f2937;
}
}
/* Dark mode — webkit track */
.dark ::-webkit-scrollbar-track {
@apply bg-gray-800;
}
/* Supprime les flèches de la scrollbar */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
display: none;
width: 0;
height: 0;
}
///* Custom styles for the scrollbar buttons */
//::-webkit-scrollbar-button {
// @apply bg-gray-700;

2
assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="overflow-y-auto h-full">
<Toolbar :config="toolbarConfig" class="mb-6" />
<div v-if="activityStore.loading" class="flex justify-center py-8">

4
assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- En-tête -->
<div class="mb-8">
<div class="flex items-center space-x-3 mb-4">
@@ -150,7 +150,7 @@
<XMarkIcon class="w-4 h-4" />
</button>
</div>
</div>
</div></div>
</template>
<script>

4
assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto px-4 py-8">
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
@@ -92,7 +92,7 @@
<div v-if="store.allFilesProcessed" class="mt-8">
<ImportResults />
</div>
</div>
</div></div>
</template>
<script setup>

6
assets/vue/app/domain/manga/presentation/pages/HomePage.vue
View File

@@ -1,6 +1,7 @@
<template>
<div>
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div class="flex flex-col h-full">
<Toolbar :config="toolbarConfig" />
<div class="overflow-y-auto flex-1">
<div class="container mx-auto px-4">
<MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" />
<MangaList
@@ -23,6 +24,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>

10
assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
View File

@@ -1,8 +1,12 @@
<template>
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
<!-- Notifications Toast -->
<NotificationToast />
<Toolbar v-if="currentManga" :config="toolbarConfig" />
<div class="overflow-y-auto flex-1">
<div v-if="errorDetails" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded mx-4 mt-4">
{{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
</div>
@@ -11,8 +15,6 @@
<!-- Composant invisible qui écoute les mises à jour Mercure -->
<MercureListener :manga-id="String(mangaId)" />
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 dark:text-gray-400 z-20">
<ArrowPathIcon class="h-5 w-5 animate-spin" />
</div>
@@ -87,6 +89,8 @@
<div v-else class="text-center text-gray-500 dark:text-gray-400 py-10 px-4">
Aucun manga sélectionné ou trouvé.
</div>
</div>
</div>
</template>

6
assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div class="flex flex-col h-full">
<Toolbar :config="toolbarConfig" />
<div class="overflow-y-auto flex-1">
<div class="container mx-auto px-4 py-6">
<!-- Header -->
<div class="mb-8">
@@ -71,6 +72,7 @@
Configuration exportée !
</div>
</div>
</div>
<!-- Import Modal -->
<div v-if="showImportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">

6
assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
View File

@@ -1,7 +1,8 @@
<template>
<div>
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div class="flex flex-col h-full">
<Toolbar :config="toolbarConfig" />
<div class="overflow-y-auto flex-1">
<div class="container mx-auto px-4 py-6">
<!-- Back Navigation -->
<div class="mb-6">
@@ -181,6 +182,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>

4
assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto px-4 py-8 max-w-3xl">
<div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8 max-w-3xl">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('preferences.title') }}</h1>
@@ -175,7 +175,7 @@
</div>
</div>
</section>
</div>
</div></div>
</template>
<script setup>

4
assets/vue/app/shared/components/layout/Layout.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
<div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
<Header
:show-menu-button="isReaderMode"
@menu-click="toggleSidebar"
@@ -12,7 +12,7 @@
@add-manga-click="$emit('add-manga-click', $event)" />
<main :class="[
'flex-1 pt-16',
'flex-1 mt-16 flex flex-col overflow-hidden',
isReaderMode ? '' : 'md:ml-60'
]">
<RouterView></RouterView>

1
assets/vue/app/shared/components/ui/Toolbar.vue
View File

@@ -18,7 +18,6 @@
type: Object,
required: true,
validator: value => {
// Vérifie que leftSection et rightSection sont des tableaux
return Array.isArray(value.leftSection) && Array.isArray(value.rightSection);
}
}