refactor(envelope-locked): Zugriffscode-Panel einrichten

EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml

@@ -23,43 +23,46 @@
     <section class="text-center">
         <p>@_localizer[WebKey.LockedBody]</p>
     </section>
-    <div class="row m-0 p-0 justify-content-center">
-        <div class="col-8 pe-0">
-            <form id="form-access-code" class="form form-floating mb-0" method="post">             
-                <input type="password" id="access_code" class="form-control" name="access_code" placeholder="@_localizer[WebKey.LockedAccessCode]" required="required">
-                <label for="access_code">@_localizer[WebKey.LockedAccessCode]</label>
-                <div class="button">
-                    <button type="submit" class="btn btn-primary">@_localizer[WebKey.LocakedOpen]</button>
+    <div class="row m-0 p-0">
+        <div class="access-code-panel justify-content-center align-items-center p-0 m-0">
+            <form id="form-access-code" class="form form-floating mb-0" method="post"> 
+                <div class="form-floating access-code-form-floating">
+                    <input type="password" id="access_code" class="form-control" name="access_code" placeholder="@_localizer[WebKey.LockedAccessCode]" required="required">
+                    <label for="access_code">@_localizer[WebKey.LockedAccessCode]</label>
+                    <button type="submit" class="btn btn-outline-primary">
+                        <span class="material-symbols-outlined">
+                            login
+                        </span>
+                    </button>
+                </div>
+                <div class="dropdown flag-dropdown">
+                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="langDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="fi @userCulture?.FIClass.TrySanitize(_sanitizer) me-2" id="selectedFlag"></span><span id="selectedLanguage"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="langDropdownMenuButton">
+                        @foreach (var culture in _cultures)
+                        {
+                            var lang = culture.Language;
+                            var info = culture.Info;
+                            <li>
+                                <a class="dropdown-item" data-language="@lang.TrySanitize(_sanitizer)" data-flag="@_cultures[lang]?.FIClass.TrySanitize(_sanitizer)">
+                                    <span class="fi @_cultures[lang]?.FIClass.TrySanitize(_sanitizer) me-2"></span>@info?.Parent.NativeName
+                                </a>
+                            </li>
+                        }
+                    </ul>
                 </div>
             </form>
         </div>
-        <div class="col-4 mb-3 d-flex justify-content-center align-items-center">
-            <div class="dropdown">
-                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="langDropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-                    <span class="fi @userCulture?.FIClass.TrySanitize(_sanitizer) me-2" id="selectedFlag"></span><span id="selectedLanguage"></span>
-                </button>
-                <ul class="dropdown-menu" aria-labelledby="langDropdownMenuButton">
-                @foreach(var culture in _cultures)
-                {
-                    var lang = culture.Language;
-                    var info = culture.Info;
-                    <li>
-                        <a class="dropdown-item" data-language="@lang.TrySanitize(_sanitizer)" data-flag="@_cultures[lang]?.FIClass.TrySanitize(_sanitizer)">
-                            <span class="fi @_cultures[lang]?.FIClass.TrySanitize(_sanitizer) me-2"></span>@info?.Parent.NativeName
-                        </a>
-                    </li>
-                }
-                </ul>
-            </div>
-        </div>
     </div>
-    <div id="access-code-error-message" class="text-danger row">
-        @if (ViewData["ErrorMessage"] is string errMsg)
-        {
+    @if (ViewData["ErrorMessage"] is string errMsg)
+    {
+    <div id="access-code-error-message" class="alert alert-danger row" role="alert">
             @_sanitizer.Sanitize(errMsg)
-        }
+
     </div>
-    <section class="text-center">
+    }
+    <section class="no-receiver-explanation text-center">
         <details>
             <summary>@_localizer[WebKey.LockedFooterTitle]</summary>
             <p>@_localizer[WebKey.LockedFooterBody]</p>

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -9,6 +9,10 @@
     border: 0;
 }
 
+.material-symbols-outlined {
+    align-content: center;
+}
+
 .btn-group {
     margin-right: 10vw;
     margin-bottom: 10vh;
@@ -309,12 +313,38 @@ footer#page-footer {
 }
 
 #form-access-code {
-    margin-left: 5rem;
+    justify-content: space-evenly;
 }
 
+.access-code-form-floating {
+    display: flex;
+    justify-content: start;
+    flex-direction: row;
+}
+
+    .access-code-form-floating button {
+        align-content: center;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    .access-code-form-floating input {
+        align-content: center;
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right-width: 0;
+        width: 7rem;
+    }
+
 #access-code-error-message {
-    margin: 0 0 1.5rem 6rem;
-    height: 1.25rem;
+    justify-content: center;
+    align-content: center;
+    margin: 1.5rem 7rem 0 7rem;
+    height: 2.5rem;
+}
+
+.flag-dropdown button {
+    height: 100%;
 }
 
 .header-1 {
@@ -331,6 +361,9 @@ footer#page-footer {
     padding-top: 0;
 }
 
+.no-receiver-explanation {
+    padding: 2.5rem;
+}
 /* styles for mobile responsiveness */
 @media (max-height: 850px) {
     .navbar .container {