Behebt das Scrollproblem des iframes durch Festlegen der Höhe mit Viewport-Einheiten, um eine ordnungsgemäße interne Scroll-Verarbeitung zu gewährleisten.
This commit is contained in:
Developer 02
parent
90ac81c576
commit
60afdc23da
@ -16,34 +16,37 @@
|
||||
var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
|
||||
+ (pages.Count() > 1 ? " und " : "") + pages.LastOrDefault();
|
||||
}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-brand me-auto ms-5 envelope-message">@($"Hallo {Model.Name.TrySanitize(_sanitizer)}, {@envelope?.Message.TrySanitize(_sanitizer)}")</div>
|
||||
<div class="col-1 p-0 m-0 me-3 d-flex">
|
||||
<img src="~/img/digital_data.svg" alt="...">
|
||||
<div class="col-1 p-0 m-0 me-3 d-flex">
|
||||
<img src="~/img/digital_data.svg" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
|
||||
<div class="bg-light p-1">
|
||||
<div class="card sender-card mb-3">
|
||||
<div class="row g-0">
|
||||
<div class="col-1 p-0 m-0 ps-4 mx-auto">
|
||||
<img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
|
||||
</div>
|
||||
<div class="col p-0 m-0">
|
||||
<div class="card-body p-0 m-0">
|
||||
<h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
|
||||
<p class="card-text p-0 m-0">@($"Sie haben {(pages.Count())} Briefe zu unterschreiben. Bitte prüfen Sie die Seiten {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
|
||||
<p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
|
||||
</nav>
|
||||
<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
|
||||
<div class="bg-light p-1">
|
||||
<div class="card sender-card mb-3">
|
||||
<div class="row g-0">
|
||||
<div class="col-1 p-0 m-0 ps-4 mx-auto">
|
||||
<img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
|
||||
</div>
|
||||
<div class="col p-0 m-0">
|
||||
<div class="card-body p-0 m-0">
|
||||
<h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
|
||||
<p class="card-text p-0 m-0">@($"Sie haben {(pages.Count())} Briefe zu unterschreiben. Bitte prüfen Sie die Seiten {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
|
||||
<p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>@* <button class="btn btn-success position-fixed bottom-0 end-0 mb-5 me-5" type="button">Abschließen</button> *@
|
||||
<div id='app' class="flex-grow-1"></div>
|
||||
</div>
|
||||
<script nonce="@nonce">
|
||||
const collapseNav = () => {
|
||||
@ -70,5 +73,4 @@
|
||||
|
||||
@:document.addEventListener("DOMContentLoaded", async () => await new App("@envelopeKey.TrySanitize(_sanitizer)", @Html.Raw(envelopeReceiverJson.TrySanitize(_sanitizer)), B64ToBuff("@Html.Raw(documentBase64String.TrySanitize(_sanitizer))"), "@ViewData["PSPDFKitLicenseKey"]").init())
|
||||
}
|
||||
</script>
|
||||
<div id='app'></div>
|
||||
</script>
|
||||
@ -4,14 +4,13 @@
|
||||
*/
|
||||
|
||||
/* Toolbar Buttons */
|
||||
|
||||
#app {
|
||||
background: gray;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
height: 1vh;
|
||||
}
|
||||
|
||||
|
||||
.button-finish {
|
||||
transition: background-color linear 300ms;
|
||||
background-color: #059669; /* emerald-600 */
|
||||
@ -19,10 +18,10 @@
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.button-finish:hover, .button-finish:focus, .button-finish:active {
|
||||
background-color: #10b981; /* emerald-500 */
|
||||
color: white;
|
||||
}
|
||||
.button-finish:hover, .button-finish:focus, .button-finish:active {
|
||||
background-color: #10b981; /* emerald-500 */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-reject {
|
||||
transition: background-color linear 300ms;
|
||||
@ -31,10 +30,10 @@
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.button-reject:hover, .button-reject:focus, .button-reject:active {
|
||||
background-color: #f59e0b; /* amber-500 */
|
||||
color: white;
|
||||
}
|
||||
.button-reject:hover, .button-reject:focus, .button-reject:active {
|
||||
background-color: #f59e0b; /* amber-500 */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-reset {
|
||||
transition: background-color linear 300ms;
|
||||
@ -43,10 +42,10 @@
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.button-reset:hover, .button-reset:focus, .button-reset:active {
|
||||
background-color: #3b82f6; /* blue-500 */
|
||||
color: white;
|
||||
}
|
||||
.button-reset:hover, .button-reset:focus, .button-reset:active {
|
||||
background-color: #3b82f6; /* blue-500 */
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #bbb;
|
||||
@ -72,20 +71,20 @@ body {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page header .icon.admin {
|
||||
background-color: #331904;
|
||||
color: #fecba1;
|
||||
}
|
||||
.page header .icon.admin {
|
||||
background-color: #331904;
|
||||
color: #fecba1;
|
||||
}
|
||||
|
||||
.page header .icon.locked {
|
||||
background-color: #ffc107;
|
||||
color: #000;
|
||||
}
|
||||
.page header .icon.locked {
|
||||
background-color: #ffc107;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.page header .icon.signed {
|
||||
background-color: #146c43;
|
||||
color: #fff;
|
||||
}
|
||||
.page header .icon.signed {
|
||||
background-color: #146c43;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.page .form {
|
||||
max-width: 30rem;
|
||||
@ -95,10 +94,10 @@ body {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#form-access-code > .input,
|
||||
#form-admin-password > .input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#form-access-code > .input,
|
||||
#form-admin-password > .input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#page-admin header .icon {
|
||||
background-color: #331904;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user