Mark unread notifs with the red line, make read notifs base01 again, center the heading text and move the button to the right of the panel.

This commit is contained in:
shpuld 2017-02-24 18:53:53 +02:00
parent 9dfcf8a301
commit 2bfd2190a0
2 changed files with 60 additions and 41 deletions

View file

@ -1,13 +1,28 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.notifications button { .notifications {
min-height: 20px;
} .panel-heading {
.notification { // force the text to stay centered, while keeping
// the button in the right side of the panel heading
position: relative;
button {
position: absolute;
padding: 0.1em 0.3em 0.25em 0.3em;
right: 0.6em;
}
}
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
}
.notification {
padding: 0.4em 0 0 0.7em; padding: 0.4em 0 0 0.7em;
display: flex; display: flex;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
.text { .text {
min-width: 0px; min-width: 0px;
word-wrap: break-word; word-wrap: break-word;
@ -46,4 +61,5 @@
&:last-child { &:last-child {
border: none border: none
} }
}
} }

View file

@ -1,9 +1,12 @@
<template> <template>
<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">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div> <div class="panel-heading base01-background base04">
Notifications ({{unseenCount}})
<button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
</div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'> <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url"> <a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original"> <img class='avatar' :src="notification.action.user.profile_image_url_original">
</a> </a>