From 752f06f68ffdc444302915d3fad18cc07d152303 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt-Bilkenroth <ssb@mac.com>
Date: Thu, 16 Nov 2023 12:18:48 +0100
Subject: [PATCH] some fixes

---
 index.html | 4 ++--
 script.js  | 5 +++--
 styles.css | 7 ++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 88b522b..d144bab 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,8 @@
     <link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
 
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
diff --git a/script.js b/script.js
index 2368aec..9c51f2f 100644
--- a/script.js
+++ b/script.js
@@ -125,6 +125,7 @@ const updateCarousel = function(slides, posts) {
                 `
     for( let i = 0; i < posts.length; i++ ) {
         let post = posts[i];
+        console.log( post.content )
         if ( i == 0 ) {
             newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
         }
@@ -140,10 +141,10 @@ const updateCarousel = function(slides, posts) {
                 <hr>
                 <div class="row align-items-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>`}
-                    ${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </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></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>, <b>${post.favourites_count}</b> favorisiert, <b>${post.replies_count}</b> Antworten, <b>${post.reblogs_count}</b> geteilt</small></p>
             </div>
         `;
         newHTML += '</div>';
diff --git a/styles.css b/styles.css
index 48107ef..e3aa32c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,5 @@
+@charset "utf-8";
+
 /* Add some custom CSS for the cards */
 .card {
   margin-bottom: 20px;
@@ -182,10 +184,14 @@ body {
 .card-img-bottom {
     max-width: 600px;
     max-height: 500px;
+    width: auto;
+    text-align: center;
+    aspect-ratio: auto !important;
     border-top-left-radius: calc(.25rem - 1px);
     border-top-right-radius:calc(.25rem - 1px);
     margin-top: 0px !important;
     margin-bottom: 10px !important;
+    align-items: center;
 }
 
 .text-muted {
@@ -193,4 +199,3 @@ body {
     font-size: 0.6em;
     text-align: right;
 }
-