aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-17 06:34:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: always show reading progress bar as 1px separator

Browse Source 
- 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:
Gigi
2025-10-25 01:33:14 +02:00
parent 180c26c47a
commit f6b6747f09
2 changed files with 8 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/BookmarkViews/CardView.tsx
View File

@@ -200,14 +200,14 @@ export const CardView: React.FC<CardViewProps> = ({
</button> </button>
)} )}
{/* Reading progress indicator as separator */} {/* Reading progress indicator as separator - always shown */}
{isArticle && readingProgress !== undefined && readingProgress > 0 && ( {isArticle && (
<div className="reading-progress-separator"> <div className="reading-progress-separator">
<div <div
className="progress-fill" className="progress-fill"
style={{ style={{
width: `${Math.round(readingProgress * 100)}%`, width: readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%',
background: progressColor background: readingProgress ? progressColor : 'transparent'
}} }}
/> />
</div> </div>

18
src/styles/components/cards.css
View File

@@ -178,12 +178,12 @@
padding-top: 0.75rem; padding-top: 0.75rem;
} }
/* Reading progress as separator */ /* Reading progress as separator - always shown */
.card-content .reading-progress-separator { .card-content .reading-progress-separator {
height: 4px; height: 1px;
width: 100%; width: 100%;
background: var(--color-border); background: var(--color-border);
border-radius: 2px; border-radius: 0.5px;
overflow: hidden; overflow: hidden;
margin: 0.75rem 0; margin: 0.75rem 0;
position: relative; position: relative;
@@ -191,20 +191,10 @@
.card-content .reading-progress-separator .progress-fill { .card-content .reading-progress-separator .progress-fill {
height: 100%; height: 100%;
border-radius: 2px; border-radius: 0.5px;
transition: width 0.3s ease, background 0.3s ease; 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 { .card-content .bookmark-urls {
margin: 0.5rem 0; margin: 0.5rem 0;
} }