feat: add show more/less toggle for series description

Allow users to expand long series descriptions with a "Show more" button
and scroll through the full text, instead of being limited to 3 lines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 13:11:05 +01:00
parent a1a986f462
commit f48d894eca
3 changed files with 18 additions and 5 deletions

View File

@@ -24,6 +24,7 @@ interface SeriesHeaderProps {
export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: SeriesHeaderProps) => {
const { toast } = useToast();
const [isFavorite, setIsFavorite] = useState(initialIsFavorite);
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
const { t } = useTranslate();
useEffect(() => {
@@ -105,7 +106,7 @@ export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: Serie
: null;
return (
<div className="relative min-h-[300px] md:h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
<div className="relative min-h-[300px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
{/* Image de fond */}
<div className="absolute inset-0">
<SeriesCover
@@ -138,9 +139,17 @@ export const SeriesHeader = ({ series, refreshSeries, initialIsFavorite }: Serie
</p>
)}
{series.summary && (
<p className="text-white/80 line-clamp-3 text-sm md:text-base">
{series.summary}
</p>
<div>
<p className={`text-white/80 text-sm md:text-base ${isDescriptionExpanded ? "max-h-[200px] overflow-y-auto" : "line-clamp-3"}`}>
{series.summary}
</p>
<button
onClick={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
className="text-white/60 hover:text-white/90 text-xs mt-1 transition-colors"
>
{t(isDescriptionExpanded ? "series.header.showLess" : "series.header.showMore")}
</button>
</div>
)}
<div className="flex items-center gap-4 mt-4 justify-center md:justify-start flex-wrap">
<StatusBadge status={statusInfo.status} icon={statusInfo.icon}>

View File

@@ -261,6 +261,8 @@
"add": "Added to favorites",
"remove": "Removed from favorites"
},
"showMore": "Show more",
"showLess": "Show less",
"toggleSidebar": "Toggle sidebar",
"toggleTheme": "Toggle theme"
}

View File

@@ -260,7 +260,9 @@
"favorite": {
"add": "Ajouté aux favoris",
"remove": "Retiré des favoris"
}
},
"showMore": "Voir plus",
"showLess": "Voir moins"
}
},
"books": {