prepare wall for bdk

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Netzbegrünung Mastowall</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="bootstrap.min.css">
     <link rel="stylesheet" href="styles.css">
     <link rel="apple-touch-icon" href="mastowall-favicon.png">
     <link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
@@ -58,7 +58,7 @@
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
-    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+    <script src="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>
     <script src="script.js"></script>

script.js

@@ -1,6 +1,8 @@
 // The existingPosts array is used to track already displayed posts
 let existingPosts = [];
 
+var cardIterator = 0;
+
 // getUrlParameter helps to fetch URL parameters
 function getUrlParameter(name) {
     name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
@@ -69,19 +71,20 @@ const updateTimesOnPage = function() {
 // displayPost creates and displays a post
 const displayPost = function(post) {
     if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
-
     existingPosts.push(post.id);
 
     let cardHTML = `
-        <div class="col-sm-3">
+        <div class="col-sm-2">
             <div class="card m-2 p-2">
                 <div class="d-flex align-items-center mb-2">
                     <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
                     <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
                 </div>
-                ${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>` : ''}
+                <div class="row">
+                ${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>` : ''}
+               
+                </div>
                 <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>
             </div>
         </div>
@@ -156,6 +159,11 @@ const handleHashtagFormSubmit = function(e, hashtagsArray) {
     window.location.href = newUrl;
 };
 
+// make singe card bigger by switching class
+const toggleSize = function(child,i) {
+    console.log( child )
+}
+
 // On document ready, the script configures Masonry, handles events, fetches and displays posts
 $(document).ready(async function() {
     const defaultServerUrl = await fetchConfig();
@@ -167,7 +175,7 @@ $(document).ready(async function() {
 
     setInterval(function() {
         $('.masonry-grid').masonry('layout');
-    }, 10000);
+    }, 1000);
 
     const hashtags = getUrlParameter('hashtags');
     const hashtagsArray = hashtags ? hashtags.split(',') : [];
@@ -184,6 +192,19 @@ $(document).ready(async function() {
             const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
             updateWall(newPosts.flat());
         }, 10000);
+        setInterval(function() {
+            var mason = $('.masonry-grid').data('masonry')
+            //console.log( cardIterator )
+            
+            mason.element.children[cardIterator].classList.value = 'col-sm-2'
+            //mason.element.children[cardIterator].children[0].classList.toggle( '' )
+            //console.log( mason.element.children[cardIterator].classList )
+
+            cardIterator++
+            if ( cardIterator >=  mason.element.childNodes.length )
+                cardIterator = 0
+            mason.element.children[cardIterator].classList.value = 'col-big'
+        }, 1000);
     } else {
         $('#zero-state').removeClass('d-none');
         $('#app-content').addClass('d-none');

styles.css

@@ -7,8 +7,8 @@
 
 /* Position the avatar and username in the top left of the card */
 .card-avatar {
-  height: 50px;
-  width: 50px;
+  height: 80px;
+  width: 80px;
   border-radius: 50%;
   position: absolute;
   top: 10px;
@@ -44,10 +44,11 @@
 
 .card-text {
   margin-bottom: 1px !important;
+  text-align: left;
 }
 
 .card {
-  font-size: 0.9em;  /* adjust this value to get the desired text size */
+  font-size: 1.5em;  /* adjust this value to get the desired text size */
 }
 
 /* Remove indent of URLs */
@@ -139,3 +140,43 @@ body {
     padding-bottom: 2px !important; /* reduce padding-bottom to half */
     font-size: 0.9em;
 }
+
+.col-sm-2 {
+    /*-ms-flex: 0 0 99%;*/
+    /*flex: 0 0 99%;*/
+    /*width: 99%;*/
+    /*max-width: 99%;*/
+    /*height: 80%;*/
+    /*max-height: 80%;*/
+    position: absolute;
+    display: block
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    visibility: hidden
+}
+
+.col-big {
+    /*-ms-flex: 0 0 99%;*/
+    /*flex: 0 0 99%;*/
+    /*width: 99%;*/
+    /*max-width: 99%;*/
+    /*height: 80%;*/
+    /*max-height: 80%;*/
+    /*z-index: 2;*/
+    display: block;
+    position: absolute;
+    top: 10;
+    left: 10;
+    width: 100%;
+    height: 400;
+    transition: none
+}
+
+.card-img-bottom {
+    max-width: 600px;
+    max-height: 400px;
+    border-top-left-radius: calc(.25rem - 1px);
+    border-top-right-radius:calc(.25rem - 1px)
+}