From d165c659aa1cf6de50c3c3ca6c5f168715925a6f Mon Sep 17 00:00:00 2001 From: idotj Date: Sat, 23 Sep 2023 19:57:20 +0200 Subject: [PATCH] Improve CSS + date/time tag --- CHANGELOG | 4 ++ src/index.html | 6 +- src/mastodon-timeline.css | 113 ++++++++++++++-------------------- src/mastodon-timeline.js | 93 ++++++++++++++-------------- src/mastodon-timeline.min.css | 2 +- src/mastodon-timeline.min.js | 2 +- 6 files changed, 103 insertions(+), 117 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 831f2a1..6878482 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,7 @@ +v3.9.5 - 23/09/2023 +- Improve CSS class names +- Use "time" tag for date format + v3.9.4 - 21/09/2023 - Add replies, reblog (boosts) and favourites counter diff --git a/src/index.html b/src/index.html index 74718a9..f88eb24 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@ font-family: Arial, Helvetica, sans-serif; } - .dummy-container { + .dummy-wrapper { width: 100%; max-width: 26rem; height: calc(100% - 4rem); @@ -30,8 +30,8 @@ -
-
+
+
diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index ded3a6b..8f6220d 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.9.4 */ +/* Mastodon embed feed timeline v3.9.5 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -27,40 +27,39 @@ html[data-theme="dark"] { } /* Main container */ -.mt-timeline { +.mt-container { height: 100%; overflow-y: auto; position: relative; background: var(--bg-color); scrollbar-color: var(--bg-hover-color) rgba(0, 0, 0, 0.1); } -.mt-timeline a:link, -.mt-timeline a:active, -.mt-timeline a { +.mt-container a:link, +.mt-container a:active, +.mt-container a { text-decoration: none; color: var(--link-color); } -.mt-timeline a:not(.toot-preview-link):hover { +.mt-container a:not(.mt-toot-preview):hover { text-decoration: underline; } -.mt-timeline::-webkit-scrollbar { +.mt-container::-webkit-scrollbar { width: 0.75rem; height: 0.75rem; } -.mt-timeline::-webkit-scrollbar-corner { +.mt-container::-webkit-scrollbar-corner { background: transparent; } -.mt-timeline::-webkit-scrollbar-thumb { +.mt-container::-webkit-scrollbar-thumb { border: 0 var(--content-text); border-radius: 2rem; background: var(--bg-hover-color); } -.mt-timeline::-webkit-scrollbar-track { +.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; white-space: pre-wrap; @@ -94,7 +93,7 @@ html[data-theme="dark"] { } /* User avatar */ -.mt-avatar { +.mt-toot-avatar { width: 3rem; height: 3rem; position: absolute; @@ -103,17 +102,17 @@ html[data-theme="dark"] { border-radius: 0.25rem; overflow: hidden; } -.mt-avatar-image img { +.mt-toot-avatar-image img { width: 100%; height: auto; } -.mt-avatar-image .mt-avatar-boosted { +.mt-toot-avatar-image .mt-toot-avatar-boosted { width: 2.25rem; height: 2.25rem; border-radius: 0.25rem; overflow: hidden; } -.mt-avatar-image .mt-avatar-account { +.mt-toot-avatar-image .mt-toot-avatar-account { width: 1.5rem; height: 1.5rem; top: 1.5rem; @@ -127,47 +126,47 @@ html[data-theme="dark"] { .mt-toot-header { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; margin-bottom: 1rem; } -.mt-user { +.mt-toot-header-user { font-weight: 600; padding-right: 1rem; } -.mt-user > a { +.mt-toot-header-user > a { color: var(--content-text) !important; } -.toot-date { +.mt-toot-header-date { font-size: 0.75rem; text-align: right; } /* Text */ -.toot-text { +.mt-toot-text { margin-bottom: 1rem; color: var(--content-text); } -.toot-text .spoiler-link { +.mt-toot-text .spoiler-btn { display: inline-block; } -.toot-text .spoiler-text-hidden { +.mt-toot-text .spoiler-text-hidden { display: none; } -.toot-text.truncate { +.mt-toot-text.truncate { display: -webkit-box; overflow: hidden; -webkit-line-clamp: var(--text-max-lines); -webkit-box-orient: vertical; } -.toot-text:not(.truncate) .ellipsis::after { +.mt-toot-text:not(.truncate) .ellipsis::after { content: "..."; } -.toot-text blockquote { +.mt-toot-text blockquote { border-left: 0.25rem solid var(--line-gray-color); margin-left: 0; padding-left: 0.5rem; } -.toot-text .custom-emoji { +.mt-toot-text .custom-emoji { height: 1.5rem; min-width: 1.5rem; margin-bottom: -0.25rem; @@ -175,58 +174,42 @@ html[data-theme="dark"] { } /* Poll */ -.toot-poll { +.mt-toot-poll { margin-bottom: 0.25rem; color: var(--content-text); } -.toot-poll ul { +.mt-toot-poll ul { list-style: none; padding: 0; margin: 0; } -.toot-poll ul li { +.mt-toot-poll ul li { font-size: 0.9rem; margin-bottom: 0.5rem; } -.toot-poll ul li:not(:last-child) { +.mt-toot-poll ul li:not(:last-child) { margin-bottom: 0.25rem; } -.toot-poll ul li:before { +.mt-toot-poll ul li:before { content: "◯"; padding-right: 0.5rem; } /* Medias */ -.toot-media { +.mt-toot-media { overflow: hidden; margin-bottom: 1rem; } -.toot-media-preview { - position: relative; - margin-top: 0.25rem; - height: auto; - text-align: center; - width: 100%; -} -.toot-media > .spoiler-link { +.mt-toot-media > .spoiler-btn { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); } -.toot-media-spoiler > img { +.mt-toot-media-spoiler > img { filter: blur(2rem); } -.toot-media-preview a { - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - .img-ratio14_7 { position: relative; padding-top: 56.95%; @@ -243,7 +226,7 @@ html[data-theme="dark"] { } /* Preview link */ -.toot-preview-link { +.mt-toot-preview { min-height: 4rem; display: flex; flex-direction: row; @@ -254,23 +237,23 @@ html[data-theme="dark"] { margin: 1rem 0; overflow: hidden; } -.toot-preview-image { +.mt-toot-preview-image { width: 40%; align-self: stretch; } -.toot-preview-image img { +.mt-toot-preview-image img { display: block; width: 100%; height: 100%; object-fit: cover; } -.toot-preview-noImage { +.mt-toot-preview-noImage { width: 40%; font-size: 1.5rem; align-self: center; text-align: center; } -.toot-preview-content { +.mt-toot-preview-content { width: 60%; display: flex; align-self: center; @@ -278,12 +261,12 @@ html[data-theme="dark"] { padding: 0.5rem 1rem; gap: 0.5rem; } -.toot-preview-title { +.mt-toot-preview-title { font-weight: 600; } /* Spoiler button */ -.spoiler-link { +.spoiler-btn { border-radius: 2px; background-color: var(--line-gray-color); border: 0; @@ -298,25 +281,23 @@ html[data-theme="dark"] { } /* Counter bar */ -.mt-counter-bar { +.mt-toot-counter-bar { display: flex; gap: clamp(0.25rem, 1vw, 1.5rem); color: var(--link-color); } - -.mt-counter-replies, -.mt-counter-reblog, -.mt-counter-favorites { +.mt-toot-counter-bar-replies, +.mt-toot-counter-bar-reblog, +.mt-toot-counter-bar-favorites { display: flex; font-size: 0.75rem; gap: 0.25rem; align-items: center; opacity: 0.5; } - -.mt-counter-replies > svg, -.mt-counter-reblog > svg, -.mt-counter-favorites > svg { +.mt-toot-counter-bar-replies > svg, +.mt-toot-counter-bar-reblog > svg, +.mt-toot-counter-bar-favorites > svg { width: 1rem; fill: var(--link-color); } diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index e732f55..d2c4a38 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,5 +1,5 @@ /** - * Mastodon embed feed timeline v3.9.4 + * Mastodon embed feed timeline v3.9.5 * More info at: * https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -166,7 +166,7 @@ MastodonApi.prototype.buildTimeline = async function () { this.INSTANCE_URL + "/" + linkSeeMorePath + - '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + + '" target="_blank" rel="nofollow noopener noreferrer">' + this.LINK_SEE_MORE + "
"; this.mtBodyContainer.parentNode.insertAdjacentHTML( @@ -186,16 +186,13 @@ MastodonApi.prototype.buildTimeline = async function () { e.target.localName == "article" || e.target.offsetParent?.localName == "article" || (e.target.localName == "img" && - e.target.offsetParent.className !== "mt-avatar" && - e.target.offsetParent.className !== "mt-avatar-account") + e.target.offsetParent.className !== "mt-toot-avatar" && + e.target.offsetParent.className !== "mt-toot-avatar-account") ) { openTootURL(e); } // Check if Show More/Less button was clicked - if ( - e.target.localName == "button" && - e.target.className == "spoiler-link" - ) { + if (e.target.localName == "button" && e.target.className == "spoiler-btn") { toogleSpoiler(e); } }); @@ -216,7 +213,7 @@ MastodonApi.prototype.buildTimeline = async function () { e.target.localName !== "a" && e.target.localName !== "span" && e.target.localName !== "button" && - e.target.parentNode.className !== "toot-preview-image" && + e.target.parentNode.className !== "mt-toot-preview-image" && urlToot ) { window.open(urlToot, "_blank"); @@ -230,7 +227,7 @@ MastodonApi.prototype.buildTimeline = async function () { const toogleSpoiler = function (e) { const nextSibling = e.target.nextSibling; if (nextSibling.localName === "img") { - e.target.parentNode.classList.remove("toot-media-spoiler"); + e.target.parentNode.classList.remove("mt-toot-media-spoiler"); e.target.style.display = "none"; } else if ( nextSibling.classList.contains("spoiler-text-hidden") || @@ -338,7 +335,7 @@ MastodonApi.prototype.getTimelineData = async function () { return { ...result, ...dataItem }; }, {}); - // console.log("Timeline data: ", this.FETCHED_DATA); + console.log("Timeline data fetched: ", this.FETCHED_DATA); resolve(); }); }); @@ -359,7 +356,7 @@ MastodonApi.prototype.appendToot = function (c, i) { * @param {number} i Index of toot */ MastodonApi.prototype.assambleToot = function (c, i) { - let avatar, user, url, date; + let avatar, user, url, date, formattedDate; if (c.reblog) { // BOOSTED toot @@ -370,16 +367,16 @@ MastodonApi.prototype.assambleToot = function (c, i) { avatar = '' + - '
' + - '
' + + '" class="mt-toot-avatar" rel="nofollow noopener noreferrer" target="_blank">' + + '
' + + '
' + '' + c.reblog.account.username + ' avatar' + "
" + - '