akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

layout: fix insets for double borders and add book spine decorator (#1688)

Browse Source
This commit is contained in:
Huang Xin
2025-07-27 20:36:55 +08:00
committed by GitHub
parent 9cebadba57
commit 6eeb8e7580
5 changed files with 94 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/library/components/BookItem.tsx
+8 -3
View File
@@ -61,12 +61,17 @@ const BookItem: React.FC<BookItemProps> = ({
>
<div
className={clsx(
'relative flex aspect-[28/41] items-center justify-center',
coverFit === 'crop' && 'overflow-hidden shadow-md',
'relative flex items-end justify-center',
coverFit === 'crop' && 'aspect-[28/41] overflow-hidden shadow-md',
mode === 'list' && 'min-w-20',
)}
>
<BookCover mode={mode} book={book} coverFit={coverFit} />
<BookCover
mode={mode}
book={book}
coverFit={coverFit}
showSpine={book.format !== 'PDF' || !!book.metadata?.publisher}
/>
{bookSelected && (
<div className='absolute inset-0 bg-black opacity-30 transition-opacity duration-300'></div>
)}
apps/readest-app/src/app/reader/components/BooksGrid.tsx
+1 -1
View File
@@ -153,7 +153,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
showFooter={showFooter}
borderColor={viewSettings.borderColor}
horizontalGap={horizontalGapPercent}
contentInsets={contentInsets}
insets={viewInsets}
/>
)}
{showHeader && (
apps/readest-app/src/app/reader/components/DoubleBorder.tsx
+16 -16
View File
@@ -5,7 +5,7 @@ interface DoubleBorderProps {
horizontalGap: number;
showHeader: boolean;
showFooter: boolean;
contentInsets: Insets;
insets: Insets;
}
const paddingPx = 10;
@@ -14,7 +14,7 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
borderColor,
showHeader,
showFooter,
contentInsets,
insets,
}) => {
return (
<div>
@@ -23,10 +23,10 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
className={'borderframe pointer-events-none absolute'}
style={{
border: `4px solid ${borderColor}`,
height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px + ${paddingPx * 2}px)`,
top: `calc(${contentInsets.top}px - ${paddingPx}px)`,
left: `calc(${contentInsets.left}px - ${paddingPx}px)`,
right: `calc(${contentInsets.right}px - ${paddingPx}px)`,
height: `calc(100% - ${insets.top + insets.bottom}px + ${paddingPx * 2}px)`,
top: `calc(${insets.top}px - ${paddingPx}px)`,
left: `calc(${insets.left}px - ${paddingPx}px)`,
right: `calc(${insets.right}px - ${paddingPx}px)`,
}}
></div>
{/* inner frame */}
@@ -34,10 +34,10 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
className={'borderframe pointer-events-none absolute'}
style={{
border: `1px solid ${borderColor}`,
height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`,
top: `${contentInsets.top}px`,
left: `calc(${contentInsets.left + (showFooter ? 32 : 0)}px`,
right: `calc(${contentInsets.right + (showHeader ? 32 : 0)}px`,
height: `calc(100% - ${insets.top + insets.bottom}px)`,
top: `${insets.top}px`,
left: `calc(${insets.left + (showFooter ? 32 : 0)}px`,
right: `calc(${insets.right + (showHeader ? 32 : 0)}px`,
}}
/>
{/* footer */}
@@ -49,9 +49,9 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
borderBottom: `1px solid ${borderColor}`,
borderLeft: `1px solid ${borderColor}`,
width: '32px',
height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`,
top: `${contentInsets.top}px`,
left: `calc(${contentInsets.left}px)`,
height: `calc(100% - ${insets.top + insets.bottom}px)`,
top: `${insets.top}px`,
left: `calc(${insets.left}px)`,
}}
/>
)}
@@ -64,9 +64,9 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
borderBottom: `1px solid ${borderColor}`,
borderRight: `1px solid ${borderColor}`,
width: '32px',
height: `calc(100% - ${contentInsets.top + contentInsets.bottom}px)`,
top: `${contentInsets.top}px`,
left: `calc(100% - ${contentInsets.right}px - 32px)`,
height: `calc(100% - ${insets.top + insets.bottom}px)`,
top: `${insets.top}px`,
left: `calc(100% - ${insets.right}px - 32px)`,
}}
/>
)}