commit: 55c481808477fdbc4c56edf22e27336b5e27d3fb
parent: 024b9ca724c90f8ab9ed573a553349e4002b7b95
Author: lambda <pleromagit@rogerbraun.net>
Date: Mon, 13 Nov 2017 18:17:50 +0000
Merge branch 'fix/scrollbar-for-taller-posts' into 'develop'
Better handling of taller posts
Closes #40
See merge request pleroma/pleroma-fe!158
Diffstat:
4 files changed, 33 insertions(+), 2 deletions(-)
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -23,6 +23,11 @@ const Notifications = {
},
unseenCount () {
return this.unseenNotifications.length
+ },
+ hiderStyle () {
+ return {
+ background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
+ }
}
},
components: {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -44,6 +44,8 @@
min-width: 0px;
word-wrap: break-word;
line-height:18px;
+ position: relative;
+ overflow: hidden;
.icon-retweet.lit {
color: $green;
@@ -57,6 +59,11 @@
color: $blue;
}
+ .status-content {
+ margin: 0;
+ max-height: 300px;
+ }
+
h1 {
word-break: break-all;
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 {
border-left: 4px solid rgba(255, 16, 8, 0.75);
padding-left: 6px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -20,7 +20,8 @@
<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>
</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 v-if="notification.type === 'repeat'">
<h1>
@@ -28,7 +29,8 @@
<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>
</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 v-if="notification.type === 'mention'">
<h1>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -241,6 +241,10 @@
.status-content {
margin: 3px 15px 4px 0;
+ max-height: 400px;
+ overflow-y: auto;
+ overflow-x: hidden;
+
img, video {
max-width: 100%;
max-height: 400px;