From e19a617de1c2b3102291d885be5d08bf9388ccbc Mon Sep 17 00:00:00 2001 From: shpuld Date: Mon, 13 Nov 2017 18:39:27 +0200 Subject: [PATCH 1/2] Add a scrollbar for tall spammy posts. --- src/components/status/status.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 84397bfa..6ebc36e9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -190,6 +190,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; From a169abcec25a85e0104cd00ef0db10939ef5d6fc Mon Sep 17 00:00:00 2001 From: shpuld Date: Mon, 13 Nov 2017 19:23:43 +0200 Subject: [PATCH 2/2] Give tall notifications either a scrollbar (mentions), or just cap them and use a cool hider (fav/rt). --- src/components/notifications/notifications.js | 5 +++++ .../notifications/notifications.scss | 20 +++++++++++++++++++ .../notifications/notifications.vue | 6 ++++-- 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index c0c86c68..5f0d7f26 100644 --- 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 index 84dd36fa..db7b0843 100644 --- 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 index dfc7b0c9..1e5f6975 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -20,7 +20,8 @@ -
+
+

@@ -28,7 +29,8 @@

-
+
+