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

feat: amélioration de l'interface utilisateur des composants MangaHeader, MangaVolume et MangaVolumeList, avec des ajustements de style pour une meilleure réactivité et une expérience utilisateur optimisée sur mobile. Ajout de la gestion de la taille de la fenêtre pour adapter l'affichage des éléments.

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-06-29 23:59:02 +02:00
parent d23c82631e
commit 896c57ac34
9 changed files with 171 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/vue/app/shared/components/ui/ToolbarButton.vue
View File

@@ -2,19 +2,18 @@
<button
@click="$emit('click')"
:class="[
'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white',
'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white',
active
? 'text-green-500' // Style actif
: 'hover:text-green-500' // Effet de survol
]"
:aria-label="label || 'Toolbar button'">
<component v-if="icon" :is="icon" class="h-6 w-6" />
<component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" />
<ToolbarLabel :label="label" />
</button>
</template>
<script setup>
import { computed } from 'vue';
import ToolbarLabel from './ToolbarLabel.vue';
defineProps({

8
assets/vue/app/shared/components/ui/ToolbarDropdown.vue
View File

@@ -3,11 +3,11 @@
<div class="h-full">
<MenuButton
:class="[
'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
active ? 'text-green-500' : ''
]"
:aria-label="label || 'Options'">
<component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
<component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" aria-hidden="true" />
<ToolbarLabel :label="label" />
</MenuButton>
</div>
@@ -32,8 +32,8 @@
</template>
<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
import ToolbarLabel from './ToolbarLabel.vue';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
import ToolbarLabel from './ToolbarLabel.vue';
defineProps({
icon: {

2
assets/vue/app/shared/components/ui/ToolbarLabel.vue
View File

@@ -1,5 +1,5 @@
<template>
<span v-if="label" class="text-xs">{{ label }}</span>
<span v-if="label" class="text-xs hidden sm:inline">{{ label }}</span>
</template>
<script setup>