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

fix: position reading progress bar as dividing line in cards

Browse Source 
- Move progress indicator between summary and meta sections
- Replace the border-top dividing line with progress bar
- Show 3px progress bar when reading position exists
- Show 1px gray divider when no progress (maintains original look)
- Remove absolute positioning from bottom of card
- Remove border-top from meta section to avoid double lines
This commit is contained in:
Gigi
2025-10-15 22:26:48 +02:00
parent 8f89165711
commit 5e1146b015
1 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/BlogPostCard.tsx
View File

@@ -32,7 +32,7 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
<Link
to={href}
className={`blog-post-card ${level ? `level-${level}` : ''}`}
style={{ textDecoration: 'none', color: 'inherit', position: 'relative' }}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<div className="blog-post-card-image">
{post.image ? (
@@ -52,30 +52,17 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
{post.summary && (
<p className="blog-post-card-summary">{post.summary}</p>
)}
<div className="blog-post-card-meta">
<span className="blog-post-card-author">
<FontAwesomeIcon icon={faUser} />
{displayName}
</span>
<span className="blog-post-card-date">
<FontAwesomeIcon icon={faCalendar} />
{formattedDate}
</span>
</div>
</div>
{/* Reading progress indicator */}
{readingProgress !== undefined && readingProgress > 0 && (
{/* Reading progress indicator - replaces the dividing line */}
{readingProgress !== undefined && readingProgress > 0 ? (
<div
className="blog-post-reading-progress"
style={{
position: 'absolute',
bottom: 0,
left: 0,
height: '4px',
height: '3px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden'
overflow: 'hidden',
marginTop: '1rem'
}}
>
<div
@@ -87,7 +74,25 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post, href, level, readingP
}}
/>
</div>
) : (
<div style={{
height: '1px',
background: 'var(--color-border)',
marginTop: '1rem'
}} />
)}
<div className="blog-post-card-meta" style={{ borderTop: 'none', paddingTop: '0.75rem' }}>
<span className="blog-post-card-author">
<FontAwesomeIcon icon={faUser} />
{displayName}
</span>
<span className="blog-post-card-date">
<FontAwesomeIcon icon={faCalendar} />
{formattedDate}
</span>
</div>
</div>
</Link>
)
}