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

33
app/afrolife/[id]/page.tsx
View File

@@ -6,6 +6,7 @@ import { sanitizeHTML } from '../../../lib/sanitize';
import { prisma } from '../../../lib/prisma';
import { InterviewType } from '@prisma/client';
import LightboxImage from '@/components/LightboxImage';
import BlogShareButtons from '../../../components/BlogShareButtons';
import { Metadata } from 'next';
@@ -91,13 +92,15 @@ export default async function AfroLifeDetailPage({ params }: Props) {
return (
<div className="bg-white min-h-screen">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 mb-8 transition-colors">
<ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
</Link>
<div className="max-w-4xl mx-auto px-0 sm:px-6 lg:px-8 py-0 sm:py-12">
<div className="pt-4 sm:pt-0 px-4 sm:px-0 mb-6 sm:mb-8">
<Link href="/afrolife" className="inline-flex items-center text-gray-500 hover:text-brand-600 transition-colors">
<ArrowLeft className="w-4 h-4 mr-2" /> Retour à Afro Life
</Link>
</div>
{/* Header Info */}
<div className="text-center mb-10">
<div className="text-center mb-8 sm:mb-10 px-4 sm:px-0">
<div className="inline-flex items-center justify-center px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-bold uppercase tracking-wider mb-4">
{isEvent ? 'Événement' : (isVideo ? 'Interview Vidéo' : 'Grand Entretien')}
</div>
@@ -143,9 +146,9 @@ export default async function AfroLifeDetailPage({ params }: Props) {
</div>
</div>
{/* Main Content Area */}
{/* Main Content Area en pleine largeur sur mobile */}
{isVideo ? (
<div className="bg-black rounded-xl overflow-hidden shadow-2xl aspect-w-16 aspect-h-9 mb-10">
<div className="bg-black rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-2xl aspect-w-16 aspect-h-9 mb-8 sm:mb-10 w-full">
{(interview as any).videoUrl ? (
<iframe
src={getEmbedUrl((interview as any).videoUrl) || ''}
@@ -161,7 +164,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
)}
</div>
) : (
<div className="relative h-64 md:h-96 rounded-xl overflow-hidden shadow-lg mb-10">
<div className="relative h-64 md:h-96 rounded-none sm:rounded-xl overflow-hidden shadow-none sm:shadow-lg mb-8 sm:mb-10 w-full">
<LightboxImage
src={item!.thumbnailUrl}
alt={item!.title}
@@ -172,7 +175,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
)}
{/* Description / Article Content / Event Content */}
<div className="prose prose-lg prose-orange max-w-none mx-auto text-gray-600">
<div className="prose sm:prose-lg prose-orange max-w-none mx-auto text-gray-600 px-4 sm:px-0">
{isEvent ? (
<div dangerouslySetInnerHTML={{ __html: sanitizeHTML((event as any).description) }} />
) : (
@@ -188,7 +191,7 @@ export default async function AfroLifeDetailPage({ params }: Props) {
{/* Event Link Action */}
{isEvent && (event as any).link && (
<div className="mt-10 text-center">
<div className="mt-10 text-center px-4 sm:px-0">
<Link
href={(event as any).link}
target="_blank"
@@ -199,12 +202,12 @@ export default async function AfroLifeDetailPage({ params }: Props) {
</div>
)}
{/* Footer Actions */}
<div className="mt-12 pt-8 border-t border-gray-100 flex justify-center">
<button className="flex items-center px-6 py-3 rounded-full bg-brand-50 text-brand-700 font-medium hover:bg-brand-100 transition-colors">
<Share2 className="w-5 h-5 mr-2" />
{/* Footer Actions / Partage */}
<div className="mt-10 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100 px-4 sm:px-0 pb-8 sm:pb-0">
<p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4 text-center">
Partager {isEvent ? "cet événement" : "cette interview"}
</button>
</p>
<BlogShareButtons title={item!.title} layout="horizontal" />
</div>
</div>
</div>