chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-13 09:15:47 +02:00
Code

Redesign favorite/retweet notifications to be more compact and show full text

Browse Source
This commit is contained in:
chylex 2018-02-10 13:09:09 +01:00
parent 2282a9df28
commit fe601aed41
3 changed files with 41 additions and 7 deletions
Resources/Scripts
code.js
styles
browser.cssnotification.css

5
Resources/Scripts/code.js
View File

@ -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

22
Resources/Scripts/styles/browser.css
View File

@ -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 */
/***********************/

21
Resources/Scripts/styles/notification.css
View File

@ -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 */
/*********/