Refactor EnvelopeViewer styles and add PDF support
Moved inline styles from `EnvelopeViewer.razor` to a new external CSS file `envelope-viewer.css` for better maintainability and separation of concerns. Added external JavaScript dependencies (`pdf.js` and `pdf-viewer.js`) to enable PDF rendering. Fixed encoding issues in error messages and improved the layout structure with responsive design rules. Enhanced readability and usability by organizing styles and ensuring proper localization support.
This commit is contained in:
@@ -10,6 +10,7 @@
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
|
||||
<link href="css/envelope-viewer.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script src="js/pdf-viewer.js"></script>
|
||||
|
||||
@@ -65,7 +66,7 @@
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
|
||||
<span class="visually-hidden">Lädt...</span>
|
||||
<span class="visually-hidden">L<EFBFBD>dt...</span>
|
||||
</div>
|
||||
<p class="text-white fw-semibold">Dokument wird geladen...</p>
|
||||
</div>
|
||||
@@ -106,180 +107,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.envelope-viewer-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||||
}
|
||||
|
||||
.envelope-action-bar {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 3px solid rgba(126, 34, 206, 0.3);
|
||||
padding: 1.25rem 2rem;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.envelope-action-bar__inner {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.envelope-logo svg {
|
||||
filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.envelope-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.envelope-key {
|
||||
font-size: 0.8125rem;
|
||||
color: #64748b;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
font-weight: 500;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pdf-controls, .pdf-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.zoom-level, .page-info {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.envelope-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pdf-viewer-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pdf-frame {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pdf-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pdf-canvas {
|
||||
display: block;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
padding: 2rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
|
||||
color: #be123c;
|
||||
border-left: 4px solid #e11d48;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
||||
color: #92400e;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
border-width: 0.35rem;
|
||||
}
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.envelope-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.pdf-frame {
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.envelope-action-bar {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.envelope-action-bar__inner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.envelope-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.envelope-key {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.envelope-logo svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
[Parameter] public string? EnvelopeKey { get; set; }
|
||||
|
||||
@@ -293,7 +120,7 @@
|
||||
|
||||
protected override async Task OnInitializedAsync() {
|
||||
if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
|
||||
_errorMessage = "Envelope-Schlüssel fehlt.";
|
||||
_errorMessage = "Envelope-Schlüssel fehlt.";
|
||||
_isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
171
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
Normal file
171
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
Normal file
@@ -0,0 +1,171 @@
|
||||
.envelope-viewer-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
||||
}
|
||||
|
||||
.envelope-action-bar {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 3px solid rgba(126, 34, 206, 0.3);
|
||||
padding: 1.25rem 2rem;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.envelope-action-bar__inner {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.envelope-logo svg {
|
||||
filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
|
||||
color: #7e22ce;
|
||||
}
|
||||
|
||||
.envelope-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.envelope-key {
|
||||
font-size: 0.8125rem;
|
||||
color: #64748b;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
font-weight: 500;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pdf-controls, .pdf-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.zoom-level, .page-info {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.envelope-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pdf-viewer-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pdf-frame {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pdf-frame::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pdf-canvas {
|
||||
display: block;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
padding: 2rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
|
||||
color: #be123c;
|
||||
border-left: 4px solid #e11d48;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
|
||||
color: #92400e;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
border-width: 0.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.envelope-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.pdf-frame {
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.envelope-action-bar {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.envelope-action-bar__inner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.envelope-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.envelope-key {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.envelope-logo svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user