mirror of
https://github.com/R0m1k3/FlowReader.git
synced 2026-10-11 17:28:05 +02:00
fix: reader view missing image and content fallback
This commit is contained in:
Michael committed
1 parent
6fd38fbffd
commit
f1e62d0bde
2 files changed
+92
-32
No files matched your search
@@ -7,83 +7,113 @@ interface ReaderViewProps {
|
||||
}
|
||||
|
||||
export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewProps) {
|
||||
// Determine content to show: full content > summary > default message
|
||||
const displayContent = article.content || article.summary || '<p class="italic text-paper-muted">Aucun contenu disponible pour cet article.</p>';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-sm flex justify-center overflow-y-auto animate-in fade-in duration-500"
|
||||
className="fixed inset-0 z-50 bg-carbon/95 backdrop-blur-md flex justify-center overflow-y-auto animate-in fade-in duration-500"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-reading bg-carbon-light min-h-screen my-0 md:my-12 shadow-2xl relative animate-in slide-in-from-bottom duration-700"
|
||||
className="w-full max-w-4xl bg-carbon-light min-h-screen my-0 md:my-12 shadow-[0_0_100px_rgba(0,0,0,0.8)] relative animate-in slide-in-from-bottom duration-700 rounded-t-3xl md:rounded-3xl border border-white/5"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Progress bar simulation */}
|
||||
<div className="sticky top-0 left-0 right-0 h-1 bg-gold/10 z-20">
|
||||
<div className="h-full bg-gold w-1/3 gold-glow shadow-gold" />
|
||||
<div className="sticky top-0 left-0 right-0 h-1 bg-gold/5 z-30">
|
||||
<div className="h-full bg-gold w-1/4 gold-glow shadow-gold" />
|
||||
</div>
|
||||
|
||||
{/* Close button for desktop */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-8 -right-16 hidden md:flex w-10 h-10 items-center justify-center rounded-full border border-gold/30 text-gold hover:bg-gold hover:text-carbon transition-all duration-300"
|
||||
className="absolute top-8 -right-16 hidden md:flex w-12 h-12 items-center justify-center rounded-full border border-gold/20 text-gold hover:bg-gold hover:text-carbon hover:scale-110 transition-all duration-300 z-50"
|
||||
title="Fermer"
|
||||
>
|
||||
✕
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="p-8 md:p-16">
|
||||
<header className="mb-12">
|
||||
<div className="flex items-center space-x-3 text-gold text-xs uppercase tracking-[0.3em] font-bold mb-6">
|
||||
<span>{article.feed_title}</span>
|
||||
{/* Hero Image Section */}
|
||||
{article.image_url && (
|
||||
<div className="w-full h-[40vh] md:h-[50vh] relative overflow-hidden rounded-t-3xl md:rounded-t-[calc(1.5rem-1px)]">
|
||||
<img
|
||||
src={article.image_url}
|
||||
alt={article.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-carbon-light via-carbon-light/20 to-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`p-8 md:p-20 ${!article.image_url ? 'pt-16' : 'pt-8'}`}>
|
||||
<header className="mb-16">
|
||||
<div className="flex items-center space-x-3 text-gold text-[10px] uppercase tracking-[0.4em] font-black mb-8">
|
||||
<span className="bg-gold/10 px-2 py-1 rounded">{article.feed_title}</span>
|
||||
<span className="opacity-30">•</span>
|
||||
<span>{article.published_at ? new Date(article.published_at).toLocaleDateString() : 'Aujourd\'hui'}</span>
|
||||
<span>{article.published_at ? new Date(article.published_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Aujourd\'hui'}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.1] mb-8 italic">
|
||||
<h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] mb-10 italic-gold tracking-tight">
|
||||
{article.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center justify-between py-6 border-y border-carbon-dark/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center justify-between py-8 border-y border-white/5">
|
||||
<div className="flex items-center space-x-6">
|
||||
<button
|
||||
onClick={() => onToggleFavorite(article.id)}
|
||||
className={`flex items-center space-x-2 px-4 py-2 rounded-full border transition-all ${article.is_favorite
|
||||
? 'bg-gold text-carbon border-gold'
|
||||
: 'border-gold/30 text-gold hover:bg-gold/10'
|
||||
className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
|
||||
? 'bg-gold text-carbon border-gold gold-glow'
|
||||
: 'border-gold/20 text-gold hover:bg-gold/5'
|
||||
}`}
|
||||
>
|
||||
<span>{article.is_favorite ? '★' : '☆'}</span>
|
||||
<span className="text-xs uppercase tracking-widest font-bold">
|
||||
{article.is_favorite ? 'Favori' : 'Ajouter'}
|
||||
<svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.382-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
||||
</svg>
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] font-black">
|
||||
{article.is_favorite ? 'Dans vos favoris' : 'Ajouter aux favoris'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button className="p-2 text-paper-muted hover:text-gold transition-colors">
|
||||
📤
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={article.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs uppercase tracking-widest font-bold text-gold hover:underline"
|
||||
className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-gold transition-colors"
|
||||
>
|
||||
Lire sur le site original
|
||||
<span>Source d'origine</span>
|
||||
<svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="prose prose-invert prose-gold max-w-none text-paper-white/90 text-xl font-reading leading-magazine space-y-8"
|
||||
dangerouslySetInnerHTML={{ __html: article.content || '<p>Aucun contenu disponible pour cet article.</p>' }}
|
||||
className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20"
|
||||
dangerouslySetInnerHTML={{ __html: displayContent }}
|
||||
/>
|
||||
|
||||
<footer className="mt-20 pt-12 border-t border-carbon-dark/50 text-center pb-20">
|
||||
<div className="text-gold text-3xl font-serif mb-4 italic italic-gold">F</div>
|
||||
<p className="text-paper-muted text-sm font-sans tracking-wide">
|
||||
FlowReader Magazine — Immersion Totale.
|
||||
<footer className="mt-32 pt-16 border-t border-white/5 text-center pb-24">
|
||||
<div className="text-gold text-4xl font-serif mb-6 italic select-none">F.</div>
|
||||
<p className="text-paper-muted/40 text-[10px] uppercase tracking-[0.4em] font-black">
|
||||
FlowReader Lux Édition • 2026
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile close button overlay */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="fixed bottom-8 right-8 md:hidden w-14 h-14 bg-gold text-carbon rounded-full shadow-2xl flex items-center justify-center scale-90 active:scale-75 transition-transform gold-glow z-50"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -93,4 +93,34 @@
|
||||
.input-field {
|
||||
@apply bg-carbon-dark border border-white/10 text-paper-white px-4 py-3 rounded-lg focus:border-gold/50 focus:ring-1 focus:ring-gold/50 outline-none transition-all placeholder:text-paper-muted/30;
|
||||
}
|
||||
|
||||
.magazine-content {
|
||||
@apply font-reading leading-relaxed text-paper-white/80;
|
||||
}
|
||||
|
||||
.magazine-content p {
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
.magazine-content a {
|
||||
@apply text-gold border-b border-gold/20 hover:border-gold transition-all no-underline;
|
||||
}
|
||||
|
||||
.magazine-content h2,
|
||||
.magazine-content h3 {
|
||||
@apply text-white font-serif italic mb-6 mt-12;
|
||||
}
|
||||
|
||||
.magazine-content img {
|
||||
@apply rounded-2xl my-12 border border-white/5 shadow-2xl mx-auto;
|
||||
}
|
||||
|
||||
.magazine-content ul,
|
||||
.magazine-content ol {
|
||||
@apply mb-8 ml-6 space-y-4;
|
||||
}
|
||||
|
||||
.magazine-content li {
|
||||
@apply pl-2;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user