diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor index 6605b52a..738babe8 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor @@ -5,25 +5,28 @@ @inject IStringLocalizer UiLocalizer @inject IJSRuntime JSRuntime -@if (PageCount > 0) -{ - -} - -
- @if (PageCount <= 0) +
+ @if (PageCount > 0) { -
@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")
+
+ +
} - else - { + +
+ @if (PageCount <= 0) + { +
@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")
+ } + else + { @if (Pages.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl)) {
@@ -85,7 +88,8 @@
}
- } + } +
@code { diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css index 6ada127b..1dbdcce8 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css @@ -61,13 +61,34 @@ padding: 1rem; } +.sender-image-editor-shell { + position: relative; + width: 100%; + height: 100%; +} + +.sender-image-editor__toolbar-host { + position: sticky; + top: 0; + z-index: 40; + height: 0; + pointer-events: none; +} + .sender-image-toolbar { + pointer-events: auto; + position: absolute; + top: 0.75rem; + left: 50%; + transform: translateX(-50%); + width: calc(100% - 2rem); max-width: 980px; - margin: 0 auto 1rem; + margin: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; + background: transparent; } .sender-image-toolbar__group { @@ -141,11 +162,12 @@ display: flex; flex-direction: column; gap: 1.25rem; + padding-top: 6.2rem; } .sender-image-editor__native-preview { max-width: 980px; - margin: 0 auto 1rem; + margin: 6.2rem auto 1rem; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px; @@ -1250,12 +1272,22 @@ body.resizing { .sender-image-toolbar { grid-template-columns: 1fr; + width: calc(100% - 1rem); + top: 0.5rem; } .sender-image-toolbar__group { min-height: 3.9rem; } +.sender-image-editor__pages { + padding-top: 12.2rem; +} + +.sender-image-editor__native-preview { + margin-top: 12.2rem; +} + .sender-image-toolbar__value-box { min-width: 7.5rem; font-size: 1rem;