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:
ext.jeremy.guillot@maxicoffee.domains
parent
d23c82631e
commit
896c57ac34
@@ -1,55 +1,62 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-sm shadow mb-2">
|
||||
<!-- En-tête du volume -->
|
||||
<div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
|
||||
<!-- Partie gauche -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<BookmarkIcon class="h-8 w-8 text-gray-500" />
|
||||
<h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
|
||||
<div class="flex items-center w-16">
|
||||
<span
|
||||
:class="[
|
||||
'px-2 py-1 text-sm rounded w-full text-center text-white',
|
||||
{
|
||||
'bg-red-500': volume.downloadedChapter === 0,
|
||||
'bg-yellow-500':
|
||||
volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
|
||||
'bg-green-500': volume.downloadedChapter === volume.totalChapter
|
||||
}
|
||||
]">
|
||||
{{ volume.downloadedChapter }}/{{ volume.totalChapter }}
|
||||
</span>
|
||||
<div class="relative bg-white p-3 sm:p-4 rounded-t-sm">
|
||||
<!-- Layout mobile/desktop -->
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Partie gauche -->
|
||||
<div class="flex items-center space-x-1 sm:space-x-4 flex-1 min-w-0">
|
||||
<BookmarkIcon class="h-6 w-6 sm:h-8 sm:w-8 text-gray-500 flex-shrink-0" />
|
||||
<h2 class="text-lg sm:text-xl font-semibold w-20 sm:w-28 flex-shrink-0">Vol {{ String(volume.number).padStart(2, '0') }}</h2>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
:class="[
|
||||
'px-2 py-1 text-xs sm:text-sm rounded text-center text-white min-w-[3rem] sm:min-w-[4rem]',
|
||||
{
|
||||
'bg-red-500': volume.downloadedChapter === 0,
|
||||
'bg-yellow-500':
|
||||
volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
|
||||
'bg-green-500': volume.downloadedChapter === volume.totalChapter
|
||||
}
|
||||
]">
|
||||
{{ volume.downloadedChapter }}/{{ volume.totalChapter }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions du volume -->
|
||||
<div class="flex items-center space-x-1 sm:space-x-2">
|
||||
<button
|
||||
class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
|
||||
@click="handleSearch"
|
||||
:class="{
|
||||
'text-yellow-500 cursor-wait': isSearching,
|
||||
'text-gray-500 hover:text-green-500': !isSearching
|
||||
}">
|
||||
<MagnifyingGlassIcon class="h-5 w-5 sm:h-6 sm:w-6" />
|
||||
</button>
|
||||
<button
|
||||
class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
|
||||
@click="handleDownload"
|
||||
:class="{
|
||||
'text-yellow-500 cursor-wait': isDownloading,
|
||||
'text-gray-500 hover:text-green-500': !isDownloading
|
||||
}"
|
||||
:disabled="isDownloading">
|
||||
<ArrowDownTrayIcon class="h-5 w-5 sm:h-6 sm:w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bouton toggle -->
|
||||
<!-- Bouton toggle centré -->
|
||||
<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<component
|
||||
:is="isOpen ? ChevronUpIcon : ChevronDownIcon"
|
||||
class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
||||
@click="toggleVolume" />
|
||||
</div>
|
||||
|
||||
<!-- Actions du volume -->
|
||||
<div class="flex space-x-2 text-xl text-bold">
|
||||
<button
|
||||
class="w-8 text-center"
|
||||
@click="handleSearch"
|
||||
:class="{
|
||||
'text-yellow-500 cursor-wait': isSearching,
|
||||
'text-gray-500 hover:text-green-500': !isSearching
|
||||
}">
|
||||
<MagnifyingGlassIcon class="h-6 w-6" />
|
||||
</button>
|
||||
<button
|
||||
class="w-8 text-center"
|
||||
@click="handleDownload"
|
||||
:class="{
|
||||
'text-yellow-500 cursor-wait': isDownloading,
|
||||
'text-gray-500 hover:text-green-500': !isDownloading
|
||||
}"
|
||||
:disabled="isDownloading">
|
||||
<ArrowDownTrayIcon class="h-6 w-6" />
|
||||
@click="toggleVolume"
|
||||
class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center">
|
||||
<component
|
||||
:is="isOpen ? ChevronUpIcon : ChevronDownIcon"
|
||||
class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,10 +65,12 @@
|
||||
<MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" :manga-id="mangaId" />
|
||||
|
||||
<!-- Chevron de fermeture -->
|
||||
<div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
|
||||
<ChevronUpIcon
|
||||
class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
||||
@click="toggleVolume" />
|
||||
<div v-show="isOpen" class="flex justify-center p-2 bg-white rounded-b-sm">
|
||||
<button @click="toggleVolume" class="w-8 h-8 flex items-center justify-center">
|
||||
<ChevronUpIcon
|
||||
class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user