Merge pull request #2483 from dennisreimann/mobile-unread-count

UI: Fix unread count badge on mobile
This commit is contained in:
Andrew Camilleri 2021-04-21 17:43:12 +02:00 committed by GitHub
commit 9c480580ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 10 deletions

View file

@ -3,17 +3,17 @@
@inject CssThemeManager CssThemeManager
@using BTCPayServer.HostedServices
@using BTCPayServer.Views.Notifications
@using Microsoft.AspNetCore.Http.Extensions
@model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel
@addTagHelper *, BundlerMinifier.TagHelpers
@if (Model.UnseenCount > 0)
{
<li class="nav-item dropdown" id="notifications-nav-item">
<a class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
<span class="d-lg-none d-sm-block">Notifications</span><i class="fa fa-bell d-lg-inline-block d-none"></i>
<a class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(NotificationsNavPages))" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
<span class="d-inline-block d-lg-none">Notifications</span>
<i class="fa fa-bell d-lg-inline-block d-none"></i>
<span class="notification-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
</a>
<span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
<div class="dropdown-menu dropdown-menu-right text-center notification-dropdown" aria-labelledby="navbarDropdown">
<div class="d-flex align-items-center justify-content-between py-3 px-4 border-bottom border-light">
<h5 class="m-0">Notifications</h5>

View file

@ -225,12 +225,6 @@ pre {
color: inherit;
}
.alerts-badge {
position: absolute;
margin-top: -36px;
margin-left: 16px;
}
.alert hr {
display: block;
width: unset;
@ -252,6 +246,14 @@ pre {
}
}
@media (min-width: 992px) {
.notification-badge {
position: relative;
top: -10px;
left: -10px;
}
}
.btn-outline-onion {
background-image: none;
background-color: transparent;