diff --git a/CHANGELOG b/CHANGELOG index cdc5528..ce6c475 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,9 @@ +v3.3.0 - 01/03/2023 +- Simplify timeline container CSS +- Fix WCAG conflict with role=feed +- Open @mention link in a new tab/window +- Add scroll-bar styles (webkit) + v3.2.9 - 21/02/2023 - Add dark theme - Fix click on images diff --git a/src/index.html b/src/index.html index f05442e..58d791f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,35 +1,37 @@ + Mastodon embed timeline - - - + + + @@ -41,10 +43,9 @@ - + - \ No newline at end of file diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index a5d7696..e88a49a 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,4 +1,4 @@ -/* Mastodon embed feed timeline v3.2.9 */ +/* Mastodon embed feed timeline v3.3.0 */ /* More info at: */ /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ @@ -28,8 +28,8 @@ html[data-theme="dark"] { /* Main container */ .mt-timeline { - height: calc(100% - 2rem); - padding: 1rem 0.5rem 1rem 1.5rem; + height: 100%; + overflow-y: auto; position: relative; background: var(--bg-color); } @@ -44,11 +44,9 @@ html[data-theme="dark"] { } .mt-body { - height: 100%; - overflow-y: auto; + padding: 1rem 1.5rem; white-space: pre-wrap; word-wrap: break-word; - padding-right: 0.5rem; } .mt-body .invisible { font-size: 0; @@ -59,9 +57,34 @@ html[data-theme="dark"] { position: absolute; } +/* Scroll bar */ +html{ + scrollbar-color: var(--bg-hover-color) rgba(0, 0, 0, 0.1); +} +::-webkit-scrollbar { + width: 0.75rem; + height: 0.75rem; +} +::-webkit-scrollbar-corner { + background: transparent; +} +::-webkit-scrollbar-thumb { + border-radius: 0; +} +::-webkit-scrollbar-thumb { + border: 0 var(--content-text); + border-radius: 2rem; + background: var(--bg-hover-color); +} +::-webkit-scrollbar-track { + border: 0 var(--content-text); + border-radius: 0; + background: rgba(0, 0, 0, 0.1); +} + /* Toot container */ .mt-toot { - margin: 0.25rem 0.5rem 0.25rem 0.25rem; + margin: 0.25rem; padding: 1rem 0.5rem 2rem 4rem; position: relative; min-height: 3.75rem; @@ -142,9 +165,11 @@ html[data-theme="dark"] { } .mt-error { + position: absolute; display: flex; flex-direction: column; - height: 100%; + height: calc(100% - 3.5rem); + width: calc(100% - 4.5rem); justify-content: center; align-items: center; color: var(--error-text-color); @@ -220,6 +245,14 @@ html[data-theme="dark"] { } /* Loading-spinner */ +.mt-body > .loading-spinner { + position: absolute; + width: 3rem; + height: 3rem; + margin: auto; + top: calc(50% - 1.5rem); + right: calc(50% - 1.5rem); +} .loading-spinner { height: 100%; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"); @@ -229,9 +262,9 @@ html[data-theme="dark"] { background-size: min(2.5rem, calc(100% - 0.5rem)); } -/* See more btn */ -.mt-seeMore { - margin: 2rem auto; +/* Footer (See more link) */ +.mt-footer { + margin: 1rem auto 2rem auto; padding: 0 2rem; text-align: center; } diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index 61c486c..1a2fc13 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -1,4 +1,4 @@ -// Mastodon embed feed timeline v3.2.9 +// Mastodon embed feed timeline v3.3.0 // More info at: // https://gitlab.com/idotj/mastodon-embed-feed-timeline @@ -117,26 +117,27 @@ MastodonApi.prototype.getToots = function () { } } - // Add target="_blank" to all hashtags - let allHashtags = document.querySelectorAll("#mt-body .hashtag"); - for (let j = 0; j < allHashtags.length; j++) { - allHashtags[j].target = "_blank"; - allHashtags[j].rel = "tag nofollow noopener noreferrer"; + // Add target="_blank" to all #hashtags and @mentions + let linksToBlank = document.querySelectorAll('#mt-body .hashtag, .u-url.mention'); + for (let j = 0; j < linksToBlank.length; j++) { + linksToBlank[j].target = '_blank'; + linksToBlank[j].hasAttribute('rel', 'tag') ? linksToBlank[j].setAttribute('rel', 'tag nofollow noopener noreferrer') : linksToBlank[j].setAttribute('rel', 'nofollow noopener noreferrer'); } // Insert link after last toot to visit Mastodon page if (mapi.LINK_SEE_MORE) { let linkHtml = ''; if (this.USER_ID) { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; + linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; } else { - linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; + linkHtml = '
' + mapi.LINK_SEE_MORE + '
'; } - this.mtBodyContainer.insertAdjacentHTML('beforeend', linkHtml); + this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml); } }) .catch(err => { this.mtBodyContainer.innerHTML = '
✖️
Request Failed:
' + err + '
'; + this.mtBodyContainer.setAttribute('role', 'none'); }); // Inner function to add each toot content in container