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

fix(layout): fixed bleed layout of images (#3823)

Browse Source
This commit is contained in:
Huang Xin
2026-04-11 01:33:56 +08:00
committed by GitHub
parent ab7da981da
commit de11511c30
3 changed files with 15 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/__tests__/utils/style.test.ts
+6 -8
View File
@@ -245,19 +245,17 @@ describe('transformStylesheet', () => {
it('adds width when both left and right bleed', () => {
const css = '.bleed { duokan-bleed: left right; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).toContain(
'width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important',
);
expect(result).toContain('max-width: calc(var(--full-width) * 1px) !important');
expect(result).toContain('width: calc(var(--available-width) * 1px) !important');
expect(result).toContain('min-width: calc(var(--available-width) * 1px) !important');
expect(result).toContain('max-width: calc(var(--available-width) * 1px) !important');
});
it('adds height when both top and bottom bleed', () => {
const css = '.bleed { duokan-bleed: top bottom; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).toContain(
'height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important',
);
expect(result).toContain('max-height: calc(var(--full-height) * 1px) !important');
expect(result).toContain('height: calc(var(--available-height) * 1px) !important');
expect(result).toContain('min-height: calc(var(--available-height) * 1px) !important');
expect(result).toContain('max-height: calc(var(--available-height) * 1px) !important');
});
it('does not add bleed styles when vertical is true', () => {
apps/readest-app/src/utils/style.ts
+8 -16
View File
@@ -725,25 +725,17 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
if (!/display\s*:/.test(block)) {
block = block.replace(/}$/, ' display: flow-root !important; }');
}
if (!/width\s*:/.test(block) && directions.includes('left') && directions.includes('right')) {
if (directions.includes('left') && directions.includes('right')) {
block = block
.replace(
/}$/,
' width: calc(var(--_max-width) + var(--page-margin-left) + var(--page-margin-right)) !important; }',
)
.replace(/}$/, ' max-width: calc(var(--full-width) * 1px) !important; }');
.replace(/}$/, ' width: calc(var(--available-width) * 1px) !important; }')
.replace(/}$/, ' min-width: calc(var(--available-width) * 1px) !important; }')
.replace(/}$/, ' max-width: calc(var(--available-width) * 1px) !important; }');
}
if (
!/height\s*:/.test(block) &&
directions.includes('top') &&
directions.includes('bottom')
) {
if (directions.includes('top') && directions.includes('bottom')) {
block = block
.replace(
/}$/,
' height: calc(100% + var(--page-margin-top) + var(--page-margin-bottom)) !important; }',
)
.replace(/}$/, ' max-height: calc(var(--full-height) * 1px) !important; }');
.replace(/}$/, ' height: calc(var(--available-height) * 1px) !important; }')
.replace(/}$/, ' min-height: calc(var(--available-height) * 1px) !important; }')
.replace(/}$/, ' max-height: calc(var(--available-height) * 1px) !important; }');
}
}
return selector + block;
packages/foliate-js
+1 -1
Submodule packages/foliate-js updated: 183f296aaf...2476b0dabf