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

fix notification unseen display rendering underneath the highlight

Browse source
This commit is contained in:
Henry Jameson 2018-11-21 03:52:12 +03:00
parent aa93664fd6
commit c3d8ff65bd
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/notifications/notifications.scss
View file

@ -26,10 +26,23 @@
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
.unseen { .notification {
position: relative;
.notification-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&.unseen {
.notification-overlay {
background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px) background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
} }
}
}
} }
.notification { .notification {

1
src/components/notifications/notifications.vue
View file

@ -13,6 +13,7 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'> <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
<div class="notification-overlay"></div>
<notification :notification="notification"></notification> <notification :notification="notification"></notification>
</div> </div>
</div> </div>