From 60afdc23dad0b91a09c910ead677840a2047291c Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 23 May 2024 10:42:55 +0200
Subject: [PATCH] =?UTF-8?q?Behebt=20das=20Scrollproblem=20des=20iframes=20?=
 =?UTF-8?q?durch=20Festlegen=20der=20H=C3=B6he=20mit=20Viewport-Einheiten,?=
 =?UTF-8?q?=20um=20eine=20ordnungsgem=C3=A4=C3=9Fe=20interne=20Scroll-Vera?=
 =?UTF-8?q?rbeitung=20zu=20gew=C3=A4hrleisten.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Views/Home/ShowEnvelope.cshtml            | 50 +++++++--------
 EnvelopeGenerator.Web/wwwroot/css/site.css    | 61 +++++++++----------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
index 7adb23fc..6f7b7daa 100644
--- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
+++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
@@ -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>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css
index 1fb08ec5..3fc2c305 100644
--- a/EnvelopeGenerator.Web/wwwroot/css/site.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.css
@@ -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;