AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Behebt das Scrollproblem des iframes durch Festlegen der Höhe mit Viewport-Einheiten, um eine ordnungsgemäße interne Scroll-Verarbeitung zu gewährleisten.

Browse Source
This commit is contained in:
Developer 02 2024-05-23 10:42:55 +02:00
parent 90ac81c576
commit 60afdc23da
2 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
View File

@ -16,7 +16,8 @@
var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1)) var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1))
+ (pages.Count() > 1 ? " und " : "") + pages.LastOrDefault(); + (pages.Count() > 1 ? " und " : "") + pages.LastOrDefault();
} }
<nav class="navbar navbar-light bg-light"> <div class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid"> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -26,8 +27,8 @@
<img src="~/img/digital_data.svg" alt="..."> <img src="~/img/digital_data.svg" alt="...">
</div> </div>
</div> </div>
</nav> </nav>
<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light"> <div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
<div class="bg-light p-1"> <div class="bg-light p-1">
<div class="card sender-card mb-3"> <div class="card sender-card mb-3">
<div class="row g-0"> <div class="row g-0">
@ -44,6 +45,8 @@
</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> </div>
<script nonce="@nonce"> <script nonce="@nonce">
const collapseNav = () => { const collapseNav = () => {
@ -71,4 +74,3 @@
@:document.addEventListener("DOMContentLoaded", async () => await new App("@envelopeKey.TrySanitize(_sanitizer)", @Html.Raw(envelopeReceiverJson.TrySanitize(_sanitizer)), B64ToBuff("@Html.Raw(documentBase64String.TrySanitize(_sanitizer))"), "@ViewData["PSPDFKitLicenseKey"]").init()) @: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> </script>
<div id='app'></div>

35
EnvelopeGenerator.Web/wwwroot/css/site.css
View File

@ -4,14 +4,13 @@
*/ */
/* Toolbar Buttons */ /* Toolbar Buttons */
#app { #app {
background: gray; background: gray;
width: 100vw; width: 100vw;
height: 100vh; height: 1vh;
margin: 0 auto;
} }
.button-finish { .button-finish {
transition: background-color linear 300ms; transition: background-color linear 300ms;
background-color: #059669; /* emerald-600 */ background-color: #059669; /* emerald-600 */
@ -19,10 +18,10 @@
border-left: none; border-left: none;
} }
.button-finish:hover, .button-finish:focus, .button-finish:active { .button-finish:hover, .button-finish:focus, .button-finish:active {
background-color: #10b981; /* emerald-500 */ background-color: #10b981; /* emerald-500 */
color: white; color: white;
} }
.button-reject { .button-reject {
transition: background-color linear 300ms; transition: background-color linear 300ms;
@ -31,10 +30,10 @@
border-left: none; border-left: none;
} }
.button-reject:hover, .button-reject:focus, .button-reject:active { .button-reject:hover, .button-reject:focus, .button-reject:active {
background-color: #f59e0b; /* amber-500 */ background-color: #f59e0b; /* amber-500 */
color: white; color: white;
} }
.button-reset { .button-reset {
transition: background-color linear 300ms; transition: background-color linear 300ms;
@ -43,10 +42,10 @@
border-left: none; border-left: none;
} }
.button-reset:hover, .button-reset:focus, .button-reset:active { .button-reset:hover, .button-reset:focus, .button-reset:active {
background-color: #3b82f6; /* blue-500 */ background-color: #3b82f6; /* blue-500 */
color: white; color: white;
} }
body { body {
background-color: #bbb; background-color: #bbb;
@ -72,20 +71,20 @@ body {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.page header .icon.admin { .page header .icon.admin {
background-color: #331904; background-color: #331904;
color: #fecba1; color: #fecba1;
} }
.page header .icon.locked { .page header .icon.locked {
background-color: #ffc107; background-color: #ffc107;
color: #000; color: #000;
} }
.page header .icon.signed { .page header .icon.signed {
background-color: #146c43; background-color: #146c43;
color: #fff; color: #fff;
} }
.page .form { .page .form {
max-width: 30rem; max-width: 30rem;
@ -95,10 +94,10 @@ body {
gap: 1rem; gap: 1rem;
} }
#form-access-code > .input, #form-access-code > .input,
#form-admin-password > .input { #form-admin-password > .input {
flex-grow: 1; flex-grow: 1;
} }
#page-admin header .icon { #page-admin header .icon {
background-color: #331904; background-color: #331904;