fix(layout): fixed layout of book reading progress and reader footer bar (#3117)

This commit is contained in:
Huang Xin
2026-01-30 06:54:20 +01:00
committed by GitHub
parent 4ce1ebe477
commit fb387c2384
3 changed files with 5 additions and 6 deletions
@@ -41,12 +41,12 @@ const ReadingProgress: React.FC<ReadingProgressProps> = memo(
</div> </div>
); );
} else { } else {
return null; return <div className='flex justify-start'></div>;
} }
} }
if (progressPercentage === null || Number.isNaN(progressPercentage)) { if (progressPercentage === null || Number.isNaN(progressPercentage)) {
return null; return <div className='flex justify-start'></div>;
} }
return ( return (
@@ -67,7 +67,7 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
return ( return (
<div <div
className='absolute hidden h-8 w-full items-center gap-x-4 px-4 sm:flex' className='hidden h-8 w-full items-center gap-x-4 px-4 sm:flex'
style={{ bottom: isMobile ? `${gridInsets.bottom * 0.33}px` : '0px' }} style={{ bottom: isMobile ? `${gridInsets.bottom * 0.33}px` : '0px' }}
> >
<Button <Button
@@ -203,15 +203,14 @@ const FooterBar: React.FC<FooterBarProps> = ({
(bookData?.isFixedLayout && viewSettings?.zoomLevel && viewSettings.zoomLevel > 100); (bookData?.isFixedLayout && viewSettings?.zoomLevel && viewSettings.zoomLevel > 100);
const containerClasses = clsx( const containerClasses = clsx(
'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col', 'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col sm:h-[52px]',
'sm:h-[52px] sm:justify-center',
'sm:bg-base-100 border-base-300/50 border-t sm:border-none', 'sm:bg-base-100 border-base-300/50 border-t sm:border-none',
'transition-[opacity,transform] duration-300', 'transition-[opacity,transform] duration-300',
window.innerWidth < 640 ? 'fixed' : 'absolute', window.innerWidth < 640 ? 'fixed' : 'absolute',
appService?.hasRoundedWindow && 'rounded-window-bottom-right', appService?.hasRoundedWindow && 'rounded-window-bottom-right',
!isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left', !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
isHoveredAnim && 'hover-bar-anim', isHoveredAnim && 'hover-bar-anim',
needHorizontalScroll && 'sm:!bottom-3 sm:!h-10 sm:justify-end', needHorizontalScroll ? 'sm:!bottom-3 sm:!h-10 sm:justify-end' : 'sm:justify-center',
isVisible isVisible
? 'pointer-events-auto translate-y-0 opacity-100' ? 'pointer-events-auto translate-y-0 opacity-100'
: 'pointer-events-none translate-y-full opacity-0 sm:translate-y-0', : 'pointer-events-none translate-y-full opacity-0 sm:translate-y-0',