Refactor PDF viewer layout and improve responsiveness
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:
@@ -60,29 +60,6 @@
|
||||
} else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) {
|
||||
<div class="pdf-viewer-container">
|
||||
@if (_pdfLoaded) {
|
||||
<!-- PDF Thumbnail Sidebar -->
|
||||
<div class="pdf-thumbnails @(_showThumbnails ? "pdf-thumbnails--visible" : "")">
|
||||
<div class="pdf-thumbnails__header">
|
||||
<span class="pdf-thumbnails__title">Seiten</span>
|
||||
<button class="pdf-thumbnails__close" @onclick="ToggleThumbnails" title="Seitenleiste schließen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pdf-thumbnails__content">
|
||||
@for (int i = 1; i <= _totalPages; i++) {
|
||||
var pageNum = i;
|
||||
<div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)">
|
||||
<div class="pdf-thumbnail__preview">
|
||||
<canvas id="thumb-canvas-@pageNum" class="pdf-thumbnail__canvas"></canvas>
|
||||
</div>
|
||||
<div class="pdf-thumbnail__label">@pageNum</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pdf-toolbar">
|
||||
<div class="pdf-toolbar__section">
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--toggle" @onclick="ToggleThumbnails" title="@(_showThumbnails ? "Seitenleiste ausblenden" : "Seitenleiste einblenden")">
|
||||
@@ -151,7 +128,33 @@
|
||||
</div>
|
||||
}
|
||||
<div class="pdf-frame">
|
||||
<canvas id="pdf-canvas" class="pdf-canvas"></canvas>
|
||||
@if (_pdfLoaded && _showThumbnails) {
|
||||
<!-- PDF Thumbnail Sidebar -->
|
||||
<div class="pdf-thumbnails">
|
||||
<div class="pdf-thumbnails__header">
|
||||
<span class="pdf-thumbnails__title">Seiten</span>
|
||||
<button class="pdf-thumbnails__close" @onclick="ToggleThumbnails" title="Seitenleiste schließen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pdf-thumbnails__content">
|
||||
@for (int i = 1; i <= _totalPages; i++) {
|
||||
var pageNum = i;
|
||||
<div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)">
|
||||
<div class="pdf-thumbnail__preview">
|
||||
<canvas id="thumb-canvas-@pageNum" class="pdf-thumbnail__canvas"></canvas>
|
||||
</div>
|
||||
<div class="pdf-thumbnail__label">@pageNum</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="pdf-canvas-wrapper">
|
||||
<canvas id="pdf-canvas" class="pdf-canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} else {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user