Footer: Improve responsive display (#4163)

Enhancement in addition to #4160.
This commit is contained in:
d11n 2022-09-26 10:29:35 +02:00 committed by GitHub
parent 0306635a45
commit 4a5fd08e51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 41 deletions

View file

@ -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>

View file

@ -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">

View file

@ -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);