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

51
EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor
View File

@@ -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 {