From 050d664e0c25e8058bdb5e58aa63611f98bad3ff Mon Sep 17 00:00:00 2001
From: Jannik Menzel <jnk.menzel@gmail.com>
Date: Fri, 6 Jun 2025 20:40:09 +0200
Subject: [PATCH] new feed layout

---
 assets/css/main.css | 48 ++++++++++++----------------------
 assets/js/main.js   | 63 ++++++++++++++++++++++++++++-----------------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index e312323..4f70bfe 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -475,15 +475,20 @@ footer {
 .feed-section #feed {
     margin: 2rem auto;
     padding: 1rem;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
-    justify-content: center;
 }
 
 .page {
-    max-width: 80%;
-    margin: 0 auto;
+    column-count: 2;
+    column-gap: 2rem;
+}
+
+.page .feed-entry {
+    justify-content: start;
+    break-inside: avoid;
+    margin-bottom: 2rem;
 }
 
 .feed-thumbnail-wrapper {
@@ -532,7 +537,7 @@ footer {
 }
 
 .feed-entry {
-    flex: 0 1 calc(50% - 2rem);
+    width: 100%;
     box-sizing: border-box;
     background-color: var(--color-off);
     border: 1px solid var(--color-text);
@@ -544,14 +549,6 @@ footer {
     justify-content: space-between;
 }
 
-.page .feed-entry {
-    justify-content: start;
-}
-
-.page .feed-entry {
-    margin-bottom: 2rem;
-}
-
 .feed-content {
     font-size: 1rem;
     line-height: 1.6;
@@ -659,29 +656,18 @@ footer {
     .ese-section .card-body .page {
         max-width: 100%;
     }
+
+    .page {
+        column-count: 1;
+        column-gap: 1rem;
+        margin: 0 2rem 0 2rem;
+    }
 }
 
 @media (min-width: 992px) {
     .dropdown-item-mobile {
         display: none !important;
     }
-
-    .page {
-        display: flex;
-        overflow-x: auto;
-        scroll-snap-type: x mandatory;
-        gap: 1rem;
-        padding: 1rem;
-        max-width: 100%;
-    }
-
-    .page .feed-entry {
-        flex: 0 0 auto;
-        scroll-snap-align: start;
-        width: calc(100vw / 3 - 2rem);
-        height: auto !important;
-        align-self: flex-start;
-    }
 }
 
 @media (min-width: 1261px) {
diff --git a/assets/js/main.js b/assets/js/main.js
index 2ef1752..20fe682 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -59,45 +59,60 @@ window.toggleDetails = function (element) {
     minusIcon.style.display = isExpanded ? 'inline' : 'none';
 };
 
-fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss')
-    .then(res => res.json())
-    .then(data => {
-        const container = document.getElementById('feed');
-        const isInFeedSection = container.closest('.feed-section') !== null;
-        const maxItems = isInFeedSection ? 4 : data.items.length;
+function renderFeedEntries(data) {
+    const container = document.getElementById('feed');
+    container.innerHTML = '';
+    const isInFeedSection = container.closest('.feed-section') !== null;
+    let maxItems;
+    if (isInFeedSection) {
+        const computedStyle = window.getComputedStyle(container);
+        const columnCount = computedStyle.getPropertyValue('grid-template-columns').split(' ').length;
+        maxItems = columnCount === 3 ? 3 : 4;
+    } else {
+        maxItems = data.items.length;
+    }
 
-        data.items.slice(0, maxItems).forEach(item => {
-            const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
+    data.items.slice(0, maxItems).forEach(item => {
+        const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
 
-            let imageUrl;
+        let imageUrl;
 
-            if (item.thumbnail) {
-                imageUrl = item.thumbnail;
-            } else if (item.enclosure && item.enclosure.link) {
-                imageUrl = item.enclosure.link;
+        if (item.thumbnail) {
+            imageUrl = item.thumbnail;
+        } else if (item.enclosure && item.enclosure.link) {
+            imageUrl = item.enclosure.link;
+        } else {
+            const imgMatch = item.content.match(/<img.*?src="(.*?)"/);
+            if (imgMatch && imgMatch[1]) {
+                imageUrl = imgMatch[1];
             } else {
-                const imgMatch = item.content.match(/<img.*?src="(.*?)"/);
-                if (imgMatch && imgMatch[1]) {
-                    imageUrl = imgMatch[1];
-                } else {
-                    imageUrl = '/images/thumbnail.jpg';
-                }
+                imageUrl = '/images/thumbnail.jpg';
             }
+        }
 
-            const entry = document.createElement('article');
-            entry.classList.add('feed-entry');
+        const entry = document.createElement('article');
+        entry.classList.add('feed-entry');
 
-            const imageHtml = `
+        const imageHtml = `
         <div class="feed-thumbnail-wrapper">
           <img src="${imageUrl}" alt="Beitragsbild" class="feed-thumbnail" />
         </div>
       `;
 
-            entry.innerHTML = `
+        entry.innerHTML = `
         ${imageHtml}
         <div class="feed-content">${cleanedContent}</div>
         <a href="${item.link}" class="btn btn-secondary" target="_blank">Zum Beitrag</a>
       `;
-            container.appendChild(entry);
+        container.appendChild(entry);
+    });
+}
+
+fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss')
+    .then(res => res.json())
+    .then(data => {
+        renderFeedEntries(data);
+        window.addEventListener('resize', () => {
+            renderFeedEntries(data);
         });
     });
\ No newline at end of file