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.
This commit is contained in:
parent
d23c82631e
commit
896c57ac34
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user