akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Layout tweaks on mobile browsers (#219)

Browse Source
This commit is contained in:
Huang Xin
2025-01-22 19:37:49 +01:00
committed by GitHub
parent 41bcf05127
commit 4d5297fdb5
9 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/library/components/LibraryHeader.tsx
+3 -1
View File
@@ -7,6 +7,7 @@ import { MdOutlineMenu } from 'react-icons/md';
import { useEnv } from '@/context/EnvContext';
import { useTranslation } from '@/hooks/useTranslation';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
import useTrafficLight from '@/hooks/useTrafficLight';
import WindowButtons from '@/components/WindowButtons';
import Dropdown from '@/components/Dropdown';
@@ -27,6 +28,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
const { appService } = useEnv();
const { isTrafficLightVisible } = useTrafficLight();
const headerRef = useRef<HTMLDivElement>(null);
const iconSize16 = useResponsiveSize(16);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -101,7 +103,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
<Dropdown
className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
toggleButton={<MdOutlineMenu />}
toggleButton={<MdOutlineMenu size={iconSize16} />}
>
<SettingsMenu />
</Dropdown>
apps/readest-app/src/app/reader/components/FooterBar.tsx
+7 -3
View File
@@ -60,7 +60,7 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
return (
<div
className={clsx(
'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
'shadow-xs bg-base-100 transition-opacity duration-300',
isTauriAppPlatform() && 'rounded-window-bottom-right',
!isSideBarVisible && isTauriAppPlatform() && 'rounded-window-bottom-left',
@@ -70,7 +70,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
onMouseEnter={() => setHoveredBookKey(bookKey)}
onMouseLeave={() => setHoveredBookKey('')}
>
<Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
<div className='hidden sm:flex'>
<Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
</div>
<Button
icon={<RiArrowGoBackLine />}
onClick={handleGoBack}
@@ -95,7 +97,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
onChange={(e) => handleProgressChange(e)}
/>
<Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
<Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
<div className='hidden sm:flex'>
<Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
</div>
</div>
);
};
apps/readest-app/src/app/reader/components/HeaderBar.tsx
+5 -3
View File
@@ -6,6 +6,7 @@ import { useEnv } from '@/context/EnvContext';
import { useReaderStore } from '@/store/readerStore';
import { useSidebarStore } from '@/store/sidebarStore';
import { isTauriAppPlatform } from '@/services/environment';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
import useTrafficLight from '@/hooks/useTrafficLight';
import WindowButtons from '@/components/WindowButtons';
import Dropdown from '@/components/Dropdown';
@@ -38,6 +39,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
const { isSideBarVisible } = useSidebarStore();
const iconSize16 = useResponsiveSize(16);
const handleToggleDropdown = (isOpen: boolean) => {
setIsDropdownOpen(isOpen);
@@ -60,7 +62,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
onMouseEnter={() => setHoveredBookKey(bookKey)}
onMouseLeave={() => setHoveredBookKey('')}
>
<div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-2 sm:space-x-4'>
<div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
<SidebarToggler bookKey={bookKey} />
<BookmarkToggler bookKey={bookKey} />
</div>
@@ -69,13 +71,13 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
<h2 className='line-clamp-1 max-w-[50%] text-center text-xs font-semibold'>{bookTitle}</h2>
</div>
<div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-2 sm:space-x-4'>
<div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
<SettingsToggler />
<NotebookToggler bookKey={bookKey} />
<Dropdown
className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
toggleButton={<PiDotsThreeVerticalBold />}
toggleButton={<PiDotsThreeVerticalBold size={iconSize16} />}
onToggle={handleToggleDropdown}
>
<ViewMenu bookKey={bookKey} onSetSettingsDialogOpen={onSetSettingsDialogOpen} />
apps/readest-app/src/app/reader/components/NotebookToggler.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import { LuNotebookPen } from 'react-icons/lu';
import { useSidebarStore } from '@/store/sidebarStore';
import { useNotebookStore } from '@/store/notebookStore';
import { useTranslation } from '@/hooks/useTranslation';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
import Button from '@/components/Button';
interface NotebookTogglerProps {
@@ -14,6 +15,8 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
const _ = useTranslation();
const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
const { isNotebookVisible, toggleNotebook } = useNotebookStore();
const iconSize16 = useResponsiveSize(16);
const handleToggleSidebar = () => {
if (sideBarBookKey === bookKey) {
toggleNotebook();
@@ -26,9 +29,9 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
<Button
icon={
sideBarBookKey == bookKey && isNotebookVisible ? (
<LuNotebookPen className='text-base-content' />
<LuNotebookPen size={iconSize16} className='text-base-content' />
) : (
<LuNotebookPen className='text-base-content' />
<LuNotebookPen size={iconSize16} className='text-base-content' />
)
}
onClick={handleToggleSidebar}
apps/readest-app/src/app/reader/components/notebook/Header.tsx
+3 -1
View File
@@ -5,6 +5,7 @@ import { FiSearch } from 'react-icons/fi';
import { LuNotebookPen } from 'react-icons/lu';
import { MdArrowBackIosNew, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
import { useTranslation } from '@/hooks/useTranslation';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
const NotebookHeader: React.FC<{
isPinned: boolean;
@@ -12,6 +13,7 @@ const NotebookHeader: React.FC<{
handleTogglePin: () => void;
}> = ({ isPinned, handleClose, handleTogglePin }) => {
const _ = useTranslation();
const iconSize14 = useResponsiveSize(14);
return (
<div className='notebook-header relative flex h-11 items-center px-3'>
<div className='absolute inset-0 flex items-center justify-center space-x-2'>
@@ -26,7 +28,7 @@ const NotebookHeader: React.FC<{
isPinned ? 'bg-base-300' : 'bg-base-300/65',
)}
>
{isPinned ? <MdPushPin /> : <MdOutlinePushPin />}
{isPinned ? <MdPushPin size={iconSize14} /> : <MdOutlinePushPin size={iconSize14} />}
</button>
<button
onClick={handleClose}
apps/readest-app/src/app/reader/components/sidebar/Header.tsx
+2 -1
View File
@@ -21,6 +21,7 @@ const SidebarHeader: React.FC<{
const { isTrafficLightVisible } = useTrafficLight();
const iconSize14 = useResponsiveSize(14);
const iconSize18 = useResponsiveSize(18);
const iconSize22 = useResponsiveSize(22);
return (
<div
className={clsx(
@@ -33,7 +34,7 @@ const SidebarHeader: React.FC<{
onClick={onClose}
className={'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent sm:hidden'}
>
<MdArrowBackIosNew />
<MdArrowBackIosNew size={iconSize22} />
</button>
<button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
<GiBookshelf className='fill-base-content' />
apps/readest-app/src/components/BookDetailModal.tsx
+2 -2
View File
@@ -110,12 +110,12 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
{window.innerWidth >= 400 && (
<div className='flex flex-wrap items-center gap-x-4 gap-y-2 py-2'>
<button
className='btn rounded bg-red-600 text-white hover:bg-red-700'
className='btn rounded-xl bg-red-600 px-4 text-white hover:bg-red-700'
onClick={handleDelete}
>
{_('Delete')}
</button>
<button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded px-4 text-white'>
<button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded-xl px-4 text-white'>
{_('More Info')}
</button>
</div>
apps/readest-app/src/components/Dialog.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import clsx from 'clsx';
import React, { ReactNode, useEffect } from 'react';
import { MdArrowBackIosNew } from 'react-icons/md';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
interface DialogProps {
id?: string;
@@ -25,6 +26,7 @@ const Dialog: React.FC<DialogProps> = ({
contentClassName,
onClose,
}) => {
const iconSize22 = useResponsiveSize(22);
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
onClose();
@@ -67,7 +69,7 @@ const Dialog: React.FC<DialogProps> = ({
'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
}
>
<MdArrowBackIosNew />
<MdArrowBackIosNew size={iconSize22} />
</button>
<div className='z-15 pointer-events-none absolute inset-0 flex h-11 items-center justify-center'>
<span className='line-clamp-1 text-center font-bold'>{title ?? ''}</span>
apps/readest-app/src/hooks/useResponsiveSize.ts
+2 -2
View File
@@ -4,8 +4,8 @@ import { useMediaQuery } from 'react-responsive';
export const useResponsiveSize = (baseSize: number) => {
const isPhone = useMediaQuery({ maxWidth: 480 });
const isTablet = useMediaQuery({ minWidth: 481, maxWidth: 1024 });
if (isPhone) return baseSize * 1.5;
if (isTablet) return baseSize * 1.25;
if (isPhone) return baseSize * 1.25;
if (isTablet) return baseSize * 1.15;
return baseSize;
};