denshooter/oma-memorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dockerfile to add HEIF support dependencies and adjust TimelineSection styles for better layout and image handling

Browse Source
This commit is contained in:
denshooter
2026-02-22 00:27:12 +01:00
parent eb28501b2e
commit 49d8798e11
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TimelineSection.tsx
+6 -6
View File
@@ -58,7 +58,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-warm-gold/40 via-warm-gold/25 to-warm-gold/40 sm:hidden" />
{/* Entries */}
<div className="space-y-12 sm:space-y-16 py-4 relative" style={{ zIndex: 10 }}>
<div className="space-y-8 sm:space-y-12 py-4 relative" style={{ zIndex: 10 }}>
{entries.map((entry, index) => {
const isLeft = index % 2 === 0
const isBirth = index === birthIndex
@@ -75,8 +75,8 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
transition={{ duration: 0.6, delay: 0.1 }}
className={`relative flex items-start ${
isLeft
? 'pl-10 sm:pl-0 sm:pr-[52%]'
: 'pl-10 sm:pl-[52%]'
? 'pl-10 sm:pl-0 sm:pr-[50%]'
: 'pl-10 sm:pl-[50%]'
}`}
>
{/* Content Card */}
@@ -97,7 +97,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
key={i}
src={`/api/files/${filename.trim()}?w=600`}
alt=""
className="w-full max-h-40 object-cover rounded-lg"
className="w-full max-h-60 object-cover rounded-lg"
loading="lazy"
/>
))}
@@ -185,7 +185,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
animate={{ scale: 1, y: 0 }}
exit={{ scale: 0.9, y: 20 }}
onClick={(e) => e.stopPropagation()}
className="bg-cream rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto"
className="bg-cream rounded-2xl shadow-2xl max-w-4xl w-full max-h-[85vh] overflow-y-auto"
>
{/* Header */}
<div className="sticky top-0 bg-cream/95 backdrop-blur-sm border-b border-warm-border p-6 flex items-start justify-between">
@@ -220,7 +220,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
{selectedEntry.media_filenames.split(',').map((filename, i) => (
<img
key={i}
src={`/api/files/${filename.trim()}?w=1200`}
src={`/api/files/${filename.trim()}?w=1600`}
alt=""
className="w-full object-contain rounded-xl"
/>