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.
このコミットが含まれているのは:
コミット
2bfd2190a0
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
読み込み中…
新しいイシューから参照