julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ajustement des z-index dans le lecteur pour une meilleure hiérarchie visuelle

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-12 20:59:06 +01:00
parent 31a7e6d4e1
commit 71e4662047
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/reader/BookReader.tsx
View File

@@ -287,7 +287,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{/* Contenu principal */} {/* Contenu principal */}
<div className="relative h-full w-full flex items-center justify-center"> <div className="relative h-full w-full flex items-center justify-center">
{/* Boutons en haut */} {/* Boutons en haut */}
<div className="absolute top-4 left-4 flex items-center gap-2"> <div className="absolute top-4 left-4 flex items-center gap-2 z-30">
<button <button
onClick={() => setIsDoublePage(!isDoublePage)} onClick={() => setIsDoublePage(!isDoublePage)}
className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors" className="p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors"
@@ -318,7 +318,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{currentPage > 1 && ( {currentPage > 1 && (
<button <button
onClick={handlePreviousPage} onClick={handlePreviousPage}
className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors" className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors z-20"
aria-label="Page précédente" aria-label="Page précédente"
> >
<ChevronLeft className="h-8 w-8" /> <ChevronLeft className="h-8 w-8" />
@@ -326,7 +326,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
)} )}
{/* Pages */} {/* Pages */}
<div className="relative h-full max-h-full w-auto max-w-full p-4 flex gap-2"> <div className="relative h-full max-h-full w-auto max-w-full p-4 flex gap-2 z-10">
{/* Page courante */} {/* Page courante */}
<div className="relative h-full w-auto"> <div className="relative h-full w-auto">
{isLoading && ( {isLoading && (
@@ -375,7 +375,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{currentPage < pages.length && ( {currentPage < pages.length && (
<button <button
onClick={handleNextPage} onClick={handleNextPage}
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors" className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors z-20"
aria-label="Page suivante" aria-label="Page suivante"
> >
<ChevronRight className="h-8 w-8" /> <ChevronRight className="h-8 w-8" />
@@ -386,7 +386,7 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{onClose && ( {onClose && (
<button <button
onClick={onClose} onClick={onClose}
className="absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors" className="absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-colors z-30"
aria-label="Fermer" aria-label="Fermer"
> >
<svg <svg