hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

badge, alert(dot) improvements

Browse source
This commit is contained in:
Henry Jameson 2024-02-16 00:29:16 +02:00
commit 7c77809ff9
14 changed files with 44 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/mobile_nav/mobile_nav.vue
View file

@ -20,7 +20,7 @@
/>
<div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
class="badge alert-dot"
class="badge -dot -notification"
/>
</button>
<NavigationPins class="pins" />
@ -37,14 +37,14 @@
/>
<div
v-if="unseenNotificationsCount"
class="badge alert-dot"
class="badge -dot -notification"
/>
</button>
</div>
</nav>
<aside
v-if="currentUser"
class="mobile-notifications-drawer"
class="panel mobile-notifications-drawer"
:class="{ '-closed': !notificationsOpen }"
@touchstart.stop="notificationsTouchStart"
@touchmove.stop="notificationsTouchMove"
@ -54,7 +54,7 @@
{{ $t('notifications.notifications') }}
<span
v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count"
class="badge -notification unseen-count"
>{{ unseenCountBadgeText }}</span>
</span>
<span class="spacer" />
@ -165,19 +165,6 @@
display: flex;
}
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
}
.mobile-notifications-drawer {
width: 100%;
height: 100vh;
@ -238,10 +225,6 @@
height: calc(100vh - var(--navbar-height));
overflow-x: hidden;
overflow-y: scroll;
color: $fallback--text;
color: var(--text, $fallback--text);
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
.notifications {
padding: 0;