blomios/ReadaBook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): lecteur mobile — compacter la barre du lecteur sur téléphone (wrap flex, libellés secondaires masqués, navigation/plein écran en icônes, select de mode réductible) pour éliminer le rognage à droite (bug #40)

Browse Source
This commit is contained in:
Git Agent
2026-08-26 13:12:05 +02:00
parent edaad8f667
commit b26116fbe3
3 changed files with 91 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/reader/ReaderShell.tsx
View File

@ -1,4 +1,4 @@
import { ArrowLeft, ArrowRight } from "lucide-react";
import { ArrowLeft, ArrowRight, Maximize2, Minimize2 } from "lucide-react";
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { ErrorRibbon } from "../components/ui";
import { navigate } from "../router";
@ -189,9 +189,9 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
setHeaderVisible(true);
}}
>
<button className="ghost-button" onClick={() => navigate(backHref)}>
<button className="ghost-button reader-back-button" onClick={() => navigate(backHref)} aria-label="Retour">
<ArrowLeft size={17} />
Retour
<span>Retour</span>
</button>
<strong className="reader-title">{title}</strong>
<span className="reader-position">{controls.positionLabel}</span>
@ -204,12 +204,12 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
</select>
</label>
)}
<button className="ghost-button" onClick={controls.onPrevious} disabled={!controls.canPrevious}>
<button className="ghost-button reader-nav-button reader-previous-button" onClick={controls.onPrevious} disabled={!controls.canPrevious} aria-label="Page precedente">
<ArrowLeft size={16} />
Precedent
<span>Precedent</span>
</button>
<button className="ghost-button" onClick={controls.onNext} disabled={!controls.canNext}>
Suivant
<button className="ghost-button reader-nav-button reader-next-button" onClick={controls.onNext} disabled={!controls.canNext} aria-label="Page suivante">
<span>Suivant</span>
<ArrowRight size={16} />
</button>
{zoomControls && (
@ -226,8 +226,9 @@ export function ReaderShell({ title, backHref, error, onRetry, controls, zoomCon
</button>
</div>
)}
<button className="ghost-button reader-fullscreen-toggle" onClick={() => void toggleFullscreen()} aria-pressed={fullscreenActive}>
{fullscreenActive ? "Quitter le plein écran" : "Plein écran"}
<button className="ghost-button reader-fullscreen-toggle" onClick={() => void toggleFullscreen()} aria-pressed={fullscreenActive} aria-label={fullscreenActive ? "Quitter le plein écran" : "Plein écran"}>
{fullscreenActive ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
<span>{fullscreenActive ? "Quitter le plein écran" : "Plein écran"}</span>
</button>
</header>
{error && (