aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-21 15:54:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: show reading progress indicator on mobile at full width

Browse Source
This commit is contained in:
Gigi
2025-10-13 22:48:39 +02:00
parent 47de9a75b7
commit 61ce338b8c
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ReadingProgressIndicator.tsx
View File

@@ -19,7 +19,7 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
}) => {
const clampedProgress = Math.min(100, Math.max(0, progress))
// Calculate left and right offsets based on sidebar states
// Calculate left and right offsets based on sidebar states (desktop only)
const leftOffset = isSidebarCollapsed
? 'var(--sidebar-collapsed-width)'
: 'var(--sidebar-width)'
@@ -29,11 +29,11 @@ export const ReadingProgressIndicator: React.FC<ReadingProgressIndicatorProps> =
return (
<div
className={`fixed bottom-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 md:block hidden ${className}`}
className={`reading-progress-bar fixed bottom-0 left-0 right-0 z-[1102] bg-[rgba(26,26,26,0.85)] backdrop-blur-sm px-3 py-1 flex items-center gap-2 transition-all duration-300 ${className}`}
style={{
left: leftOffset,
right: rightOffset
}}
'--left-offset': leftOffset,
'--right-offset': rightOffset
} as React.CSSProperties}
>
<div className="flex-1 h-0.5 bg-white/10 rounded-full overflow-hidden relative">
<div

8
src/styles/utils/animations.css
View File

@@ -21,4 +21,12 @@
75% { box-shadow: 0 0 20px rgba(var(--highlight-rgb, 255, 255, 0), 0.6); transform: scale(1.02); }
}
/* Reading progress bar positioning */
@media (min-width: 769px) {
.reading-progress-bar {
left: var(--left-offset) !important;
right: var(--right-offset) !important;
}
}