forked from akai/readest
fix(layout): fixed layout of book reading progress and reader footer bar (#3117)
This commit is contained in:
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user