[Postwall] Steuerpfeile hinzugefügt

index.html

@@ -50,11 +50,13 @@
         <!-- Posts will be loaded dynamically here -->
     </div>
     <div class="arrow-indicator">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+        <svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.2l105.5-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
+        </svg>
+        <svg id="arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
             <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
         </svg>
-    </div>    
+    </div>        
 </section>
 
 <section id="empfehlungen">

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';
 

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 */