kunjinkao/mastodon-embed-timeline
1
0
Fork 0
forked from mirror/mastodon-embed-timeline
Code Pull Requests Activity

New width for toot-text area + minor fixes

Browse Source
This commit is contained in:
idotj 2023-10-01 17:51:31 +02:00
parent e925cdbb44
commit 66d9798c13
6 changed files with 95 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG
View File

@ -1,3 +1,8 @@
v3.10.0 - 01/10/2023
- Render customized emojis in user name
- Add new styles for scrollbar
- Maximize the width of the toot-text area
v3.9.5 - 23/09/2023
- Improve CSS class names
- Use "time" tag for date format

95
src/mastodon-timeline.css
View File

@ -1,4 +1,4 @@
/* Mastodon embed feed timeline v3.9.5 */
/* Mastodon embed feed timeline v3.10.0 */
/* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
@ -13,6 +13,7 @@ html[data-theme="light"] {
--bg-color: #fff;
--bg-hover-color: #d9e1e8;
--line-gray-color: #c0cdd9;
--contrast-gray-color: #606984;
--content-text: #000;
--link-color: #3a3bff;
--error-text-color: #8b0000;
@ -21,6 +22,7 @@ html[data-theme="dark"] {
--bg-color: #282c37;
--bg-hover-color: #313543;
--line-gray-color: #393f4f;
--contrast-gray-color: #606984;
--content-text: #fff;
--link-color: #8c8dff;
--error-text-color: #fe6c6c;
@ -31,8 +33,32 @@ html[data-theme="dark"] {
height: 100%;
overflow-y: auto;
position: relative;
background: var(--bg-color);
scrollbar-color: var(--bg-hover-color) rgba(0, 0, 0, 0.1);
background-color: var(--bg-color);
scrollbar-color: var(--line-gray-color) var(--bg-color);
scrollbar-width: thin;
}
.mt-container::-webkit-scrollbar {
width: 0.25rem;
height: 0.25rem;
}
.mt-container::-webkit-scrollbar-thumb {
background-color: var(--line-gray-color);
border: none;
border-radius: 3rem;
}
.mt-container::-webkit-scrollbar-thumb:hover,
.mt-container::-webkit-scrollbar-thumb:active {
background-color: var(--line-gray-color);
}
.mt-container::-webkit-scrollbar-track {
background-color: var(--bg-color);
border: none;
border-radius: 0;
}
.mt-container::-webkit-scrollbar-track:hover,
.mt-container::-webkit-scrollbar-track:active,
.mt-container::-webkit-scrollbar-corner {
background-color: var(--bg-color);
}
.mt-container a:link,
.mt-container a:active,
@ -43,25 +69,8 @@ html[data-theme="dark"] {
.mt-container a:not(.mt-toot-preview):hover {
text-decoration: underline;
}
.mt-container::-webkit-scrollbar {
width: 0.75rem;
height: 0.75rem;
}
.mt-container::-webkit-scrollbar-corner {
background: transparent;
}
.mt-container::-webkit-scrollbar-thumb {
border: 0 var(--content-text);
border-radius: 2rem;
background: var(--bg-hover-color);
}
.mt-container::-webkit-scrollbar-track {
border: 0 var(--content-text);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.mt-body {
padding: 1rem 1.5rem;
padding: 1rem clamp(0.25rem, 4vw, 1.5rem);
white-space: pre-wrap;
word-wrap: break-word;
}
@ -77,7 +86,7 @@ html[data-theme="dark"] {
/* Toot container */
.mt-toot {
margin: 0.25rem;
padding: 1rem 0.5rem 1.5rem 4rem;
padding: 1rem 0.5rem 1.5rem 0.5rem;
position: relative;
min-height: 3.75rem;
background-color: transparent;
@ -94,25 +103,26 @@ html[data-theme="dark"] {
/* User avatar */
.mt-toot-avatar {
margin-right: 0.75rem;
}
.mt-toot-avatar-standard {
width: 2.25rem;
height: 2.25rem;
}
.mt-toot-avatar-boosted {
width: 3rem;
height: 3rem;
position: absolute;
top: 1rem;
left: 0.25rem;
border-radius: 0.25rem;
overflow: hidden;
position: relative;
}
.mt-toot-avatar-image img {
width: 100%;
height: auto;
}
.mt-toot-avatar-image .mt-toot-avatar-boosted {
.mt-toot-avatar-image-big img {
aspect-ratio: 1/1;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.25rem;
overflow: hidden;
}
.mt-toot-avatar-image .mt-toot-avatar-account {
.mt-toot-avatar-image-small img {
aspect-ratio: 1/1;
width: 1.5rem;
height: 1.5rem;
top: 1.5rem;
@ -131,14 +141,22 @@ html[data-theme="dark"] {
}
.mt-toot-header-user {
font-weight: 600;
margin-top: 0.5rem;
padding-right: 1rem;
}
.mt-toot-header-user > a {
display: flex;
align-items: flex-start;
color: var(--content-text) !important;
overflow-wrap: anywhere;
}
.mt-toot-header-date {
font-size: 0.75rem;
text-align: right;
margin: 0.5rem 0 0 auto;
}
.mt-toot-header-date > a {
color: var(--contrast-gray-color) !important;
}
/* Text */
@ -166,6 +184,7 @@ html[data-theme="dark"] {
margin-left: 0;
padding-left: 0.5rem;
}
.mt-toot-header-user .custom-emoji,
.mt-toot-text .custom-emoji {
height: 1.5rem;
min-width: 1.5rem;
@ -175,7 +194,7 @@ html[data-theme="dark"] {
/* Poll */
.mt-toot-poll {
margin-bottom: 0.25rem;
margin-bottom: 1rem;
color: var(--content-text);
}
.mt-toot-poll ul {
@ -283,8 +302,10 @@ html[data-theme="dark"] {
/* Counter bar */
.mt-toot-counter-bar {
display: flex;
gap: clamp(0.25rem, 1vw, 1.5rem);
color: var(--link-color);
min-width: 6rem;
max-width: 40rem;
justify-content: space-between;
color: var(--contrast-gray-color);
}
.mt-toot-counter-bar-replies,
.mt-toot-counter-bar-reblog,
@ -299,7 +320,7 @@ html[data-theme="dark"] {
.mt-toot-counter-bar-reblog > svg,
.mt-toot-counter-bar-favorites > svg {
width: 1rem;
fill: var(--link-color);
fill: var(--contrast-gray-color);
}
/* Error */

47
src/mastodon-timeline.js
View File

@ -1,5 +1,5 @@
/**
* Mastodon embed feed timeline v3.9.5
* Mastodon embed feed timeline v3.10.0
* More info at:
* https://gitlab.com/idotj/mastodon-embed-feed-timeline
*/
@ -185,9 +185,7 @@ MastodonApi.prototype.buildTimeline = async function () {
if (
e.target.localName == "article" ||
e.target.offsetParent?.localName == "article" ||
(e.target.localName == "img" &&
e.target.offsetParent.className !== "mt-toot-avatar" &&
e.target.offsetParent.className !== "mt-toot-avatar-account")
e.target.localName == "img"
) {
openTootURL(e);
}
@ -213,6 +211,10 @@ MastodonApi.prototype.buildTimeline = async function () {
e.target.localName !== "a" &&
e.target.localName !== "span" &&
e.target.localName !== "button" &&
e.target.localName !== "time" &&
e.target.className !== "mt-toot-preview-noImage" &&
e.target.parentNode.className !== "mt-toot-avatar-image-big" &&
e.target.parentNode.className !== "mt-toot-avatar-image-small" &&
e.target.parentNode.className !== "mt-toot-preview-image" &&
urlToot
) {
@ -356,7 +358,7 @@ MastodonApi.prototype.appendToot = function (c, i) {
* @param {number} i Index of toot
*/
MastodonApi.prototype.assambleToot = function (c, i) {
let avatar, user, url, date, formattedDate;
let avatar, user, userName, url, date, formattedDate;
if (c.reblog) {
// BOOSTED toot
@ -368,15 +370,15 @@ MastodonApi.prototype.assambleToot = function (c, i) {
'<a href="' +
c.reblog.account.url +
'" class="mt-toot-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
'<div class="mt-toot-avatar-image">' +
'<div class="mt-toot-avatar-boosted">' +
'<div class="mt-toot-avatar-image-big">' +
'<img src="' +
c.reblog.account.avatar +
'" alt="' +
c.reblog.account.username +
' avatar" loading="lazy" />' +
"</div>" +
'<div class="mt-toot-avatar-account">' +
'<div class="mt-toot-avatar-image-small">' +
'<img src="' +
c.account.avatar +
'" alt="' +
@ -387,14 +389,18 @@ MastodonApi.prototype.assambleToot = function (c, i) {
"</a>";
// User name and url
userName = this.showEmojos(
c.reblog.account.display_name
? c.reblog.account.display_name
: c.reblog.account.username,
this.FETCHED_DATA.emojos
);
user =
'<div class="mt-toot-header-user">' +
'<a href="' +
c.reblog.account.url +
'" rel="nofollow noopener noreferrer" target="_blank">' +
(c.reblog.account.display_name
? c.reblog.account.display_name
: c.reblog.account.username) +
userName +
'<span class="visually-hidden"> account</span>' +
"</a>" +
"</div>";
@ -411,22 +417,28 @@ MastodonApi.prototype.assambleToot = function (c, i) {
'<a href="' +
c.account.url +
'" class="mt-toot-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
'<div class="mt-toot-avatar-image">' +
'<div class="mt-toot-avatar-standard">' +
'<div class="mt-toot-avatar-image-big">' +
'<img src="' +
c.account.avatar +
'" alt="' +
c.account.username +
' avatar" loading="lazy" />' +
"</div>" +
"</div>" +
"</a>";
// User name and url
userName = this.showEmojos(
c.account.display_name ? c.account.display_name : c.account.username,
this.FETCHED_DATA.emojos
);
user =
'<div class="mt-toot-header-user">' +
'<a href="' +
c.account.url +
'" rel="nofollow noopener noreferrer" target="_blank">' +
(c.account.display_name ? c.account.display_name : c.account.username) +
userName +
'<span class="visually-hidden"> account</span>' +
"</a>" +
"</div>";
@ -524,9 +536,9 @@ MastodonApi.prototype.assambleToot = function (c, i) {
}
// Preview link
let preview_link = "";
let previewLink = "";
if (!this.HIDE_PREVIEW_LINK && c.card) {
preview_link = this.placePreviewLink(c.card);
previewLink = this.placePreviewLink(c.card);
}
// Poll
@ -536,7 +548,8 @@ MastodonApi.prototype.assambleToot = function (c, i) {
for (let i in c.poll.options) {
pollOption += "<li>" + c.poll.options[i].title + "</li>";
}
poll = '<div class="mt-toot-poll">' + "<ul>" + pollOption + "</ul>" + "</div>";
poll =
'<div class="mt-toot-poll">' + "<ul>" + pollOption + "</ul>" + "</div>";
}
// Counter bar
@ -577,14 +590,14 @@ MastodonApi.prototype.assambleToot = function (c, i) {
'" data-location="' +
url +
'" tabindex="0">' +
avatar +
'<div class="mt-toot-header">' +
avatar +
user +
timestamp +
"</div>" +
content +
media +
preview_link +
previewLink +
poll +
counterBar +
"</article>";

2
src/mastodon-timeline.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/mastodon-timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long

0
src/mastodon-timeline.min.min.css vendored Normal file
View File