nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lazy pdf rendering

Browse Source
This commit is contained in:
nils
2025-11-17 00:22:20 +01:00
parent 16c28bcba1
commit 5ffbcc47e3
2 changed files with 265 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/documents/viewer.css
+31 -4
View File
@@ -445,19 +445,46 @@
.pdf-viewer__page-wrapper {
position: relative;
display: block;
}
.pdf-viewer__canvas-stack--contain .pdf-viewer__page {
.pdf-viewer__page-wrapper:not(:has(> canvas)) {
background-color: transparent;
background-image: url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' fill='white' fill-opacity='0.05'>\
<rect x='200' width='200' height='200' />\
<rect y='200' width='200' height='200' />\
</svg>");
background-size: 30px 30px;
}
.pdf-viewer__canvas-stack--fit-width .pdf-viewer__page-wrapper--limit-width {
width: var(--pdf-viewer-page-width, 100%);
height: auto;
aspect-ratio: calc(var(--pdf-viewer-page-width) / var(--pdf-viewer-page-height));
}
.pdf-viewer__canvas-stack--contain .pdf-viewer__page-wrapper--limit-height {
width: auto;
max-width: min(100%, var(--pdf-viewer-viewport-width, 100vw));
height: min(var(--pdf-viewer-page-height, 100%), var(--pdf-viewer-viewport-height, 100vh));
max-width: min(var(--pdf-viewer-page-width, 100%), var(--pdf-viewer-viewport-width, 100vw));
aspect-ratio: calc(var(--pdf-viewer-page-width) / var(--pdf-viewer-page-height));
}
.pdf-viewer__canvas-stack--contain .pdf-viewer__page-wrapper--limit-width {
width: var(--pdf-viewer-page-width, 100%);
height: auto;
max-width: min(var(--pdf-viewer-page-width, 100%), var(--pdf-viewer-viewport-width, 100vw));
max-height: var(--pdf-viewer-viewport-height, 100vh);
aspect-ratio: calc(var(--pdf-viewer-page-width) / var(--pdf-viewer-page-height));
}
.pdf-viewer__page {
display: block;
width: 100%;
height: auto;
box-shadow: 0 1.25rem 2.5rem -1.25rem var(--shadow-medium);
height: 100%;
background: var(--surface);
}