From 9ffeb7afe8d41bbe3a27ae4cec8369c44bae2c43 Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Tue, 17 Sep 2024 00:38:37 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20UI=20f=C3=BCr=20die=20Dokumentenunterze?=
 =?UTF-8?q?ichnungsseite=20verbessert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout modernisiert und responsiver gestaltet.
- Button-Stile und Farbschemata aktualisiert.
- Verbesserte Ausrichtung von Text und Symbolen für mehr visuelle Klarheit.
- Fokus auf die Verbesserung der Benutzererfahrung beim Unterzeichnen von Dokumenten.
---
 .../Views/Home/ShowEnvelope.cshtml            |  62 ++++----
 EnvelopeGenerator.Web/wwwroot/css/site.css    | 142 +++++++++++++-----
 .../wwwroot/css/site.min.css                  |   2 +-
 3 files changed, 137 insertions(+), 69 deletions(-)

diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
index 9695489d..b42fb616 100644
--- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
+++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
@@ -21,43 +21,43 @@
 }
 <div class="d-flex flex-column min-vh-100">
     <nav class="navbar navbar-light bg-light">
-        <div class="container-fluid">
+        <div class="container">
             <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="material-symbols-outlined">
+                    more_vert
+                </span>
             </button>
-            <span class="material-symbols-outlined">
-                info
-            </span>
-            <span class="navbar-brand me-auto ms-5 envelope-message">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
-            <div class="col-1  p-0 m-0 me-3 d-flex">
+            <div class="envelope-message">
+                <span class="icon material-symbols-outlined">history_edu</span>
+                <span class="message navbar-brand">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
+            </div>
+            <div class="logo">
                 <img src="~/img/digital_data.svg" alt="...">
             </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 p-0 m-0">
-                        <div class="card-body p-0 m-0 ms-4">
-                            <h5 class="card-title p-0 m-0">
-                                <span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
-                                <span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
-                            </h5>
-                            <p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
-                            <p class="card-text p-0 m-0">
-                                <small class="text-body-secondary">
-                                    @Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2],   /* sanitize separately but don't sanitize the URI */
-                                        envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
-                                        $"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
-                                        sender?.Email.TrySanitize(_sanitizer),
-                                        envelope?.Title.TrySanitize(_sanitizer),
-                                        sender?.Prename.TrySanitize(_sanitizer),
-                                        sender?.Name.TrySanitize(_sanitizer),
-                                        sender?.Email.TrySanitize(_sanitizer)))
-                                </small>
-                            </p>
-                        </div>
+    <div class="collapse show bg-light " id="navbarToggleExternalContent" data-bs-theme="light">
+        <div class="card sender-card p-1 mb-3">
+            <div class="row g-0">
+                <div class="col p-0 m-0">
+                    <div class="card-body p-0 m-0 ms-4">
+                        <h5 class="card-title p-0 m-0">
+                            <span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
+                            <span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
+                        </h5>
+                        <p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
+                        <p class="card-text p-0 m-0">
+                            <small class="text-body-secondary">
+                                @Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2],   /* sanitize separately but don't sanitize the URI */
+                                    envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
+                                    $"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
+                                    sender?.Email.TrySanitize(_sanitizer),
+                                    envelope?.Title.TrySanitize(_sanitizer),
+                                    sender?.Prename.TrySanitize(_sanitizer),
+                                    sender?.Name.TrySanitize(_sanitizer),
+                                    sender?.Email.TrySanitize(_sanitizer)))
+                            </small>
+                        </p>
                     </div>
                 </div>
             </div>
diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css
index d5d5b332..e9db92c0 100644
--- a/EnvelopeGenerator.Web/wwwroot/css/site.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.css
@@ -10,6 +10,10 @@
     height: 80vh;
 }
 
+.navbar-toggler {
+    border: 0;
+}
+
 .btn-group {
     margin-right: 10vw;
     margin-bottom: 10vh;
@@ -163,8 +167,43 @@ footer#page-footer {
         border-radius: 3.125rem;
     }
 
+.navbar .container {
+    display: flex;
+    padding: 0;
+    margin: 0;
+}
+
+.navbar-toggler {
+    padding: 0;
+    margin: 0;
+    width: 4rem;
+    left: 0;
+}
+
 .envelope-message {
+    position: absolute;
+    display: flex;
+    width: calc(100% - 8rem);
+    align-items: center;
+    justify-content: start;
+    margin-left: 4rem;
+}
+
+.envelope-message .icon {
+    margin-right: 0.5rem;
+}
+
+.envelope-message .message {
     font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-weight: 550;
+}
+
+.logo {
+    width: 9rem;
+    position: absolute;
+    right: 0;
+    margin-right:2rem;
 }
 
 .none-display {
@@ -225,15 +264,56 @@ footer#page-footer {
 }
 
 /* styles for mobile responsiveness */
-@media (max-width: 767px) {
-    .navbar {
-        flex-direction: column;
-        align-items: flex-start;
+@media (max-height: 850px) {
+    .navbar .container {
+        display: flex;
+        padding: 0;
+        margin: 0;
     }
 
     .navbar-toggler {
-        transform: scale(0.75);
         padding: 0;
+        margin: 0;
+        width: 4rem;
+        left: 0;
+    }
+
+    .envelope-message {
+        width: calc(100% - 4rem -9rem);
+    }
+
+        .envelope-message .message {
+            font-size: 14px;
+            font-weight: 550;
+        }
+
+    .logo {
+        width: 9rem;
+        position: absolute;
+        right: 0;
+        margin-right: 2rem;
+    }
+
+    .card-text, .card-text {
+        font-size: 0.6rem; /* Font size reduced */
+        margin: 0rem;
+        padding: 0rem;
+    }
+
+    .highlight {
+        font-weight: 700;
+        font-size: 0.5rem;
+    }
+
+    .signature-process-title, .signature-process-name {
+        font-size: 0.7rem;
+    }
+}
+
+@media (max-width: 767px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
     }
 
     .navbar-brand {
@@ -243,14 +323,25 @@ footer#page-footer {
         text-overflow: ellipsis;
     }
 
-    .collapse .card-text, .collapsing .card-text {
-        font-size: 0.6rem; /* Font size reduced */
-        margin: 0rem;
-        padding: 0rem;
+    .envelope-message {
+        width: calc(100% - 4rem - 4.5rem);
+        margin-left: 3rem;
     }
 
-    .sender-card .card-body {
-        padding: 0.5rem;
+        .envelope-message .message {
+            font-size: 12px;
+            font-weight: 550;
+        }
+
+        .envelope-message .icon {
+            margin-right: 0.1rem;
+            font-size: 1rem
+        }
+
+    .logo {
+        width: 5rem;
+        right: 0;
+        margin-right: 1rem;
     }
 
     .btn_group {
@@ -266,10 +357,6 @@ footer#page-footer {
         display: none;
     }
 
-    img {
-        max-width: 4rem;
-    }
-
     .page {
         margin-top: 1rem;
         max-width: 90%;
@@ -279,29 +366,10 @@ footer#page-footer {
         .page section {
             max-width: 90%;
         }
-
-    .highlight {
-        font-weight: 700;
-        font-size: 0.5rem;
-    }
-
-    .signature-process-title, .signature-process-name {
-        font-size: 0.7rem;
-    }
 }
-@media (max-height: 850px) {
-    .collapse .card-text, .collapsing .card-text {
-        font-size: 0.5rem; /* Font size reduced */
-        margin: 0rem;
-        padding: 0rem;
-    }
 
-    .highlight {
-        font-weight: 700;
-        font-size: 0.5rem;
-    }
-
-    .signature-process-title, .signature-process-name {
-        font-size: 0.7rem;
+@media (max-height: 600px) {
+    .collapse {
+        height: 4rem;
     }
 }
\ No newline at end of file
diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.min.css b/EnvelopeGenerator.Web/wwwroot/css/site.min.css
index d0b6755b..8931fb3e 100644
--- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css
+++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css
@@ -1 +1 @@
-#app{background:#808080;width:100vw;height:80vh}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.envelope-message{font-family:'Roboto',sans-serif}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-toggler{transform:scale(.75);padding:0}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.collapse .card-text,.collapsing .card-text{font-size:.6rem;margin:0;padding:0}.sender-card .card-body{padding:.5rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}img{max-width:4rem}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-height:850px){.collapse .card-text,.collapsing .card-text{font-size:.5rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}
\ No newline at end of file
+#app{background:#808080;width:100vw;height:80vh}.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}}@media(max-height:600px){.collapse{height:4rem}}
\ No newline at end of file