forked from akai/readest
mobile: some UI tweaks and add system fonts (#233)
This commit is contained in:
Huang Xin
@@ -36,6 +36,7 @@ export const viewport = {
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
viewportFit: 'cover',
|
||||
themeColor: 'white',
|
||||
};
|
||||
|
||||
@@ -44,9 +45,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<html>
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta
|
||||
name='viewport'
|
||||
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
|
||||
/>
|
||||
<meta name='mobile-web-app-capable' content='yes' />
|
||||
<meta name='apple-mobile-web-app-capable' content='yes' />
|
||||
<meta name='apple-mobile-web-app-status-bar-style' content='default' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
|
||||
<meta name='apple-mobile-web-app-title' content='Readest' />
|
||||
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
<link rel='manifest' href='/manifest.json' />
|
||||
|
||||
@@ -117,7 +117,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr className='border-base-200 my-1' />
|
||||
<hr className='border-base-300 my-1' />
|
||||
|
||||
<MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} />
|
||||
|
||||
@@ -128,7 +128,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
|
||||
onClick={toggleScrolledMode}
|
||||
/>
|
||||
|
||||
<hr className='border-base-200 my-1' />
|
||||
<hr className='border-base-300 my-1' />
|
||||
|
||||
<MenuItem
|
||||
label={
|
||||
|
||||
@@ -36,7 +36,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
|
||||
</button>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-0 z-[1] mt-4 w-44 shadow'
|
||||
className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
|
||||
>
|
||||
{options.map((option) => (
|
||||
<li key={option} onClick={() => onSelect(option)}>
|
||||
@@ -51,7 +51,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
|
||||
{moreOptions && moreOptions.length > 0 && (
|
||||
<li className='dropdown dropdown-left dropdown-top'>
|
||||
<div className='flex items-center px-0'>
|
||||
<span style={{ minWidth: `${iconSize16}px` }}>
|
||||
<span style={{ minWidth: `${defaultIconSize}px` }}>
|
||||
<FiChevronLeft size={iconSize16} />
|
||||
</span>
|
||||
<span>{_('System Fonts')}</span>
|
||||
@@ -60,7 +60,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
|
||||
tabIndex={0}
|
||||
className={clsx(
|
||||
'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
|
||||
'!mr-5 mb-[-46px] inline max-h-80 w-[220px] overflow-y-scroll',
|
||||
'!mr-5 mb-[-46px] inline max-h-80 w-[200px] overflow-y-scroll',
|
||||
)}
|
||||
>
|
||||
{moreOptions.map((option) => (
|
||||
|
||||
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
|
||||
import NumberInput from './NumberInput';
|
||||
import FontDropdown from './FontDropDown';
|
||||
import {
|
||||
ANDROID_FONTS,
|
||||
IOS_FONTS,
|
||||
LINUX_FONTS,
|
||||
MACOS_FONTS,
|
||||
MONOSPACE_FONTS,
|
||||
@@ -76,6 +78,12 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
|
||||
case 'linux':
|
||||
moreFonts = LINUX_FONTS;
|
||||
break;
|
||||
case 'ios':
|
||||
moreFonts = IOS_FONTS;
|
||||
break;
|
||||
case 'android':
|
||||
moreFonts = ANDROID_FONTS;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@ const Dialog: React.FC<DialogProps> = ({
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
'text-base-content my-2 flex-grow overflow-y-auto px-[10%]',
|
||||
'text-base-content my-2 flex-grow overflow-y-auto px-6 sm:px-[10%]',
|
||||
contentClassName,
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -35,7 +35,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
{!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
|
||||
<span className={clsx('ml-2 max-w-32 truncate', labelClass)}>{label}</span>
|
||||
<span className={clsx('ml-2 truncate sm:max-w-32', labelClass)}>{label}</span>
|
||||
</div>
|
||||
{shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
|
||||
</button>
|
||||
|
||||
@@ -295,6 +295,51 @@ export const LINUX_FONTS = [
|
||||
'WenQuanYi Zen Hei',
|
||||
];
|
||||
|
||||
export const IOS_FONTS = [
|
||||
'Avenir',
|
||||
'Avenir Next',
|
||||
'Courier',
|
||||
'Courier New',
|
||||
'Georgia',
|
||||
'Helvetica',
|
||||
'Helvetica Neue',
|
||||
'Hiragino Mincho',
|
||||
'Hiragino Sans',
|
||||
'Kaiti',
|
||||
'Palatino',
|
||||
'PingFang SC',
|
||||
'PingFang TC',
|
||||
'San Francisco',
|
||||
'SF Pro Display',
|
||||
'SF Pro Rounded',
|
||||
'SF Pro Text',
|
||||
'Songti',
|
||||
'Times New Roman',
|
||||
'Verdana',
|
||||
];
|
||||
|
||||
export const ANDROID_FONTS = [
|
||||
'Arial',
|
||||
'Droid Sans',
|
||||
'Droid Serif',
|
||||
'FZLanTingHei',
|
||||
'Georgia',
|
||||
'Noto Sans',
|
||||
'Noto Sans CJK',
|
||||
'Noto Sans JP',
|
||||
'Noto Serif',
|
||||
'Noto Serif CJK',
|
||||
'Noto Serif JP',
|
||||
'PingFang SC',
|
||||
'Roboto',
|
||||
'Source Han Sans',
|
||||
'Source Han Serif',
|
||||
'STHeiti',
|
||||
'STSong',
|
||||
'Tahoma',
|
||||
'Verdana',
|
||||
];
|
||||
|
||||
export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
|
||||
|
||||
export const BOOK_IDS_SEPARATOR = '+';
|
||||
|
||||
Reference in New Issue
Block a user