Merge branch '3.3.0' into 'master'
3.3.0 See merge request idotj/mastodon-embed-feed-timeline!11
This commit is contained in:
i.j
commit
fd4739d834
@ -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
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mastodon embed timeline</title>
|
||||
@ -13,22 +14,23 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
background: lightslategray;
|
||||
font-size: 16px;
|
||||
font-family: Arial, Helvetica;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.dummy-container {
|
||||
height: calc(100% - 4rem);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 26rem;
|
||||
padding: 2rem;
|
||||
height: calc(100% - 4rem);
|
||||
margin: 2rem auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -44,7 +46,6 @@
|
||||
|
||||
<script src='mastodon-timeline.js'>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
||||
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
||||
} else {
|
||||
linkHtml = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
||||
linkHtml = '<div class="mt-footer"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
|
||||
}
|
||||
this.mtBodyContainer.insertAdjacentHTML('beforeend', linkHtml);
|
||||
this.mtBodyContainer.parentNode.insertAdjacentHTML('beforeend', linkHtml);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.mtBodyContainer.innerHTML = '<div class="mt-error">✖️<br/><strong>Request Failed:</strong><br/>' + err + '</div>';
|
||||
this.mtBodyContainer.setAttribute('role', 'none');
|
||||
});
|
||||
|
||||
// Inner function to add each toot content in container
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user