From 050222abe1628d602de36fbd6d9108ed7805b438 Mon Sep 17 00:00:00 2001 From: idotj Date: Mon, 17 May 2021 20:13:19 +0200 Subject: [PATCH] Add ellipses to long messages + remove access token --- .gitlab-ci.yml | 22 +-- README.md | 38 ++--- src/index.html | 102 ++++++------ src/mastodon-timeline.css | 329 +++++++++++++++++++------------------- src/mastodon-timeline.js | 2 +- 5 files changed, 246 insertions(+), 247 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index ec73d9b..868bbf9 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,11 +1,11 @@ -image: alpine:latest - -pages: - stage: deploy - script: - - echo 'Nothing to do...' - artifacts: - paths: - - public - only: - - master +image: alpine:latest + +pages: + stage: deploy + script: + - echo 'Nothing to do...' + artifacts: + paths: + - public + only: + - master diff --git a/README.md b/README.md index 26580f7..0d4f9b1 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,19 @@ -# Mastodon embed timeline - -Embed a mastodon feed timeine in your page, with just html, css and js. - -Working version running at: -https://www.idotj.com - -## User guide - - -## Licensing - - -## Improve me - -Feel free to add a chaching layer, improve the styles and add more features. - - - +# Mastodon embed timeline + +Embed a mastodon feed timeine in your page, with just html, css and js. + +Working version running at: +https://www.idotj.com + +## User guide + + +## Licensing + + +## Improve me + +Feel free to add a chaching layer, improve the styles and add more features. + + + diff --git a/src/index.html b/src/index.html index f6f25e6..e66dddf 100644 --- a/src/index.html +++ b/src/index.html @@ -1,52 +1,52 @@ - - - - - Mastodon timeline - - - - - - - - - - -
-
-
- -
-
-
- - - - - - + + + + + Mastodon timeline + + + + + + + + + + +
+
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index f5da693..1487ed4 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,165 +1,164 @@ -/* Mastodon embed timeline */ -/* main container */ -.mt-timeline { - height: calc(100% - 4rem); - padding: 2rem 3rem; - position: relative; - background: lightgray; -} - -.mt-timeline a:link, -.mt-timeline a:active, -.mt-timeline a { - text-decoration: none; - color: darkblue; -} - -.mt-body { - height: 100%; - overflow-y: auto; - white-space: pre-wrap; - word-wrap: break-word; -} - -.mt-body .invisible { - display: none; -} - -/* toots messages */ -.mt-toot { - margin: 0 0.5rem 0 0; - padding: 1rem 0 2rem 65px; - position: relative; - min-height: 60px; - background-color: transparent; - border-bottom: 1px solid #dee2e6; -} - -.mt-toot:hover { - cursor: pointer; - background-color: rgba(124, 124, 124, 0.2); -} - -.mt-toot p:last-child { - margin-bottom: 0; -} - -.mt-user { - display: table; - font-weight: 600; -} - -.mt-avatar { - position: absolute; - top: 20px; - left: 5px; - width: 50px; - height: 50px; - background-color: transparent; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - background-color: #fff; - border-radius: 5px; -} - -.mt-avatar-boosted { - width: 40px; - height: 40px; -} - -.mt-avatar-booster { - width: 25px; - height: 25px; - top: 25px; - left: 25px; -} - -.toot-text { - margin-bottom: 0.25rem; -} - -.mt-error { - color: darkred; - background: lightpink; - margin: 5px; - padding: 10px; -} - -/* poll */ -.toot-poll { - margin-bottom: 0.25rem; -} -.toot-poll ul{ - list-style: none; - padding: 0; - margin: 0; -} -.toot-poll ul li:not(:last-child){ - margin-bottom: 0.25rem; -} -.toot-poll ul li:before { - content: "◯"; - padding-right: 0.5rem; -} - -/* medias */ -.toot-media { - overflow: hidden; - margin-bottom: 0.25rem; -} -.toot-media-preview { - position: relative; - margin-top: 0.25rem; - height: auto; - text-align: center; - width: 100%; -} -.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: 48.95%; /* 14:7 */ -width: 100%; -} -.img-ratio14_7 > img { -width: 100%; -height: auto; -position: absolute; -top: 50%; -left: 50%; -transform: translate(-50%, -50%); -text-align: center; -} - -/* date */ -.toot-date { - font-size: 0.75rem; - opacity: 0.5; -} - -/* loading-spinner */ -.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"); - background-repeat: no-repeat; - background-position: center center; - background-color: transparent; - background-size: min(2.5rem, calc(100% - 0.5rem)); -} - -/* see more btn */ -.mt-seeMore{ - margin: 2rem auto; - padding: 0 2rem; - text-align: center; -} +/* Mastodon embed timeline */ +/* Main container */ +.mt-timeline { + height: calc(100% - 4rem); + padding: 2rem 3rem; + position: relative; + background: lightgray; +} + +.mt-timeline a:link, +.mt-timeline a:active, +.mt-timeline a { + text-decoration: none; + color: darkblue; +} + +.mt-body { + height: 100%; + overflow-y: auto; + white-space: pre-wrap; + word-wrap: break-word; +} + +.mt-body .invisible { + display: none; +} + +/* Toot container */ +.mt-toot { + margin: 0 0.5rem 0 0; + padding: 1rem 0 2rem 65px; + position: relative; + min-height: 60px; + background-color: transparent; + border-bottom: 1px solid #dee2e6; +} +.mt-toot:hover { + cursor: pointer; + background-color: rgba(124, 124, 124, 0.2); +} +.mt-toot p:last-child { + margin-bottom: 0; +} + +/* User icon */ +.mt-user { + display: table; + font-weight: 600; +} +.mt-avatar { + position: absolute; + top: 20px; + left: 5px; + width: 50px; + height: 50px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #fff; + border-radius: 5px; +} +.mt-avatar-boosted { + width: 40px; + height: 40px; +} +.mt-avatar-booster { + width: 25px; + height: 25px; + top: 25px; + left: 25px; +} + +/* Message */ +.toot-text { + margin-bottom: 0.25rem; +} +.toot-text .ellipsis::after{ + content:'...'; +} +.mt-error { + color: darkred; + background: lightpink; + margin: 5px; + padding: 10px; +} + +/* Poll */ +.toot-poll { + margin-bottom: 0.25rem; +} +.toot-poll ul{ + list-style: none; + padding: 0; + margin: 0; +} +.toot-poll ul li:not(:last-child){ + margin-bottom: 0.25rem; +} +.toot-poll ul li:before { + content: "◯"; + padding-right: 0.5rem; +} + +/* Medias */ +.toot-media { + overflow: hidden; + margin-bottom: 0.25rem; +} +.toot-media-preview { + position: relative; + margin-top: 0.25rem; + height: auto; + text-align: center; + width: 100%; +} +.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: 48.95%; /* 14:7 */ +width: 100%; +} +.img-ratio14_7 > img { +width: 100%; +height: auto; +position: absolute; +top: 50%; +left: 50%; +transform: translate(-50%, -50%); +text-align: center; +} + +/* Date */ +.toot-date { + font-size: 0.75rem; + opacity: 0.5; +} + +/* Loading-spinner */ +.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"); + background-repeat: no-repeat; + background-position: center center; + background-color: transparent; + background-size: min(2.5rem, calc(100% - 0.5rem)); +} + +/* See more btn */ +.mt-seeMore{ + margin: 2rem auto; + padding: 0 2rem; + text-align: center; +} diff --git a/src/mastodon-timeline.js b/src/mastodon-timeline.js index 31275d5..73edd1e 100644 --- a/src/mastodon-timeline.js +++ b/src/mastodon-timeline.js @@ -20,7 +20,6 @@ let MastodonApi = function (params_) { // Endpoint access settings this.INSTANCE_URI = params_.instance_uri; - this.ACCESS_TOKEN = params_.access_token; this.ACCOUNT_ID = params_.account_id; this.PROFILE_NAME = params_.profile_name; this.TOOTS_LIMIT = params_.toots_limit || 20; @@ -71,6 +70,7 @@ MastodonApi.prototype.getToots = function () { let allHashtags = document.querySelectorAll("#mt-timeline .hashtag"); for(let j=0; j