marco.morath/einkaufsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix iOS-Ansicht Menüelemente

Browse Source
This commit is contained in:
Marco Morath
2026-08-15 20:12:11 +02:00
parent fa64cbc4a4
commit 4c9f69dda1
4 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/html/app.css
View File

@@ -42,7 +42,19 @@ body {
#app { #app {
max-width: 30rem; max-width: 30rem;
margin: 0 auto; margin: 0 auto;
padding: 1.5rem 1rem calc(2rem + env(safe-area-inset-bottom)); /* Sicherheitsabstände von iOS mit einrechnen.
Zusammen mit viewport-fit=cover und
apple-mobile-web-app-status-bar-style=black-translucent zeichnet
die installierte App UNTER Uhrzeit, WLAN- und Batteriesymbol.
Ohne den oberen Abstand liegt die Kopfleiste darunter und ist
nicht mehr antippbar.
Die Seitenabstände sind für das Querformat: Dort liegt die
Aussparung der Frontkamera links oder rechts. */
padding-top: calc(1.5rem + env(safe-area-inset-top));
padding-right: calc(1rem + env(safe-area-inset-right));
padding-bottom: calc(2rem + env(safe-area-inset-bottom));
padding-left: calc(1rem + env(safe-area-inset-left));
} }
.loading { color: var(--muted); text-align: center; padding: 3rem 0; } .loading { color: var(--muted); text-align: center; padding: 3rem 0; }
@@ -139,6 +151,31 @@ a { color: var(--accent); }
gap: .75rem; gap: .75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
min-height: 2.6rem; min-height: 2.6rem;
/* Beim Scrollen oben stehen bleiben.
Bei installierten iOS-Apps ist die Statusleiste durchsichtig -
ohne diese Regel liefe der Listeninhalt sichtbar hinter Uhrzeit
und Batteriesymbol durch. Der negative Versatz und das Auffüllen
darüber sorgen dafür, dass die Fläche bis zum oberen Bildschirmrand
eingefärbt bleibt. */
position: sticky;
top: 0;
z-index: 20;
margin-top: calc(-1 * env(safe-area-inset-top));
padding-top: env(safe-area-inset-top);
background: var(--bg);
}
/* Ein weicher Übergang statt einer harten Kante beim Scrollen. */
.app-bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.6rem;
height: .6rem;
background: linear-gradient(to bottom, var(--bg), transparent);
pointer-events: none;
} }
/* Drei Bereiche mit festem Verhalten: links zurück, Mitte der Titel /* Drei Bereiche mit festem Verhalten: links zurück, Mitte der Titel
@@ -239,6 +276,10 @@ ul.menu-panel {
z-index: 30; z-index: 30;
top: calc(100% + .3rem); top: calc(100% + .3rem);
right: 0; right: 0;
/* Bei sehr langen Menüs nicht über den unteren Bildschirmrand
hinauslaufen. */
max-height: calc(100vh - 8rem - env(safe-area-inset-top));
overflow-y: auto;
min-width: 15rem; min-width: 15rem;
max-width: min(20rem, calc(100vw - 2rem)); max-width: min(20rem, calc(100vw - 2rem));
list-style: none; list-style: none;
@@ -898,7 +939,8 @@ body.scanning { overflow: hidden; }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
padding: 1rem calc(1rem + env(safe-area-inset-right)) padding: calc(1rem + env(safe-area-inset-top))
calc(1rem + env(safe-area-inset-right))
calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-bottom))
calc(1rem + env(safe-area-inset-left)); calc(1rem + env(safe-area-inset-left));
overflow-y: auto; overflow-y: auto;
@@ -1477,7 +1519,9 @@ button.archive-head .chev { color: var(--muted); }
.app-footer { .app-footer {
max-width: 30rem; max-width: 30rem;
margin: 0 auto; margin: 0 auto;
padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); padding: 1.5rem calc(1rem + env(safe-area-inset-right))
calc(1.5rem + env(safe-area-inset-bottom))
calc(1rem + env(safe-area-inset-left));
text-align: center; text-align: center;
font-size: .82rem; font-size: .82rem;
color: var(--muted); color: var(--muted);
@@ -1586,8 +1630,8 @@ select.category-select:not([data-empty]) { border-color: var(--accent); }
.update-banner { .update-banner {
position: fixed; position: fixed;
z-index: 80; z-index: 80;
left: 1rem; left: calc(1rem + env(safe-area-inset-left));
right: 1rem; right: calc(1rem + env(safe-area-inset-right));
bottom: calc(1rem + env(safe-area-inset-bottom)); bottom: calc(1rem + env(safe-area-inset-bottom));
max-width: 28rem; max-width: 28rem;
margin: 0 auto; margin: 0 auto;

2
web/html/datenschutz.html
View File

@@ -2,7 +2,7 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<title>Datenschutzerklärung</title> <title>Datenschutzerklärung</title>
<link rel="stylesheet" href="/app.css"> <link rel="stylesheet" href="/app.css">

2
web/html/impressum.html
View File

@@ -2,7 +2,7 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<title>Impressum</title> <title>Impressum</title>
<link rel="stylesheet" href="/app.css"> <link rel="stylesheet" href="/app.css">

2
web/html/sw.js
View File

@@ -5,7 +5,7 @@
// Bei jeder Änderung an den Dateien unten hochzählen. Der Wert entscheidet, // Bei jeder Änderung an den Dateien unten hochzählen. Der Wert entscheidet,
// wann alte Zwischenspeicher verworfen werden. // wann alte Zwischenspeicher verworfen werden.
const VERSION = "v33"; const VERSION = "v34";
const SHELL_CACHE = `einkaufsapp-shell-${VERSION}`; const SHELL_CACHE = `einkaufsapp-shell-${VERSION}`;
const SHELL = [ const SHELL = [