mirror of
https://github.com/aljazceru/btcpayserver.git
synced 2026-02-22 06:34:36 +01:00
Improve offcanvas nav animation
This commit is contained in:
Dennis Reimann
committed by
Andrew Camilleri
Andrew Camilleri
parent
5372058c33
commit
2fe1ab83f5
@@ -51,69 +51,71 @@
|
||||
<div class="container">
|
||||
@* Logo on Mobile *@
|
||||
@{ await Logo("d-lg-none"); }
|
||||
<button class="navbar-toggler navbar-toggler-right border-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler navbar-toggler-right border-0 shadow-none p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg class="navbar-toggler-icon" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||||
</button>
|
||||
<div id="navbarResponsive" class="offcanvas offcanvas-start border-0">
|
||||
<div class="offcanvas-header">
|
||||
<div class="offcanvas-title" id="offcanvasLabel">
|
||||
@* Logo in Offcanvas *@
|
||||
@{ await Logo(); }
|
||||
<div id="navbarResponsive" class="offcanvas offcanvas-fade border-0" data-bs-scroll="true" tabindex="-1">
|
||||
<div class="container">
|
||||
<div class="offcanvas-header">
|
||||
<div class="offcanvas-title" id="offcanvasLabel">
|
||||
@* Logo in Offcanvas *@
|
||||
@{ await Logo(); }
|
||||
</div>
|
||||
<button type="button" class="btn-close shadow-none m-0" data-bs-dismiss="offcanvas" aria-label="Close" style="padding:.8125rem;">
|
||||
<vc:icon symbol="close"/>
|
||||
</button>
|
||||
</div>
|
||||
<button type="button" class="btn-close shadow-none me-1" data-bs-dismiss="offcanvas" aria-label="Close">
|
||||
<vc:icon symbol="close" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="offcanvas-body d-lg-flex w-100 align-items-center justify-content-between">
|
||||
@* Logo on Desktop *@
|
||||
@{ await Logo("d-none d-lg-inline-block"); }
|
||||
@if (SignInManager.IsSignedIn(User))
|
||||
{
|
||||
<ul class="navbar-nav">
|
||||
@if (User.IsInRole(Roles.ServerAdmin))
|
||||
{
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ServerNavPages))" id="ServerSettings">Server settings</a></li>
|
||||
}
|
||||
<li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(StoreNavPages))" id="Stores">Stores</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(AppsNavPages))" id="Apps">Apps</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages))" id="Wallets">Wallets</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="Invoices">Invoices</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="PaymentRequests">Payment Requests</a></li>
|
||||
<vc:ui-extension-point location="header-nav"/>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
<vc:notifications-dropdown/>
|
||||
@if (!theme.CustomTheme)
|
||||
{
|
||||
<div class="offcanvas-body d-lg-flex w-100 align-items-center justify-content-between">
|
||||
@* Logo on Desktop *@
|
||||
@{ await Logo("d-none d-lg-inline-block"); }
|
||||
@if (SignInManager.IsSignedIn(User))
|
||||
{
|
||||
<ul class="navbar-nav">
|
||||
@if (User.IsInRole(Roles.ServerAdmin))
|
||||
{
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ServerNavPages))" id="ServerSettings">Server settings</a></li>
|
||||
}
|
||||
<li class="nav-item"><a asp-area="" asp-controller="UserStores" asp-action="ListStores" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(StoreNavPages))" id="Stores">Stores</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Apps" asp-action="ListApps" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(AppsNavPages))" id="Apps">Apps</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Wallets" asp-action="ListWallets" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages))" id="Wallets">Wallets</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Invoice" asp-action="ListInvoices" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(InvoiceNavPages))" id="Invoices">Invoices</a></li>
|
||||
<li class="nav-item"><a asp-area="" asp-controller="PaymentRequest" asp-action="GetPaymentRequests" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="PaymentRequests">Payment Requests</a></li>
|
||||
<vc:ui-extension-point location="header-nav"/>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<button class="btcpay-theme-switch nav-link">
|
||||
<span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
|
||||
<svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
|
||||
<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
|
||||
<path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
}
|
||||
<li class="nav-item">
|
||||
<a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><span class="d-lg-none d-sm-block">Logout</span><i class="fa fa-sign-out d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
else if (Env.IsSecure)
|
||||
{
|
||||
<ul class="navbar-nav">
|
||||
@if (!(await SettingsRepository.GetPolicies()).LockSubscription)
|
||||
{
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Register" class="nav-link js-scroll-trigger" id="Register">Register</a></li>
|
||||
}
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Login" class="nav-link js-scroll-trigger" id="Login">Log in</a></li>
|
||||
<vc:ui-extension-point location="header-nav"/>
|
||||
</ul>
|
||||
}
|
||||
<vc:notifications-dropdown/>
|
||||
@if (!theme.CustomTheme)
|
||||
{
|
||||
<li class="nav-item">
|
||||
<button class="btcpay-theme-switch nav-link">
|
||||
<span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
|
||||
<svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
|
||||
<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
|
||||
<path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
<li class="nav-item">
|
||||
<a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><span class="d-lg-none d-sm-block">Logout</span><i class="fa fa-sign-out d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
else if (Env.IsSecure)
|
||||
{
|
||||
<ul class="navbar-nav">
|
||||
@if (!(await SettingsRepository.GetPolicies()).LockSubscription)
|
||||
{
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Register" class="nav-link js-scroll-trigger" id="Register">Register</a></li>
|
||||
}
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Account" asp-action="Login" class="nav-link js-scroll-trigger" id="Login">Log in</a></li>
|
||||
<vc:ui-extension-point location="header-nav"/>
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="badUrl" class="alert alert-danger alert-dismissible" style="display:none; position:absolute; top:75px;" role="alert">
|
||||
|
||||
@@ -6073,7 +6073,7 @@ fieldset:disabled .btn {
|
||||
z-index: 1040;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--btcpay-black);
|
||||
background-color: var(--btcpay-bg-tile);
|
||||
}
|
||||
|
||||
.offcanvas-backdrop.fade {
|
||||
@@ -6081,21 +6081,21 @@ fieldset:disabled .btn {
|
||||
}
|
||||
|
||||
.offcanvas-backdrop.show {
|
||||
opacity: 0.8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.offcanvas-header .btn-close {
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin-top: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
margin-top: -0.25rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
@@ -6105,23 +6105,23 @@ fieldset:disabled .btn {
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: 1rem 1rem;
|
||||
padding: 0.5rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
border-right: 1px solid var(--btcpay-body-border-medium);
|
||||
width: 100vw;
|
||||
border-right: 0 solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
border-left: 1px solid var(--btcpay-body-border-medium);
|
||||
width: 100vw;
|
||||
border-left: 0 solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@@ -6129,18 +6129,18 @@ fieldset:disabled .btn {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30vh;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
border-bottom: 1px solid var(--btcpay-body-border-medium);
|
||||
border-bottom: 0 solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.offcanvas-bottom {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30vh;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
border-top: 1px solid var(--btcpay-body-border-medium);
|
||||
border-top: 0 solid rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
@@ -9831,12 +9831,16 @@ code {
|
||||
|
||||
pre {
|
||||
border-radius: var(--btcpay-border-radius);
|
||||
}
|
||||
|
||||
pre,
|
||||
pre code {
|
||||
background: var(--btcpay-pre-bg);
|
||||
}
|
||||
|
||||
pre code {
|
||||
pre.text-wrap,
|
||||
pre:not(.text-wrap) code {
|
||||
padding: var(--btcpay-space-m) !important;
|
||||
background: var(--btcpay-pre-bg);
|
||||
}
|
||||
|
||||
ol {
|
||||
|
||||
@@ -72,13 +72,6 @@ hr.light {
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
@media (max-width: 991px) {
|
||||
.offcanvas-body {
|
||||
color: var(--btcpay-body-text);
|
||||
background: var(--btcpay-body-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.offcanvas-header,
|
||||
.offcanvas-body {
|
||||
@@ -87,7 +80,35 @@ hr.light {
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-header,
|
||||
@media (max-width: 991px) {
|
||||
.offcanvas-header {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-fade {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.offcanvas-fade .offcanvas-header {
|
||||
background-color: var(--btcpay-header-bg);
|
||||
}
|
||||
|
||||
.offcanvas-fade .offcanvas-body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s linear, transform 0.15s linear;
|
||||
}
|
||||
|
||||
.offcanvas-fade.show .offcanvas-body {
|
||||
opacity: 1;
|
||||
transform: translate(0, .5rem);
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
color: var(--btcpay-header-text);
|
||||
background: var(--btcpay-header-bg);
|
||||
|
||||
Reference in New Issue
Block a user