ahri-cloud-projects/btcpayserver
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile header improvements

Browse Source 
- Moves the menu button to the left, besides the logo
- Improves width and text display of the store selector
 
Closes  #3826.
This commit is contained in:
Dennis Reimann
2022-06-07 13:45:23 +02:00
committed by Andrew Camilleri
parent fdf6f68624
commit eb65949b69
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
BTCPayServer/Views/Shared/_Layout.cshtml
View File

@@ -28,14 +28,14 @@
<body class="d-flex flex-column flex-lg-row min-vh-100">
<header id="mainMenu" class="btcpay-header d-flex flex-column">
<div id="mainMenuHead">
<button id="mainMenuToggle" class="mainMenuButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
</button>
<vc:store-selector />
@if (_signInManager.IsSignedIn(User))
{
<vc:notifications appearance="Dropdown" return-url="@notificationsReturnUrl" />
}
<button id="mainMenuToggle" class="mainMenuButton" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
</button>
</div>
<vc:main-nav />
</header>

32
BTCPayServer/wwwroot/main/layout.css
View File

@@ -128,6 +128,7 @@
display: flex;
align-items: center;
z-index: 2000;
flex: 1;
}
#StoreSelector hr {
@@ -142,8 +143,6 @@
#StoreSelectorToggle {
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
color: var(--btcpay-header-link);
}
@@ -157,12 +156,19 @@
transition: color 0.15s ease-in-out;
}
#StoreSelectorToggle .icon.icon-store {
margin-right: var(--btcpay-space-s);
}
#StoreSelectorToggle .icon.icon-caret-down {
margin-left: auto;
color: var(--btcpay-body-text-muted);
}
#StoreSelectorToggle span {
margin: 0 auto 0 var(--btcpay-space-s);
margin-right: var(--btcpay-space-xs);
overflow: hidden;
text-overflow: ellipsis;
}
#StoreSelectorToggle:hover,
@@ -436,10 +442,7 @@
#StoreSelector {
margin: 0 auto;
}
#StoreSelectorDropdown {
max-width: 40vw;
max-width: 60vw;
}
#Notifications {
@@ -452,8 +455,8 @@
--transition-duration: var(--btcpay-transition-duration-fast);
flex: 0 0 var(--button-width);
margin-right: calc(var(--button-padding) * -1);
margin-left: var(--btcpay-space-s);
margin-right: var(--btcpay-space-s);
margin-left: calc(var(--button-padding) * -1);
}
#mainMenuToggle span {
@@ -626,3 +629,14 @@
margin-bottom: calc(var(--border-size) * -1);
}
}
@media (max-width: 449px) {
#StoreSelector {
max-width: 40vw;
flex-shrink: 1;
}
#StoreSelectorToggle .icon.icon-store {
display: none;
}
}