From 4a5fd08e510e3c8bfda6eab29c245f326b612407 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Mon, 26 Sep 2022 10:29:35 +0200
Subject: [PATCH] Footer: Improve responsive display (#4163)

Enhancement in addition to #4160.
---
 BTCPayServer/Views/Shared/_Footer.cshtml      | 60 +++++++++----------
 .../Views/Shared/_LayoutSimple.cshtml         |  2 -
 BTCPayServer/wwwroot/main/layout.css          | 10 +---
 3 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/BTCPayServer/Views/Shared/_Footer.cshtml b/BTCPayServer/Views/Shared/_Footer.cshtml
index 8cdc0dfed..202e951c9 100644
--- a/BTCPayServer/Views/Shared/_Footer.cshtml
+++ b/BTCPayServer/Views/Shared/_Footer.cshtml
@@ -2,39 +2,37 @@
 @inject BTCPayServer.Services.BTCPayServerEnvironment _env
 
 <footer class="btcpay-footer">
-    <div class="container">
-        <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row py-2">
-            <div class="d-flex flex-wrap justify-content-center justify-content-xl-start mb-3 mb-xl-0">
-                <a href="https://github.com/btcpayserver/btcpayserver" class="d-flex align-items-center m-3 m-sm-0 me-sm-4" target="_blank" rel="noreferrer noopener">
-                    <vc:icon symbol="github"/>
-                    <span style="margin-left:.4rem">Github</span>
-                </a>
-                <a href="https://chat.btcpayserver.org/" class="d-flex align-items-center m-3 m-sm-0 me-sm-4" target="_blank" rel="noreferrer noopener">
-                    <vc:icon symbol="mattermost"/>
-                    <span style="margin-left:.4rem">Mattermost</span>
-                </a>
-                <a href="https://twitter.com/BtcpayServer" class="d-flex align-items-center m-3 m-sm-0 me-sm-4" target="_blank" rel="noreferrer noopener">
-                    <vc:icon symbol="twitter"/>
-                    <span style="margin-left:.4rem">Twitter</span>
-                </a>
-                <a href="https://t.me/btcpayserver" class="d-flex align-items-center m-3 m-sm-0" target="_blank" rel="noreferrer noopener">
-                    <vc:icon symbol="telegram"/>
-                    <span style="margin-left:.4rem">Telegram</span>
-                </a>
-                @if (!string.IsNullOrEmpty(_env.OnionUrl) && !Context.Request.IsOnion())
-                {
-                    <a href="@_env.OnionUrl" class="d-flex align-items-center m-3 m-sm-0 ms-sm-4" target="_onion" rel="noreferrer noopener" role="button" data-clipboard="@_env.OnionUrl" style="min-width:9em;">
-                        <vc:icon symbol="onion"/>
-                        <span style="margin-left:.4rem" data-clipboard-confirm="Copied URL ✔">Copy Tor URL</span>
-                    </a>
-                }
-            </div>
-            @if (User.Identity.IsAuthenticated)
+    <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row gap-3">
+        <div class="d-flex flex-wrap justify-content-center justify-content-xl-start gap-4">
+            <a href="https://github.com/btcpayserver/btcpayserver" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
+                <vc:icon symbol="github"/>
+                <span style="margin-left:.4rem">Github</span>
+            </a>
+            <a href="https://chat.btcpayserver.org/" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
+                <vc:icon symbol="mattermost"/>
+                <span style="margin-left:.4rem">Mattermost</span>
+            </a>
+            <a href="https://twitter.com/BtcpayServer" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
+                <vc:icon symbol="twitter"/>
+                <span style="margin-left:.4rem">Twitter</span>
+            </a>
+            <a href="https://t.me/btcpayserver" class="d-flex align-items-center" target="_blank" rel="noreferrer noopener">
+                <vc:icon symbol="telegram"/>
+                <span style="margin-left:.4rem">Telegram</span>
+            </a>
+            @if (!string.IsNullOrEmpty(_env.OnionUrl) && !Context.Request.IsOnion())
             {
-                <div class="text-center">
-                    @_env.ToString()
-                </div>
+                <a href="@_env.OnionUrl" class="d-flex align-items-center" target="_onion" rel="noreferrer noopener" role="button" data-clipboard="@_env.OnionUrl" style="min-width:9em;">
+                    <vc:icon symbol="onion"/>
+                    <span style="margin-left:.4rem" data-clipboard-confirm="Copied URL ✔">Copy Tor URL</span>
+                </a>
             }
         </div>
+        @if (User.Identity.IsAuthenticated)
+        {
+            <div class="text-center">
+                @_env.ToString()
+            </div>
+        }
     </div>
 </footer>
diff --git a/BTCPayServer/Views/Shared/_LayoutSimple.cshtml b/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
index 64bd31165..cfc72a214 100644
--- a/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
+++ b/BTCPayServer/Views/Shared/_LayoutSimple.cshtml
@@ -8,10 +8,8 @@
     <partial name="LayoutHead" />
     @await RenderSectionAsync("PageHeadContent", false)
     <style>
-        .btcpay-footer { max-width: 600px; margin-left: auto; margin-right: auto; }
         .btcpay-footer .flex-xl-row { flex-direction: column !important; }
         .btcpay-footer .justify-content-xl-start { justify-content: center !important; }
-        .btcpay-footer .mb-xl-0 { margin-bottom: 0.5rem !important; }
     </style>
 </head>
 <body class="d-flex flex-column min-vh-100">
diff --git a/BTCPayServer/wwwroot/main/layout.css b/BTCPayServer/wwwroot/main/layout.css
index 4ce843790..4fede3e69 100644
--- a/BTCPayServer/wwwroot/main/layout.css
+++ b/BTCPayServer/wwwroot/main/layout.css
@@ -372,7 +372,7 @@
 .btcpay-footer {
     font-size: var(--btcpay-font-size-s);
     overflow: hidden;
-    padding: .5em 0;
+    padding: 0 var(--content-padding-horizontal) 1rem;
     color: var(--btcpay-footer-text);
     background: var(--btcpay-footer-bg);
 }
@@ -613,16 +613,10 @@
         max-width: calc(100vw - var(--sidebar-width) - (2 * var(--btcpay-space-xl)) - 1rem); /* 1rem for scrollbar */
     }
 
-    #mainContent > section,
-    .btcpay-footer > .container {
+    #mainContent > section {
         margin: 0;
         max-width: none;
     }
-    
-    .btcpay-footer {
-        padding-left: var(--btcpay-space-xl);
-        padding-right: var(--btcpay-space-xl);
-    }
 
     #SectionNav .nav {
         margin-top: calc(var(--btcpay-space-m) * -1);