diff --git a/index.html b/index.html index 55083ed..3a42bcd 100644 --- a/index.html +++ b/index.html @@ -50,11 +50,13 @@
- - + + + + -
+
diff --git a/src/components/postwall.js b/src/components/postwall.js index f6de103..6508bfb 100644 --- a/src/components/postwall.js +++ b/src/components/postwall.js @@ -1,6 +1,22 @@ export async function loadPostwall() { const container = document.getElementById('postswall-container'); + const scrollStep = 300; // Definiert die Scrollweite in Pixeln + + // Links- und Rechtspfeile definieren + const arrowLeft = document.getElementById('arrow-left'); + const arrowRight = document.getElementById('arrow-right'); + + if (arrowLeft && arrowRight) { + arrowLeft.addEventListener('click', () => { + container.scrollBy({ left: -scrollStep, behavior: 'smooth' }); + }); + + arrowRight.addEventListener('click', () => { + container.scrollBy({ left: scrollStep, behavior: 'smooth' }); + }); + } + // Mastodon API-URL für Hashtag-Suche const apiUrl = 'https://kirche.social/api/v1/timelines/tag/fedikirche?limit=20'; diff --git a/style/postwall.css b/style/postwall.css index e117253..ffb8678 100644 --- a/style/postwall.css +++ b/style/postwall.css @@ -23,7 +23,7 @@ overflow-x: auto; scroll-behavior: smooth; padding: 20px; - padding-bottom: 50px; + padding-bottom: 70px; margin: 0 auto; justify-content: flex-start; scroll-snap-type: x mandatory; @@ -37,6 +37,7 @@ background-color: var(--secondary-background-color); border: 1px solid var(--secondary-background-color); padding: 20px; + padding-bottom: 5px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); scroll-snap-align: start; @@ -183,33 +184,33 @@ } .arrow-indicator { - position: absolute; - bottom: 10px; - right: 25px; - width: 30px; - height: 30px; - background-color: #f1f1f1; - border-radius: 50%; display: flex; - align-items: center; justify-content: center; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - animation: bounce 1.5s infinite; + align-items: center; + gap: 20px; + position: absolute; + bottom: 18px; + left: 50%; + transform: translateX(-50%); + z-index: 10; + pointer-events: auto; + } .arrow-indicator svg { - width: 15px; - height: 15px; - fill: #333; + width: 36px; + height: 36px; + fill: #fff; + cursor: pointer; + background-color: var(--background-color); + border-radius: 50%; + padding: 9px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, fill 0.3s ease; } -@keyframes bounce { - 0%, 100% { - transform: translateX(0); - } - 50% { - transform: translateX(-5px); - } +.arrow-indicator svg:hover { + background-color: var(--secondary-background-color); } /* Responsives Verhalten */