Merge pull request 'for-pi2' (#3) from lisswoma/mastowall:for-pi2 into for-pi2

Reviewed-on: norbert.tretkowski/mastowall#3

script.js

@@ -95,8 +95,10 @@ const fetchPosts = async function(serverUrl, hashtag) {
 
 // updateTimesOnPage updates the time information displayed for each post
 const updateTimesOnPage = function() {
-    $('.card-text a').each(function() {
-        const date = new Date($(this).attr('data-time'));
+    $('.card-text a.time').each(function() {
+        const timeValue = $(this).attr('data-time');
+        if (timeValue === '') return;
+        const date = new Date(timeValue);
         const newTimeAgo = timeAgo(secondsAgo(date));
         $(this).text(newTimeAgo);
     });
@@ -118,7 +120,7 @@ const displayPost = function(post) {
                 ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
                 <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
                 ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
-                <p class="card-text text-right"><small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
+                <p class="card-text text-right"><small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
             </div>
         </div>
     `;
@@ -165,16 +167,25 @@ const updateCarousel = function(slides, posts) {
     var newHTML = ` <!-- No Indicators -->`
     newHTML += `<!-- the slides -->
                 <div class="carousel-inner">
-                `
+                `;
+
+    let existingCards = [];
+
     for( let i = 0; i < posts.length; i++ ) {
         let post = posts[i];
+
+        if (existingCards.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) continue;
+
+        existingCards.push(post.id);
+
         /*console.log( post.content )*/
         if ( i == 0 ) {
-            newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" data-mdb-pause="false">`;
+            newHTML += `<div class="carousel-item active" data-interval="${duration}" data-pause="false">`;
         }
         else {
-            newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" data-mdb-pause="false">`;
+            newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
         }
+        const postContent = DOMPurify.sanitize(post.content);
         newHTML += `
             <div class="card-big">
                 <div class="d-flex align-items-center mb-4">
@@ -183,12 +194,12 @@ const updateCarousel = function(slides, posts) {
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
-                    ${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`}
+                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div>
                     ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
                 </div>
                 <hr>
                 <p class="card-text text-right">
-                    <small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a>
+                    <small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a>
                         ${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' }
                         ${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' }
                         ${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' }
@@ -218,6 +229,11 @@ const showCarousel = function() {
     $('#myCarousel').carousel("cycle");
 }
 
+const strip = function(html) {
+    let doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || "";
+}
+
 const hideCarousel = function() {
     // show popover
     document.getElementById('popover').style.opacity = '0';

styles.css

@@ -50,6 +50,12 @@
   margin-bottom: 1px !important;
 }
 
+.carousel .card-text {
+    font-size: 1.4em;
+    overflow: hidden;
+    max-height: 60vh;
+}
+
 .card {
   font-size: 0.9em;  /* adjust this value to get the desired text size */
 }
@@ -186,10 +192,6 @@ body {
     margin-bottom: 20px !important;
 }
 
-.card-text ~ p {
-    font-size: 1.4em;
-}
-
 .card-img-bottom {
     max-width: 600px;
     max-height: 500px;
@@ -201,6 +203,7 @@ body {
     margin-top: 0px !important;
     margin-bottom: 10px !important;
     align-items: center;
+    float: right;
 }
 
 .text-muted {