eris/pleroma-fe
1
1
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Put the number of notifications inside a red circle (kinda like qvitter and everyone else does), make the red notification line slightly less transparent.

Browse source
This commit is contained in:
shpuld 2017-03-07 15:55:00 +02:00
parent e64a5beb35
commit 58fdf9e70d
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

@ -13,6 +13,19 @@
} }
} }
.unseen-count {
display: inline-block;
background-color: rgba(255, 16, 8, 0.8);
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
min-width: 1.3em;
border-radius: 1.3em;
margin: 0 0.2em 0 -0.4em;
color: white;
font-size: 0.9em;
text-align: center;
line-height: 1.3em;
}
.notification { .notification {
// Will have to use pixels here to ensure consistent distance with // Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em, // pad alone and pad + border, browsers bad at rounding this with em,
@ -64,7 +77,7 @@
} }
.unseen { .unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65); border-left: 4px solid rgba(255, 16, 8, 0.75);
padding-left: 6px; padding-left: 6px;
} }
} }

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

@ -2,7 +2,8 @@
<div class="notifications"> <div class="notifications">
<div class="panel panel-default base00-background"> <div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04"> <div class="panel-heading base01-background base04">
Notifications ({{unseenCount}}) <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
Notifications
<button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button> <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
</div> </div>
<div class="panel-body"> <div class="panel-body">