Give tall notifications either a scrollbar (mentions), or just cap them and use a cool hider (fav/rt).

This commit is contained in:
shpuld 2017-11-13 19:23:43 +02:00
parent e19a617de1
commit a169abcec2
3 changed files with 29 additions and 2 deletions

View file

@ -23,6 +23,11 @@ const Notifications = {
}, },
unseenCount () { unseenCount () {
return this.unseenNotifications.length return this.unseenNotifications.length
},
hiderStyle () {
return {
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
}
} }
}, },
components: { components: {

View file

@ -44,6 +44,8 @@
min-width: 0px; min-width: 0px;
word-wrap: break-word; word-wrap: break-word;
line-height:18px; line-height:18px;
position: relative;
overflow: hidden;
.icon-retweet.lit { .icon-retweet.lit {
color: $green; color: $green;
@ -57,6 +59,11 @@
color: $blue; color: $blue;
} }
.status-content {
margin: 0;
max-height: 300px;
}
h1 { h1 {
word-break: break-all; word-break: break-all;
margin: 0 0 0.3em; margin: 0 0 0.3em;
@ -89,6 +96,19 @@
} }
} }
.notification-content {
max-height: 12em;
overflow-y: hidden;
//text-overflow: ellipsis;
}
.notification-gradient {
position: absolute;
width: 100%;
height: 4em;
margin-top:8em;
}
.unseen { .unseen {
border-left: 4px solid rgba(255, 16, 8, 0.75); border-left: 4px solid rgba(255, 16, 8, 0.75);
padding-left: 6px; padding-left: 6px;

View file

@ -20,7 +20,8 @@
<i class="fa icon-star"></i> <i class="fa icon-star"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1> </h1>
<div v-html="notification.status.statusnet_html"></div> <div class="notification-gradient" :style="hiderStyle"></div>
<div class="notification-content" v-html="notification.status.statusnet_html"></div>
</div> </div>
<div v-if="notification.type === 'repeat'"> <div v-if="notification.type === 'repeat'">
<h1> <h1>
@ -28,7 +29,8 @@
<i class="fa icon-retweet lit"></i> <i class="fa icon-retweet lit"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1> </h1>
<div v-html="notification.status.statusnet_html"></div> <div class="notification-gradient" :style="hiderStyle"></div>
<div class="notification-content" v-html="notification.status.statusnet_html"></div>
</div> </div>
<div v-if="notification.type === 'mention'"> <div v-if="notification.type === 'mention'">
<h1> <h1>