streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correction responsive mobile

Browse Source
This commit is contained in:
streaper2
2026-05-12 20:18:43 +02:00
parent b81216210a
commit bd6380b7aa
5 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/actualites/[id]/page.tsx
View File

@@ -101,24 +101,24 @@ export default async function BlogPostPage({ params }: Props) {
}
return (
<article className="bg-gray-50 min-h-screen py-12 relative">
<article className="bg-white sm:bg-gray-50 min-h-screen py-0 sm:py-12 relative">
{/* Injection du style de force pour le texte */}
<style dangerouslySetInnerHTML={{ __html: noBreakStyle }} />
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative">
<div className="max-w-5xl mx-auto px-0 sm:px-6 lg:px-8 flex gap-4 lg:gap-8 justify-center relative">
{/* Conteneur principal de l'article */}
<div className="w-[calc(100%-3rem)] sm:w-full max-w-3xl relative">
<div className="w-full max-w-3xl relative">
{/* Navigation */}
<div className="mb-8">
<div className="mb-4 sm:mb-8 px-4 sm:px-0 pt-4 sm:pt-0">
<Link href="/actualites" className="inline-flex items-center text-gray-500 hover:text-brand-600 text-sm font-medium transition-colors">
<ArrowLeft className="w-4 h-4 mr-1" /> Retour aux articles
</Link>
</div>
<div className="bg-white rounded-xl shadow-sm p-6 md:p-10 border border-gray-100 relative z-10">
{/* Image d'en-tête */}
<div className="w-full h-64 md:h-80 relative mb-8 rounded-lg overflow-hidden shadow-md">
<div className="bg-white sm:rounded-xl shadow-none sm:shadow-sm sm:p-10 border-none sm:border sm:border-gray-100 relative z-10">
{/* Image d'en-tête en pleine largeur sur mobile */}
<div className="w-full h-64 md:h-80 relative mb-6 sm:mb-8 sm:rounded-lg overflow-hidden shadow-none sm:shadow-md">
<LightboxImage
src={post.imageUrl}
alt={post.title}
@@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
</div>
{/* Header de l'article */}
<header className="mb-8 border-b border-gray-100 pb-8">
<header className="mb-6 sm:mb-8 border-b border-gray-100 pb-6 sm:pb-8 px-4 sm:px-0">
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
<span className="flex items-center">
<User className="w-4 h-4 mr-1 text-brand-500" />
@@ -156,7 +156,7 @@ export default async function BlogPostPage({ params }: Props) {
</header>
{/* Contenu de l'article */}
<div className="prose prose-lg prose-orange max-w-none text-gray-600">
<div className="prose sm:prose-lg prose-orange max-w-none text-gray-600 px-4 sm:px-0">
{/* Résumé / Lead */}
<p className="lead text-xl text-gray-500 font-serif italic mb-6 border-b border-gray-100 pb-6">
{post.excerpt}
@@ -172,7 +172,7 @@ export default async function BlogPostPage({ params }: Props) {
{/* Sources Section */}
{Array.isArray(post.sources) && post.sources.length > 0 && (
<div className="mt-12 p-6 bg-gray-50 rounded-xl border border-gray-100">
<div className="mt-8 sm:mt-12 p-4 sm:p-6 bg-gray-50 sm:rounded-xl border-t sm:border border-gray-100 mx-4 sm:mx-0">
<h3 className="text-sm font-bold uppercase tracking-wider text-gray-400 mb-4 flex items-center gap-2">
<Share2 className="w-4 h-4 text-brand-500" />
Sources & Références
@@ -196,8 +196,14 @@ export default async function BlogPostPage({ params }: Props) {
</div>
)}
{/* Partage sur mobile */}
<div className="mt-8 pt-6 border-t border-gray-100 block sm:hidden px-4">
<p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 text-center">Partager cet article</p>
<BlogShareButtons title={post.title} layout="horizontal" />
</div>
{/* Partage / Footer */}
<div className="mt-12 pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4">
<div className="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-4 px-4 sm:px-0">
<p className="text-gray-500 font-medium">Vous avez aimé cet article ?</p>
<Link
href="/actualites"
@@ -211,7 +217,7 @@ export default async function BlogPostPage({ params }: Props) {
</div>
{/* Sidebar flottante verticale à droite (suit l'article et s'arrête à la fin) */}
<div className="w-10 shrink-0 relative">
<div className="hidden sm:block w-10 shrink-0 relative">
<div className="sticky top-32 z-50">
<BlogShareButtons title={post.title} />
</div>