akai/readest
2
1
Fork 1
Code Issues Pull Requests 1 Actions 28 Packages Projects Releases Wiki 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/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)`,
}}
/>
)}