mirror of
https://github.com/dergigi/boris.git
synced 2025-12-17 06:34:24 +01:00
feat: always show reading progress bar as 1px separator
- Show reading progress bar for all article cards, even without progress - Change progress bar thickness from 4px to 1px for subtle separation - Remove fallback separator since progress bar is always shown - Empty progress bars show as transparent fill with border background - Maintain consistent visual separation across all article cards
This commit is contained in:
@@ -200,14 +200,14 @@ export const CardView: React.FC<CardViewProps> = ({
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Reading progress indicator as separator */}
|
||||
{isArticle && readingProgress !== undefined && readingProgress > 0 && (
|
||||
{/* Reading progress indicator as separator - always shown */}
|
||||
{isArticle && (
|
||||
<div className="reading-progress-separator">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{
|
||||
width: `${Math.round(readingProgress * 100)}%`,
|
||||
background: progressColor
|
||||
width: readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%',
|
||||
background: readingProgress ? progressColor : 'transparent'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,12 +178,12 @@
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
/* Reading progress as separator */
|
||||
/* Reading progress as separator - always shown */
|
||||
.card-content .reading-progress-separator {
|
||||
height: 4px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
border-radius: 0.5px;
|
||||
overflow: hidden;
|
||||
margin: 0.75rem 0;
|
||||
position: relative;
|
||||
@@ -191,20 +191,10 @@
|
||||
|
||||
.card-content .reading-progress-separator .progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.5px;
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
|
||||
/* Subtle separator for cards without reading progress */
|
||||
.card-content .bookmark-footer::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: var(--color-border-subtle);
|
||||
margin-bottom: 0.75rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.card-content .bookmark-urls {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user