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

feat: ensure reading progress bar shows for all bookmark types across all view modes

Browse Source 
- Update CompactView to always show progress bar for all bookmark types
- Update LargeView to always show progress bar for all bookmark types
- Remove conditional logic that only showed progress for articles
- Ensure consistent visual separator across CardView, CompactView, and LargeView
- Maintain empty state display (1px border line) when no progress available
This commit is contained in:
Gigi
2025-10-25 01:48:42 +02:00
parent 1df00fbfda
commit 13462efaed
2 changed files with 35 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/BookmarkViews/CompactView.tsx
View File

@@ -86,28 +86,26 @@ export const CompactView: React.FC<CompactViewProps> = ({
{/* CTA removed */}
</div>
{/* Reading progress indicator for all bookmark types with reading data */}
{readingProgress !== undefined && readingProgress > 0 && (
<div
{/* Reading progress indicator for all bookmark types - always shown */}
<div
style={{
height: '1px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
margin: '0',
marginLeft: '1.5rem'
}}
>
<div
style={{
height: '1px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
margin: '0',
marginLeft: '1.5rem'
height: '100%',
width: readingProgress ? `${Math.round(readingProgress * 100)}%` : '0%',
background: readingProgress ? progressColor : 'var(--color-border)',
transition: 'width 0.3s ease, background 0.3s ease'
}}
>
<div
style={{
height: '100%',
width: `${Math.round(readingProgress * 100)}%`,
background: progressColor,
transition: 'width 0.3s ease, background 0.3s ease'
}}
/>
</div>
)}
/>
</div>
</div>
)
}

36
src/components/BookmarkViews/LargeView.tsx
View File

@@ -122,27 +122,25 @@ export const LargeView: React.FC<LargeViewProps> = ({
<RichContent content={bookmark.content} className="large-text" />
)}
{/* Reading progress indicator for articles - shown only if there's progress */}
{isArticle && readingProgress !== undefined && readingProgress > 0 && (
<div
{/* Reading progress indicator for all bookmark types - always shown */}
<div
style={{
height: '3px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
marginTop: '0.75rem'
}}
>
<div
style={{
height: '3px',
width: '100%',
background: 'var(--color-border)',
overflow: 'hidden',
marginTop: '0.75rem'
height: '100%',
width: readingProgress ? `${progressPercent}%` : '0%',
background: readingProgress ? progressColor : 'var(--color-border)',
transition: 'width 0.3s ease, background 0.3s ease'
}}
>
<div
style={{
height: '100%',
width: `${progressPercent}%`,
background: progressColor,
transition: 'width 0.3s ease, background 0.3s ease'
}}
/>
</div>
)}
/>
</div>
<div className="large-footer">
<span className="bookmark-type-large">