dimitar/placebo.mk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

img positioning fixed

Browse Source
This commit is contained in:
echo 2026-02-03 20:03:46 +01:00
parent 6467e21019
commit 3bc534489d
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/routes/ArticleDetailComponent.tsx
View File

@ -68,31 +68,29 @@ export function ArticleDetailComponent({ id }: { id: string }) {
</div> </div>
{data.featuredImage && data.imagePosition !== 'none' && ( {data.featuredImage && data.imagePosition !== 'none' && (
<div className={`relative ${ <div className={`relative mb-4 ${
data.imagePosition === 'top' data.imagePosition === 'top'
? 'w-full h-64 md:h-96 mb-8' ? 'w-full mb-8'
: data.imagePosition === 'left' : data.imagePosition === 'left'
? 'float-none md:float-left mr-0 md:mr-6 mb-4 w-full md:w-auto' ? 'float-none md:float-left mr-0 md:mr-6'
: data.imagePosition === 'right' : 'float-none md:float-right ml-0 md:ml-6'
? 'float-none md:float-right ml-0 md:ml-6 mb-4 w-full md:w-auto' }`}>
: '' <img
} ${ src={data.featuredImage}
alt={data.title}
className={`rounded-xl object-cover ${
data.imagePosition === 'top' data.imagePosition === 'top'
? data.imageSize === 'small' ? data.imageSize === 'small'
? 'h-32' ? 'h-32'
: data.imageSize === 'medium' : data.imageSize === 'medium'
? 'h-48' ? 'h-48'
: 'h-64' : 'h-64 md:h-96'
: data.imageSize === 'small' : data.imageSize === 'small'
? 'w-full md:w-48 h-32' ? 'w-full md:w-48 h-32'
: data.imageSize === 'medium' : data.imageSize === 'medium'
? 'w-full md:w-64 h-48' ? 'w-full md:w-64 h-48'
: 'w-full md:w-96 h-64' : 'w-full md:w-96 h-64'
}`}> }`}
<img
src={data.featuredImage}
alt={data.title}
className="w-full h-full object-cover rounded-xl"
onError={(e) => { onError={(e) => {
console.error('Failed to load image:', data.featuredImage, e); console.error('Failed to load image:', data.featuredImage, e);
e.currentTarget.style.display = 'none'; e.currentTarget.style.display = 'none';
@ -112,7 +110,7 @@ export function ArticleDetailComponent({ id }: { id: string }) {
</div> </div>
)} )}
<div className="prose prose-slate max-w-none clear-both md:clear-none"> <div className="prose prose-slate max-w-none">
<div className="text-lg leading-relaxed mb-6"> <div className="text-lg leading-relaxed mb-6">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}