From fe601aed410dc32380f35f91871fc8889e917f83 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Sat, 10 Feb 2018 13:09:09 +0100
Subject: [PATCH] Redesign favorite/retweet notifications to be more compact
and show full text
---
Resources/Scripts/code.js | 5 +++--
Resources/Scripts/styles/browser.css | 22 +++++++++++++++++-----
Resources/Scripts/styles/notification.css | 21 +++++++++++++++++++++
3 files changed, 41 insertions(+), 7 deletions(-)
diff --git a/Resources/Scripts/code.js b/Resources/Scripts/code.js
index eb3cc91e..ff778330 100644
--- a/Resources/Scripts/code.js
+++ b/Resources/Scripts/code.js
@@ -157,7 +157,6 @@
thumbSizeClass: "media-size-medium"
}));
- html.css("border", "0");
html.find("footer").last().remove(); // apparently withTweetActions breaks for certain tweets, nice
html.find(".js-quote-detail").removeClass("is-actionable margin-b--8"); // prevent quoted tweets from changing the cursor and reduce bottom margin
@@ -200,6 +199,9 @@
html.find(".js-user-actions-menu").parent().remove();
html.find(".account-bio").removeClass("padding-t--5").css("padding-top", "2px");
}
+ else if (type.startsWith("favorite") || type.startsWith("retweet")){
+ html.children().first().addClass("td-notification-padded");
+ }
else if (type.includes("list_member")){
html.find(".activity-header").css("margin-top", "2px");
html.find(".avatar").first().css("margin-bottom", "0");
@@ -295,7 +297,6 @@
tags.push("a[data-full-url] { word-break: break-all !important }"); // break long urls
tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
- tags.push(".tweet-context .nbfc { text-overflow: ellipsis !important; white-space: nowrap !important }"); // force ellipsis on long usernames
tags.push(".activity-header.has-source-avatar { margin-bottom: 4px !important }"); // tweak distance between avatar and text
tags.push(".activity-header .tweet-timestamp { line-height: unset !important }"); // fix timestamp position
tags.push(".activity-header .icon-user-filled { vertical-align: sub !important; }"); // fix follow icon position
diff --git a/Resources/Scripts/styles/browser.css b/Resources/Scripts/styles/browser.css
index a9db06c6..8acb94e9 100644
--- a/Resources/Scripts/styles/browser.css
+++ b/Resources/Scripts/styles/browser.css
@@ -94,11 +94,6 @@
/* Tweak notification layout and design */
/****************************************/
-.tweet-context .nbfc {
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
-}
-
.activity-header.has-source-avatar {
margin-bottom: 4px !important
}
@@ -123,6 +118,23 @@ html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
opacity: 0.25;
}
+.stream-item[data-key^="favorite"] .item-img, .stream-item[data-key^="retweet"] .item-img {
+ position: absolute;
+ left: 21px;
+ top: 48px;
+ width: 0 !important;
+}
+
+.stream-item[data-key^="favorite"] .activity-header > .nbfc, .stream-item[data-key^="retweet"] .activity-header > .nbfc {
+ margin-left: 46px;
+ line-height: unset !important;
+}
+
+.stream-item[data-key^="favorite"] .activity-header > .nbfc > .avatar, .stream-item[data-key^="retweet"] .activity-header > .nbfc > .avatar {
+ position: absolute;
+ margin-left: -34px;
+}
+
/***********************/
/* Tweaks for features */
/***********************/
diff --git a/Resources/Scripts/styles/notification.css b/Resources/Scripts/styles/notification.css
index 1c0edcbf..4585ab02 100644
--- a/Resources/Scripts/styles/notification.css
+++ b/Resources/Scripts/styles/notification.css
@@ -38,6 +38,27 @@ body {
vertical-align: -10% !important;
}
+/************************************/
+/* Favorite & retweet notifications */
+/************************************/
+
+.td-notification-padded .item-img {
+ position: absolute;
+ left: 21px;
+ top: 48px;
+ width: 0 !important;
+}
+
+.td-notification-padded .activity-header > .nbfc {
+ margin-left: 46px;
+ line-height: unset !important;
+}
+
+.td-notification-padded .activity-header > .nbfc > .avatar {
+ position: absolute;
+ margin-left: -34px;
+}
+
/*********/
/* Media */
/*********/