aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-29 20:44:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: move long article summaries below image on mobile to prevent overlay issues

Browse Source
This commit is contained in:
Gigi
2025-10-10 21:43:55 +01:00
parent 9115c38cde
commit 8bd5d7aadf
2 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/ReaderHeader.tsx
View File

@@ -28,36 +28,45 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
}) => {
const cachedImage = useImageCache(image, settings)
const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null
const isLongSummary = summary && summary.length > 150
if (cachedImage) {
return (
<div className="reader-hero-image">
<img src={cachedImage} alt={title || 'Article image'} />
{formattedDate && (
<div className="publish-date-topright">
{formattedDate}
</div>
)}
{title && (
<div className="reader-header-overlay">
<h2 className="reader-title">{title}</h2>
{summary && <p className="reader-summary">{summary}</p>}
<div className="reader-meta">
{readingTimeText && (
<div className="reading-time">
<FontAwesomeIcon icon={faClock} />
<span>{readingTimeText}</span>
</div>
)}
{hasHighlights && (
<div className="highlight-indicator">
<FontAwesomeIcon icon={faHighlighter} />
<span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
</div>
)}
<>
<div className="reader-hero-image">
<img src={cachedImage} alt={title || 'Article image'} />
{formattedDate && (
<div className="publish-date-topright">
{formattedDate}
</div>
)}
{title && (
<div className="reader-header-overlay">
<h2 className="reader-title">{title}</h2>
{summary && <p className={`reader-summary ${isLongSummary ? 'hide-on-mobile' : ''}`}>{summary}</p>}
<div className="reader-meta">
{readingTimeText && (
<div className="reading-time">
<FontAwesomeIcon icon={faClock} />
<span>{readingTimeText}</span>
</div>
)}
{hasHighlights && (
<div className="highlight-indicator">
<FontAwesomeIcon icon={faHighlighter} />
<span>{highlightCount} highlight{highlightCount !== 1 ? 's' : ''}</span>
</div>
)}
</div>
</div>
)}
</div>
{isLongSummary && (
<div className="reader-summary-below-image">
<p className="reader-summary">{summary}</p>
</div>
)}
</div>
</>
)
}

23
src/index.css
View File

@@ -1437,6 +1437,29 @@ body.mobile-sidebar-open {
border: 1px solid rgba(100, 108, 255, 0.4);
}
.reader-summary-below-image {
display: none;
}
@media (max-width: 768px) {
.reader-header-overlay .reader-summary.hide-on-mobile {
display: none;
}
.reader-summary-below-image {
display: block;
padding: 0 0 1.5rem 0;
margin-top: -1rem;
}
.reader-summary-below-image .reader-summary {
color: #aaa;
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
}
/* Private Bookmark Styles */
.private-bookmark {
background: #2a2a2a;