SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates team information and dependencies

Browse Source 
Corrects the team count and league level on the homepage.

Removes the `package-lock.json` file and updates `package.json` and `pnpm-lock.yaml` to use the latest Tailwind CSS CLI and Tailwind CSS versions.

Sorts upcoming events by date and improves the responsive behavior of the event cards on the homepage by adjusting the number of cards shown and managing arrow button states.
This commit is contained in:
Tobias Feigel
2025-09-06 11:06:41 +02:00
parent c72fadd464
commit 1c5e5ce70e
5 changed files with 110 additions and 1576 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/1_home/home.txt
+1 -1
View File
@@ -2,7 +2,7 @@ Title: Home
---- ----
Text: Die Schachfreunde Bad Steben begrüßen Sie auf unserer neuen Homepage! Seit unserer Gründung 1982 spielen wir durchgehend in den lokalen Ligen und stellen aktuell **zwei Mannschaften in der Kreisklasse** des **Schachkreises Hof-Bayreuth-Kulmbach** als Spielgemeinschaft mit dem **TV Reinersreuth**. Text: Wir, die Schachfreunde Bad Steben, begrüßen Sie auf unserer neuen Homepage! Seit unserer Gründung 1982 spielen wir durchgehend in den lokalen Ligen und stellen aktuell **eine Mannschaft in der A-Klasse** des **Schachkreises Hof-Bayreuth-Kulmbach** als Spielgemeinschaft mit dem **TV Reinersreuth**.
---- ----
package-lock.json
Generated
-1477
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -2
View File
@@ -3,8 +3,8 @@
"version": "1.0.0", "version": "1.0.0",
"description": "Kirby Composer Template", "description": "Kirby Composer Template",
"dependencies": { "dependencies": {
"@tailwindcss/cli": "^4.1.12", "@tailwindcss/cli": "^4.1.13",
"tailwindcss": "^4.1.12" "tailwindcss": "^4.1.13"
}, },
"scripts": { "scripts": {
"watch": "npx @tailwindcss/cli -i ./src/css/input.css -o ./assets/css/styles.css --content './site/**/*.php' --watch", "watch": "npx @tailwindcss/cli -i ./src/css/input.css -o ./assets/css/styles.css --content './site/**/*.php' --watch",
pnpm-lock.yaml
Generated
+68 -68
View File
@@ -9,11 +9,11 @@ importers:
.: .:
dependencies: dependencies:
'@tailwindcss/cli': '@tailwindcss/cli':
specifier: ^4.1.12 specifier: ^4.1.13
version: 4.1.12 version: 4.1.13
tailwindcss: tailwindcss:
specifier: ^4.1.12 specifier: ^4.1.13
version: 4.1.12 version: 4.1.13
packages: packages:
@@ -119,69 +119,69 @@ packages:
resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==} resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
engines: {node: '>= 10.0.0'} engines: {node: '>= 10.0.0'}
'@tailwindcss/cli@4.1.12': '@tailwindcss/cli@4.1.13':
resolution: {integrity: sha512-2PyJ5MGh/6JPS+cEaAq6MGDx3UemkX/mJt+/phm7/VOpycpecwNnHuFZbbgx6TNK/aIjvFOhhTVlappM7tmqvQ==} resolution: {integrity: sha512-KEu/iL4CYBzGza/2yZBLXqjCCZB/eRWkRLP8Vg2kkEWk4usC8HLGJW0QAhLS7U5DsAWumsisxgabuppE6NinLw==}
hasBin: true hasBin: true
'@tailwindcss/node@4.1.12': '@tailwindcss/node@4.1.13':
resolution: {integrity: sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==} resolution: {integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==}
'@tailwindcss/oxide-android-arm64@4.1.12': '@tailwindcss/oxide-android-arm64@4.1.13':
resolution: {integrity: sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==} resolution: {integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
'@tailwindcss/oxide-darwin-arm64@4.1.12': '@tailwindcss/oxide-darwin-arm64@4.1.13':
resolution: {integrity: sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==} resolution: {integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@tailwindcss/oxide-darwin-x64@4.1.12': '@tailwindcss/oxide-darwin-x64@4.1.13':
resolution: {integrity: sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==} resolution: {integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@tailwindcss/oxide-freebsd-x64@4.1.12': '@tailwindcss/oxide-freebsd-x64@4.1.13':
resolution: {integrity: sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==} resolution: {integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
'@tailwindcss/oxide-linux-arm-gnueabihf@4.1.12': '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
resolution: {integrity: sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==} resolution: {integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@tailwindcss/oxide-linux-arm64-gnu@4.1.12': '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
resolution: {integrity: sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==} resolution: {integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@tailwindcss/oxide-linux-arm64-musl@4.1.12': '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
resolution: {integrity: sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==} resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@tailwindcss/oxide-linux-x64-gnu@4.1.12': '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
resolution: {integrity: sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==} resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@tailwindcss/oxide-linux-x64-musl@4.1.12': '@tailwindcss/oxide-linux-x64-musl@4.1.13':
resolution: {integrity: sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==} resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@tailwindcss/oxide-wasm32-wasi@4.1.12': '@tailwindcss/oxide-wasm32-wasi@4.1.13':
resolution: {integrity: sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==} resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
cpu: [wasm32] cpu: [wasm32]
bundledDependencies: bundledDependencies:
@@ -192,20 +192,20 @@ packages:
- '@emnapi/wasi-threads' - '@emnapi/wasi-threads'
- tslib - tslib
'@tailwindcss/oxide-win32-arm64-msvc@4.1.12': '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
resolution: {integrity: sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==} resolution: {integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
'@tailwindcss/oxide-win32-x64-msvc@4.1.12': '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
resolution: {integrity: sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==} resolution: {integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@tailwindcss/oxide@4.1.12': '@tailwindcss/oxide@4.1.13':
resolution: {integrity: sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==} resolution: {integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
braces@3.0.3: braces@3.0.3:
@@ -354,8 +354,8 @@ packages:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
tailwindcss@4.1.12: tailwindcss@4.1.13:
resolution: {integrity: sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==} resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
tapable@2.2.3: tapable@2.2.3:
resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==} resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
@@ -458,17 +458,17 @@ snapshots:
'@parcel/watcher-win32-ia32': 2.5.1 '@parcel/watcher-win32-ia32': 2.5.1
'@parcel/watcher-win32-x64': 2.5.1 '@parcel/watcher-win32-x64': 2.5.1
'@tailwindcss/cli@4.1.12': '@tailwindcss/cli@4.1.13':
dependencies: dependencies:
'@parcel/watcher': 2.5.1 '@parcel/watcher': 2.5.1
'@tailwindcss/node': 4.1.12 '@tailwindcss/node': 4.1.13
'@tailwindcss/oxide': 4.1.12 '@tailwindcss/oxide': 4.1.13
enhanced-resolve: 5.18.3 enhanced-resolve: 5.18.3
mri: 1.2.0 mri: 1.2.0
picocolors: 1.1.1 picocolors: 1.1.1
tailwindcss: 4.1.12 tailwindcss: 4.1.13
'@tailwindcss/node@4.1.12': '@tailwindcss/node@4.1.13':
dependencies: dependencies:
'@jridgewell/remapping': 2.3.5 '@jridgewell/remapping': 2.3.5
enhanced-resolve: 5.18.3 enhanced-resolve: 5.18.3
@@ -476,61 +476,61 @@ snapshots:
lightningcss: 1.30.1 lightningcss: 1.30.1
magic-string: 0.30.18 magic-string: 0.30.18
source-map-js: 1.2.1 source-map-js: 1.2.1
tailwindcss: 4.1.12 tailwindcss: 4.1.13
'@tailwindcss/oxide-android-arm64@4.1.12': '@tailwindcss/oxide-android-arm64@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-darwin-arm64@4.1.12': '@tailwindcss/oxide-darwin-arm64@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-darwin-x64@4.1.12': '@tailwindcss/oxide-darwin-x64@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-freebsd-x64@4.1.12': '@tailwindcss/oxide-freebsd-x64@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-linux-arm-gnueabihf@4.1.12': '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-linux-arm64-gnu@4.1.12': '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-linux-arm64-musl@4.1.12': '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-linux-x64-gnu@4.1.12': '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-linux-x64-musl@4.1.12': '@tailwindcss/oxide-linux-x64-musl@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-wasm32-wasi@4.1.12': '@tailwindcss/oxide-wasm32-wasi@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-win32-arm64-msvc@4.1.12': '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
optional: true optional: true
'@tailwindcss/oxide-win32-x64-msvc@4.1.12': '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
optional: true optional: true
'@tailwindcss/oxide@4.1.12': '@tailwindcss/oxide@4.1.13':
dependencies: dependencies:
detect-libc: 2.0.4 detect-libc: 2.0.4
tar: 7.4.3 tar: 7.4.3
optionalDependencies: optionalDependencies:
'@tailwindcss/oxide-android-arm64': 4.1.12 '@tailwindcss/oxide-android-arm64': 4.1.13
'@tailwindcss/oxide-darwin-arm64': 4.1.12 '@tailwindcss/oxide-darwin-arm64': 4.1.13
'@tailwindcss/oxide-darwin-x64': 4.1.12 '@tailwindcss/oxide-darwin-x64': 4.1.13
'@tailwindcss/oxide-freebsd-x64': 4.1.12 '@tailwindcss/oxide-freebsd-x64': 4.1.13
'@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.12 '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
'@tailwindcss/oxide-linux-arm64-gnu': 4.1.12 '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
'@tailwindcss/oxide-linux-arm64-musl': 4.1.12 '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
'@tailwindcss/oxide-linux-x64-gnu': 4.1.12 '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
'@tailwindcss/oxide-linux-x64-musl': 4.1.12 '@tailwindcss/oxide-linux-x64-musl': 4.1.13
'@tailwindcss/oxide-wasm32-wasi': 4.1.12 '@tailwindcss/oxide-wasm32-wasi': 4.1.13
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.12 '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
'@tailwindcss/oxide-win32-x64-msvc': 4.1.12 '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
braces@3.0.3: braces@3.0.3:
dependencies: dependencies:
@@ -635,7 +635,7 @@ snapshots:
source-map-js@1.2.1: {} source-map-js@1.2.1: {}
tailwindcss@4.1.12: {} tailwindcss@4.1.13: {}
tapable@2.2.3: {} tapable@2.2.3: {}
site/snippets/home-termine.php
+38 -27
View File
@@ -9,6 +9,11 @@
return isset($event['DTSTART']) && $event['DTSTART'] >= $today; return isset($event['DTSTART']) && $event['DTSTART'] >= $today;
}); });
// Termine nach DTSTART in aufsteigender Reihenfolge sortieren
usort($future_events, function ($a, $b) {
return $a['DTSTART'] <=> $b['DTSTART'];
});
// --- Deutsche Monatsnamen --- // --- Deutsche Monatsnamen ---
$de_months = [ $de_months = [
'01' => 'Jan', '01' => 'Jan',
@@ -49,10 +54,10 @@
$month = substr($date, 3, 2); $month = substr($date, 3, 2);
?> ?>
<div class="termine-card flex-none w-full md:w-1/3 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl shadow-xl transform hover:scale-102 transition-all duration-300 ease-in-out border border-blue-200"> <div class="termine-card flex-none w-full md:w-1/2 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl transform hover:scale-102 transition-all duration-300 ease-in-out border border-blue-200">
<!-- Inhalt der ersten Karte bleibt unverändert --> <!-- Inhalt der ersten Karte bleibt unverändert -->
<div class="p-6 flex flex-col h-full"> <div class="p-6 flex flex-col h-full">
<div class="flex items-center mb-5"> <div class="flex items-top mb-5">
<div class="relative flex-shrink-0 bg-white rounded-lg shadow-md overflow-hidden w-16 h-16 flex flex-col border border-blue-200"> <div class="relative flex-shrink-0 bg-white rounded-lg shadow-md overflow-hidden w-16 h-16 flex flex-col border border-blue-200">
<!-- Kopfzeile des Kalenders mit Monat --> <!-- Kopfzeile des Kalenders mit Monat -->
<div class="bg-blue-600 text-white text-xs font-semibold py-1 text-center uppercase"> <div class="bg-blue-600 text-white text-xs font-semibold py-1 text-center uppercase">
@@ -76,7 +81,7 @@
</div> </div>
</div> </div>
<div class="ml-5 flex-grow"> <div class="ml-5 flex-grow">
<h3 class="text-xl font-bold text-sf_grau-900"><?= $event["SUMMARY"] ?></h3> <pack class="text-xl font-medium text-sf_grau-900"><?= $event["SUMMARY"] ?></p>
<p class="text-sf_blau-700 text-lg font-medium mt-1">ab <?php echo htmlspecialchars($time); ?> Uhr</p> <p class="text-sf_blau-700 text-lg font-medium mt-1">ab <?php echo htmlspecialchars($time); ?> Uhr</p>
</div> </div>
</div> </div>
@@ -105,36 +110,39 @@
let cardsToShow = window.innerWidth < 768 ? 1 : 3; // Nur 1 Karte auf mobilen Geräten let cardsToShow = window.innerWidth < 768 ? 1 : 3; // Nur 1 Karte auf mobilen Geräten
let maxPosition = Math.max(0, totalCards - cardsToShow); let maxPosition = Math.max(0, totalCards - cardsToShow);
// Funktion zum Aktualisieren der Sichtbarkeit der Pfeile // Funktion zum Aktualisieren des Zustands der Pfeile
function updateArrowVisibility() { function updateArrowState() {
// Linker Pfeil nur anzeigen, wenn es vorherige Termine gibt // Linker Pfeil deaktivieren, wenn es keine vorherigen Termine gibt
if (currentPosition <= 0) { if (currentPosition <= 0) {
scrollLeftBtn.classList.add('hidden'); scrollLeftBtn.disabled = true;
scrollLeftBtn.classList.add('opacity-50', 'cursor-not-allowed');
scrollLeftBtn.classList.remove('hover:bg-gray-100');
} else { } else {
scrollLeftBtn.classList.remove('hidden'); scrollLeftBtn.disabled = false;
scrollLeftBtn.classList.remove('opacity-50', 'cursor-not-allowed');
scrollLeftBtn.classList.add('hover:bg-gray-100');
} }
// Rechter Pfeil nur anzeigen, wenn es weitere Termine gibt // Rechter Pfeil deaktivieren, wenn es keine weiteren Termine gibt
if (currentPosition >= maxPosition) { if (currentPosition >= maxPosition) {
scrollRightBtn.classList.add('hidden'); scrollRightBtn.disabled = true;
scrollRightBtn.classList.add('opacity-50', 'cursor-not-allowed');
scrollRightBtn.classList.remove('hover:bg-gray-100');
} else { } else {
scrollRightBtn.classList.remove('hidden'); scrollRightBtn.disabled = false;
scrollRightBtn.classList.remove('opacity-50', 'cursor-not-allowed');
scrollRightBtn.classList.add('hover:bg-gray-100');
} }
} }
// Initialisierung - zeige die Pfeile nur, wenn es genug Karten gibt // Initialisierung - Pfeile immer anzeigen, aber entsprechend deaktivieren
if (totalCards <= cardsToShow) { // Entferne alle hidden-Klassen, damit Buttons immer sichtbar sind
scrollLeftBtn.classList.add('hidden'); scrollLeftBtn.classList.remove('hidden');
scrollRightBtn.classList.add('hidden');
} else {
// Am Anfang ist der linke Pfeil ausgeblendet, da wir bei Position 0 sind
scrollLeftBtn.classList.add('hidden');
scrollRightBtn.classList.remove('hidden'); scrollRightBtn.classList.remove('hidden');
}
// Funktion zum Scrollen nach links // Funktion zum Scrollen nach links
scrollLeftBtn.addEventListener('click', () => { scrollLeftBtn.addEventListener('click', () => {
if (currentPosition > 0) { if (currentPosition > 0 && !scrollLeftBtn.disabled) {
currentPosition--; currentPosition--;
scrollToPosition(); scrollToPosition();
} }
@@ -142,7 +150,7 @@
// Funktion zum Scrollen nach rechts // Funktion zum Scrollen nach rechts
scrollRightBtn.addEventListener('click', () => { scrollRightBtn.addEventListener('click', () => {
if (currentPosition < maxPosition) { if (currentPosition < maxPosition && !scrollRightBtn.disabled) {
currentPosition++; currentPosition++;
scrollToPosition(); scrollToPosition();
} }
@@ -155,16 +163,16 @@
const scrollAmount = currentPosition * (cardWidth + gapWidth); const scrollAmount = currentPosition * (cardWidth + gapWidth);
termineContainer.style.transform = `translateX(-${scrollAmount}px)`; termineContainer.style.transform = `translateX(-${scrollAmount}px)`;
updateArrowVisibility(); updateArrowState();
} }
// Initialer Aufruf // Initialer Aufruf
updateArrowVisibility(); updateArrowState();
// Responsives Verhalten - bei Fenstergröße-Änderung // Responsives Verhalten - bei Fenstergröße-Änderung
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// Anzahl der Karten je nach Bildschirmgröße anpassen // Anzahl der Karten je nach Bildschirmgröße anpassen
cardsToShow = window.innerWidth < 768 ? 1 : 3; cardsToShow = window.innerWidth < 768 ? 1 : 1;
maxPosition = Math.max(0, totalCards - cardsToShow); maxPosition = Math.max(0, totalCards - cardsToShow);
// Sicherstellen, dass die aktuelle Position gültig ist // Sicherstellen, dass die aktuelle Position gültig ist
@@ -173,8 +181,8 @@
// Position aktualisieren // Position aktualisieren
scrollToPosition(); scrollToPosition();
// Pfeile-Sichtbarkeit aktualisieren // Pfeile-Zustand aktualisieren
updateArrowVisibility(); updateArrowState();
}); });
}); });
</script> </script>
@@ -194,7 +202,10 @@
/* Gleiche Kartenbreiten sicherstellen */ /* Gleiche Kartenbreiten sicherstellen */
@media (min-width: 1280px) { @media (min-width: 1280px) {
.termine-card { .termine-card {
width: calc((100% - 48px) / 3); /* 100% minus 2 Gaps (2 * 24px) geteilt durch 3 */ width: 100%; /* 100% minus 2 Gaps (2 * 24px) geteilt durch 3 */
}
#termine-container {
space-x-0; /* Kein Abstand zwischen Karten nötig */
} }
} }