FSR/webseite
28
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new feed layout
All checks were successful
publish / publish (push) Successful in 26s
Details

Browse source
This commit is contained in:
Jannik Menzel 2025-06-06 20:40:09 +02:00
parent 874441bb84
commit 050d664e0c
2 changed files with 56 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/css/main.css
View file

@ -475,15 +475,20 @@ footer {
.feed-section #feed { .feed-section #feed {
margin: 2rem auto; margin: 2rem auto;
padding: 1rem; padding: 1rem;
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem; gap: 2rem;
justify-content: center;
} }
.page { .page {
max-width: 80%; column-count: 2;
margin: 0 auto; column-gap: 2rem;
}
.page .feed-entry {
justify-content: start;
break-inside: avoid;
margin-bottom: 2rem;
} }
.feed-thumbnail-wrapper { .feed-thumbnail-wrapper {
@ -532,7 +537,7 @@ footer {
} }
.feed-entry { .feed-entry {
flex: 0 1 calc(50% - 2rem); width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--color-off); background-color: var(--color-off);
border: 1px solid var(--color-text); border: 1px solid var(--color-text);
@ -544,14 +549,6 @@ footer {
justify-content: space-between; justify-content: space-between;
} }
.page .feed-entry {
justify-content: start;
}
.page .feed-entry {
margin-bottom: 2rem;
}
.feed-content { .feed-content {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
@ -659,29 +656,18 @@ footer {
.ese-section .card-body .page { .ese-section .card-body .page {
max-width: 100%; max-width: 100%;
} }
.page {
column-count: 1;
column-gap: 1rem;
margin: 0 2rem 0 2rem;
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.dropdown-item-mobile { .dropdown-item-mobile {
display: none !important; 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) { @media (min-width: 1261px) {

23
assets/js/main.js
View file

@ -59,12 +59,18 @@ window.toggleDetails = function (element) {
minusIcon.style.display = isExpanded ? 'inline' : 'none'; minusIcon.style.display = isExpanded ? 'inline' : 'none';
}; };
fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr.rss') function renderFeedEntries(data) {
.then(res => res.json())
.then(data => {
const container = document.getElementById('feed'); const container = document.getElementById('feed');
container.innerHTML = '';
const isInFeedSection = container.closest('.feed-section') !== null; const isInFeedSection = container.closest('.feed-section') !== null;
const maxItems = isInFeedSection ? 4 : data.items.length; 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 => { data.items.slice(0, maxItems).forEach(item => {
const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, ''); const cleanedContent = item.content.replace(/<span class="invisible">.*?<\/span>/g, '');
@ -100,4 +106,13 @@ fetch('https://api.rss2json.com/v1/api.json?rss_url=https://toot.kif.rocks/@ifsr
`; `;
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);
});
}); });