AkkomaGang
/
akkoma-fe
4
13
Fork 56
Code Issues 76 Pull Requests 18 Projects Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/notifications/notifications.scss
View File

@ -1,49 +1,65 @@
@import '../../_variables.scss';
.notifications button {
min-height: 20px;
}
.notification {
padding: 0.4em 0 0 0.7em;
display: flex;
border-bottom: 1px solid silver;
.notifications {
.text {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
.icon-retweet {
color: $green;
}
.icon-reply {
color: $blue;
}
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
.panel-heading {
// 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;
}
}
.avatar {
padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
.unseen {
border-left: 4px solid rgba(255, 48, 16, 0.65);
}
&:last-child {
border: none
.notification {
padding: 0.4em 0 0 0.7em;
display: flex;
border-bottom: 1px solid silver;
.text {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
.icon-retweet {
color: $green;
}
.icon-reply {
color: $blue;
}
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
}
}
.avatar {
padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
}
&:last-child {
border: none
}
}
}

7
src/components/notifications/notifications.vue
View File

@ -1,9 +1,12 @@
<template>
<div class="notifications">
<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 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">
<img class='avatar' :src="notification.action.user.profile_image_url_original">
</a>