refactor(flag-dropdown): in die footer verschoben

EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml

@@ -1,8 +1,6 @@
 @{
     var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
     var logo = _logoOpt.Value;
-}
-@{
     ViewData["Title"] = _localizer[WebKey.DocProtected];
     var userCulture = ViewData["UserCulture"] as Culture;
 }
@@ -35,23 +33,6 @@
                         </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>
@@ -68,18 +49,4 @@
             <p>@_localizer[WebKey.LockedFooterBody]</p>
         </details>
     </section>
-</div>
+</div>
-<script nonce="@nonce">
-    document.addEventListener('DOMContentLoaded', function () {
-        var dropdownItems = document.querySelectorAll('.dropdown-item');
-        dropdownItems.forEach(function (item) {
-            item.addEventListener('click', async function(event) {
-                event.preventDefault();
-                var language = this.getAttribute('data-language');
-                var flagCode = this.getAttribute('data-flag');
-                document.getElementById('selectedFlag').className = 'fi ' + flagCode + ' me-2';
-                await setLanguage(language);
-            });
-        });
-    });
-</script>

EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml

@@ -3,7 +3,7 @@
 @using Newtonsoft.Json.Serialization
 @{
     var nonce = _accessor.HttpContext?.Items["csp-nonce"] as string;
-
+    var userCulture = ViewData["UserCulture"] as Culture;
     var isReadOnly = false;
     if (ViewData["IsReadOnly"] is bool isReadOnly_bool)
         isReadOnly = isReadOnly_bool;
@@ -77,6 +77,23 @@
     @Html.AntiForgeryToken()
     <footer>
         <span>&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></span>
+        <div class="dropup 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 culture-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>
         <a href="/privacy-policy.de-DE.html">Datenschutz</a>
     </footer>
 </body>

EnvelopeGenerator.Web/wwwroot/css/site.css

@@ -174,6 +174,18 @@ footer {
         text-decoration: none;
     }
 
+    footer .dropdown-toggle, footer .flag-dropdown, footer li {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+    }
+
+    footer .dropdown-menu a {
+        padding: 0.25rem 1rem 0.25rem 1rem;
+        margin-left: 0;
+        user-select: none;
+    }
+
 .page {
     margin-top: 3rem;
     background: white;
@@ -401,9 +413,9 @@ footer#page-footer {
     height: 2.5rem;
 }
 
-.flag-dropdown button {
+/*.flag-dropdown button {
     height: 100%;
-}
+}*/
 
 .header-1 {
     align-items: center;

EnvelopeGenerator.Web/wwwroot/js/event-binder.js

@@ -8,6 +8,19 @@ document.querySelectorAll('.email-input').forEach(input => {
     });
 });
 
+document.addEventListener('DOMContentLoaded', function () {
+    var dropdownItems = document.querySelectorAll('.culture-dropdown-item');
+    dropdownItems.forEach(function (item) {
+        item.addEventListener('click', async function(event) {
+            event.preventDefault();
+            var language = this.getAttribute('data-language');
+            var flagCode = this.getAttribute('data-flag');
+            document.getElementById('selectedFlag').className = 'fi ' + flagCode + ' me-2';
+            await setLanguage(language);
+        });
+    });
+});
+
 const bsNotify = (message, options) => alertify.notify(
     `<div class="alert ${options.alert_type ? 'alert-' + options.alert_type : ''}" role="alert"><span class="material-symbols-outlined">${options?.icon_name ?? ''}</span><p>${message}</p></div>`,
     'custom',

EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js

@@ -1 +1 @@
-document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});const bsNotify=(n,t)=>alertify.notify(`<div class="alert ${t.alert_type?"alert-"+t.alert_type:""}" role="alert"><span class="material-symbols-outlined">${t?.icon_name??""}</span><p>${n}</p></div>`,"custom",t?.delay??5);class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};static __ShareBackdrop;static get ShareBackdrop(){return Comp.__ShareBackdrop??=new bootstrap.Modal(document.getElementById("shareBackdrop")),this.__ShareBackdrop}}
+document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});document.addEventListener("DOMContentLoaded",function(){var n=document.querySelectorAll(".culture-dropdown-item");n.forEach(function(n){n.addEventListener("click",async function(n){n.preventDefault();var t=this.getAttribute("data-language"),i=this.getAttribute("data-flag");document.getElementById("selectedFlag").className="fi "+i+" me-2";await setLanguage(t)})})});const bsNotify=(n,t)=>alertify.notify(`<div class="alert ${t.alert_type?"alert-"+t.alert_type:""}" role="alert"><span class="material-symbols-outlined">${t?.icon_name??""}</span><p>${n}</p></div>`,"custom",t?.delay??5);class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};static __ShareBackdrop;static get ShareBackdrop(){return Comp.__ShareBackdrop??=new bootstrap.Modal(document.getElementById("shareBackdrop")),this.__ShareBackdrop}}