PWA fixes: padded maskable icon (launcher crop), edge-to-edge bands, Firefox manifest fetch
- maskable-icon.png regenerated: logo at ~66% on the brand background —
inside the maskable safe zone, so Android no longer crops it ('zoomed in').
- index.html: viewport-fit=cover + manifest link without
crossorigin=use-credentials (Firefox Android fails to resolve manifest
icons on credentialed fetches — missing launcher icon).
- custom.css: standalone-mode safe-area padding so app content clears the
system bars; the bands show the theme-correct page background.
This commit is contained in:
1 parent
637fcc3472
commit
df55d7fafa
3 files changed
+26
No files matched your search
@@ -124,3 +124,13 @@ footer a:hover {
|
|||||||
area the app UI does not cover (e.g. PWA navigation-bar insets) matches. */
|
area the app UI does not cover (e.g. PWA navigation-bar insets) matches. */
|
||||||
html:not(.dark), html:not(.dark) body { background-color: rgb(234, 243, 234); }
|
html:not(.dark), html:not(.dark) body { background-color: rgb(234, 243, 234); }
|
||||||
html.dark, html.dark body { background-color: rgb(34, 39, 31); }
|
html.dark, html.dark body { background-color: rgb(34, 39, 31); }
|
||||||
|
|
||||||
|
/* ---- PWA safe areas: with viewport-fit=cover the page draws under system
|
||||||
|
bars — the bands then show the theme-correct page background instead of
|
||||||
|
OS-default white, and this padding keeps app content clear of the bars. ---- */
|
||||||
|
@media (display-mode: standalone) {
|
||||||
|
#root {
|
||||||
|
padding-top: env(safe-area-inset-top, 0px);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 22 KiB |
@@ -39,6 +39,22 @@ if "x-coop-build" not in html:
|
|||||||
marker = '<meta name="x-coop-build" content="{}">'.format(int(time.time()))
|
marker = '<meta name="x-coop-build" content="{}">'.format(int(time.time()))
|
||||||
html = html.replace("</title>", "</title>\n " + marker, 1)
|
html = html.replace("</title>", "</title>\n " + marker, 1)
|
||||||
|
|
||||||
|
# 3b. PWA chrome: let the page draw under system bars (Android 15 edge-to-edge,
|
||||||
|
# display cutouts, iOS safe areas). The page background is theme-correct
|
||||||
|
# (custom.css), so the top/bottom bands match the app theme; safe-area
|
||||||
|
# padding in custom.css keeps content clear of the bars. Also drop
|
||||||
|
# crossorigin="use-credentials" from the manifest link — Firefox Android
|
||||||
|
# fails to resolve manifest icons on credentialed fetches (blank/missing
|
||||||
|
# launcher icon).
|
||||||
|
html = html.replace(
|
||||||
|
"initial-scale=1, interactive-widget=resizes-content",
|
||||||
|
"initial-scale=1, interactive-widget=resizes-content, viewport-fit=cover",
|
||||||
|
)
|
||||||
|
html = html.replace(
|
||||||
|
'<link rel="manifest" href="./manifest.webmanifest" crossorigin="use-credentials">',
|
||||||
|
'<link rel="manifest" href="./manifest.webmanifest">',
|
||||||
|
)
|
||||||
|
|
||||||
open(PATH, "w", encoding="utf-8").write(html)
|
open(PATH, "w", encoding="utf-8").write(html)
|
||||||
|
|
||||||
# 4. Web manifest identity: co-op name + a 512 icon installable as "any".
|
# 4. Web manifest identity: co-op name + a 512 icon installable as "any".
|
||||||
|
|||||||
Reference in new issue
Block a user