AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor PDF viewer layout and improve responsiveness

Browse Source 
Refactor the PDF thumbnail sidebar to use Razor logic for dynamic visibility control, removing reliance on CSS-based toggling. Updated the `pdf-thumbnails` layout to use `relative` positioning and improved its integration with the viewer structure. Introduced a new `pdf-canvas-wrapper` for better styling, scrolling, and alignment of the main PDF canvas.

Enhanced responsiveness by adjusting `pdf-thumbnails`, `pdf-thumbnails__content`, and `pdf-toolbar` styles for smaller screens. Deprecated the `pdf-thumbnails--visible` class and removed redundant CSS properties to simplify the codebase. Updated the `pdf-frame` layout to use a column-based flexbox for better alignment.

These changes improve maintainability, responsiveness, and the overall user experience of the `EnvelopeViewer` component.
This commit is contained in:
tekh
2026-06-06 00:16:02 +02:00
parent c6d5656fce
commit bd6ff4e67e
2 changed files with 83 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
View File

@@ -56,34 +56,28 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0;
gap: 1rem;
position: relative;
}
.pdf-thumbnails {
position: absolute;
left: -280px;
top: 0;
bottom: 0;
position: relative;
width: 260px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: 16px;
border-radius: 16px 0 0 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(126, 34, 206, 0.1);
border: 1px solid rgba(126, 34, 206, 0.15);
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
border-right: none;
display: flex;
flex-direction: column;
overflow: hidden;
flex-shrink: 0;
}
.pdf-thumbnails--visible {
left: 0;
/* No longer needed - visibility controlled by @if in Razor */
}
.pdf-thumbnails__header {
@@ -397,13 +391,14 @@
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: auto;
overflow: hidden;
position: relative;
padding: 2rem;
flex: 1;
width: 90%;
max-width: 1200px;
text-align: center;
display: flex;
flex-direction: row;
align-items: stretch;
}
.pdf-frame::before {
@@ -418,6 +413,17 @@
border-radius: 16px 16px 0 0;
}
.pdf-canvas-wrapper {
flex: 1;
overflow: auto;
padding: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.pdf-canvas {
display: inline-block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -456,46 +462,49 @@
}
@media (max-width: 768px) {
.envelope-content {
padding: 0.75rem;
}
.envelope-content {
padding: 0.75rem;
}
.pdf-thumbnails {
width: 200px;
left: -220px;
border-radius: 0 16px 16px 0;
}
.pdf-thumbnails {
width: 180px;
border-radius: 0 0 0 16px;
}
.pdf-thumbnails__content {
padding: 0.75rem;
gap: 0.5rem;
}
.pdf-thumbnails__content {
padding: 0.75rem;
gap: 0.5rem;
}
.pdf-toolbar {
flex-wrap: wrap;
padding: 0.625rem 1rem;
gap: 0.625rem;
max-width: 98%;
}
.pdf-toolbar {
flex-wrap: wrap;
padding: 0.625rem 1rem;
gap: 0.625rem;
max-width: 98%;
}
.pdf-toolbar__divider {
display: none;
}
.pdf-toolbar__divider {
display: none;
}
.pdf-toolbar__zoom-slider {
width: 100px;
}
.pdf-toolbar__zoom-slider {
width: 100px;
}
.pdf-toolbar__btn--preset {
padding: 0.425rem 0.75rem;
font-size: 0.75rem;
}
.pdf-toolbar__btn--preset {
padding: 0.425rem 0.75rem;
font-size: 0.75rem;
}
.pdf-frame {
border-radius: 12px;
padding: 1rem;
width: 95%;
}
.pdf-frame {
border-radius: 12px;
width: 95%;
flex-direction: column;
}
.pdf-canvas-wrapper {
padding: 1rem;
}
.envelope-action-bar {
padding: 1rem 1.25rem;