[PATCH gamja 0/1] [PATCH gamja] Optimize style for iOS PWA mode

This thread contains a patchset. You're looking at the original emails, but you may wish to use the patch review UI. Review patch

2 2

[PATCH gamja 0/1] [PATCH gamja] Optimize style for iOS PWA mode

~gsora <gsora@git.sr.ht>

Details

Message ID: <171958319830.373.1166224988328131671-0@git.sr.ht>
DKIM signature: missing

Download raw message

5 months ago

Hi,
I noticed that gamja doesn't respect iOS safe insets area for the OS
navigation bar.

I added a couple conditional lines to the `html` CSS tag in order to
offset the page off of the safe inset area that Safari defines.

This patch should leave other devices unaffected, as tested with Firefox
responsive design simulator.

My CSS/HTML skills aren't very sharp, feel free to reject or completely
overhaul the code as you please.

Gianguido Sora (1):
  style: optimize for iOS PWA mode

 index.html | 2 +-
 style.css  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

-- 
2.43.4

[PATCH gamja 1/1] style: optimize for iOS PWA mode

~gsora <gsora@git.sr.ht>

Details

Message ID: <171958319830.373.1166224988328131671-1@git.sr.ht>
In-Reply-To: <171958319830.373.1166224988328131671-0@git.sr.ht> (view parent)
DKIM signature: missing

Download raw message

5 months ago

Patch: +6 -1

From: Gianguido Sora <me+sourcehut@gsora.xyz>

Tweak CSS in order to not have iOS notch and navigation bar over UI components.

Does nothing if the browser doesn't define `safe-area-inset-*' CSS variables.
---
 index.html | 2 +-
 style.css  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ec656db..971607c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 		<title>gamja IRC client</title>
 		<link rel="stylesheet" href="./style.css">
 		<script type="module" src="./main.js"></script>
-		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover">
 		<link rel="manifest" href="manifest.json">
 	</head>
 	<body>
diff --git a/style.css b/style.css
index dd41582..846a7d5 100644
--- a/style.css
+++ b/style.css
@@ -711,6 +711,11 @@ ul.switcher-list .server {
 }
 
 @media (max-width: 640px) {
+	html {
+		max-height: calc(100% - env(safe-area-inset-top));
+		padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+	}
+
 	.expander {
 		display: block;
 	}
-- 
2.43.4

[gamja/patches/.build.yml] build success

builds.sr.ht <builds@sr.ht>

Details

Message ID: <D2BPDNB8HLN5.PIXZHMWQBUEY@fra02>
In-Reply-To: <171958319830.373.1166224988328131671-1@git.sr.ht> (view parent)
DKIM signature: missing

Download raw message

5 months ago

gamja/patches/.build.yml: SUCCESS in 23s

[Optimize style for iOS PWA mode][0] from [~gsora][1]

[0]: https://lists.sr.ht/~emersion/public-inbox/patches/53557
[1]: me+sourcehut@gsora.xyz

✓ #1262929 SUCCESS gamja/patches/.build.yml https://builds.sr.ht/~emersion/job/1262929