From 6c8798986366ede8fa92b14d2e625d239d773fee Mon Sep 17 00:00:00 2001 From: Lars Date: Tue, 5 May 2026 12:26:49 +0200 Subject: [PATCH] feat: update PWA support and enhance responsive design - Added PWA meta tags for improved iOS web app compatibility in index.html. - Updated app.css to refine responsive design, ensuring better layout handling on mobile devices. - Adjusted padding and height properties to accommodate safe area insets for a more polished user experience. --- frontend/index.html | 15 ++++++++++----- frontend/public/apple-touch-icon.png | Bin 0 -> 611 bytes frontend/public/favicon-32.png | Bin 0 -> 158 bytes frontend/public/icon-192.png | Bin 0 -> 642 bytes frontend/public/icon-512.png | Bin 0 -> 2250 bytes frontend/public/manifest.webmanifest | 25 +++++++++++++++++++++++++ frontend/src/app.css | 19 +++++++++++++++---- 7 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 frontend/public/apple-touch-icon.png create mode 100644 frontend/public/favicon-32.png create mode 100644 frontend/public/icon-192.png create mode 100644 frontend/public/icon-512.png create mode 100644 frontend/public/manifest.webmanifest diff --git a/frontend/index.html b/frontend/index.html index de010d4..4ce53ec 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,16 +5,21 @@ - + + + + - + + - + - + + - + Shinkan Jinkendo diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..545fcd4a89530e87bfb0bb1ad5851dd1d167d785 GIT binary patch literal 611 zcmeAS@N?(olHy`uVBq!ia0vp^TR@nD4M^IaWitX&jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1quc4L>|x978JN-d<7^WKdu@;Ls&7*(!w9pSeu` zo=^Uny?h}(<_FI6_;xMyG&Ip{Q#*QLiNq`s=gCPKL8F30IY4%9FUXlYC*;^iV8USV MboFyt=akR{0LT^E?EnA( literal 0 HcmV?d00001 diff --git a/frontend/public/favicon-32.png b/frontend/public/favicon-32.png new file mode 100644 index 0000000000000000000000000000000000000000..362bbe6c6e521a683fef04a6b2b283b42007da00 GIT binary patch literal 158 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}Ea{HEjtmSN z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!ps}ZmV@QPi+jEMH3M1MG6B0N4%$tV@O5Z+iQx93c!2gu0?jcRRWKS3 sqv>HZUyPOyqvhmibud~jLYfD9hFQ(5KLletf$a|lPgg&ebxsLQ082?E>i_@% literal 0 HcmV?d00001 diff --git a/frontend/public/manifest.webmanifest b/frontend/public/manifest.webmanifest new file mode 100644 index 0000000..e0a9d34 --- /dev/null +++ b/frontend/public/manifest.webmanifest @@ -0,0 +1,25 @@ +{ + "name": "Shinkan Jinkendo", + "short_name": "Shinkan", + "description": "Trainer- und Vereinsplattform für Kampfsport-Trainingsplanung", + "start_url": "/", + "scope": "/", + "display": "standalone", + "background_color": "#f4f3ef", + "theme_color": "#1D9E75", + "lang": "de", + "icons": [ + { + "src": "/icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any maskable" + } + ] +} diff --git a/frontend/src/app.css b/frontend/src/app.css index e352aeb..50dd191 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -33,18 +33,28 @@ html, body, #root { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; } -.app-shell { display: flex; flex-direction: column; height: 100%; max-width: 600px; margin: 0 auto; } +.app-shell { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; max-width: 600px; margin: 0 auto; } .app-header { height: var(--header-h); display: flex; align-items: center; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } +/* iPhone: Web-App (standalone) / Safari mit viewport-fit=cover — Kopf unter Statusleiste ausrichten */ +@media (max-width: 1023px) { + .app-header.app-header--mobile { + height: auto; + min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); + padding-top: env(safe-area-inset-top, 0px); + padding-left: max(16px, env(safe-area-inset-left, 0px)); + padding-right: max(16px, env(safe-area-inset-right, 0px)); + } +} .app-logo { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; } /* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */ .app-main { flex: 1; overflow-y: auto; - padding: 16px 16px calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px); + padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px)); } .bottom-nav { @@ -66,7 +76,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we -ms-overflow-style: none; justify-content: flex-start; gap: 2px; - padding: var(--nav-pad-top) 6px env(safe-area-inset-bottom, 0px); + padding: var(--nav-pad-top) max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px)); min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px)); height: auto; box-sizing: border-box; @@ -2174,7 +2184,8 @@ a.analysis-split__nav-item { .app-shell { display: flex; flex-direction: column; - height: 100%; + min-height: 100%; + min-height: 100dvh; max-width: 600px; margin: 0 auto; }