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