From b15aa83ff772e3443b20758d54f0a78df57690a2 Mon Sep 17 00:00:00 2001
From: borntolurk <borntolurk@rdrama.net>
Date: Fri, 30 Jun 2023 18:52:02 +0200
Subject: [PATCH 1/2] Improve handing of safe area on iOS PWA

---
 files/assets/css/main.css                  | 18 ++++++++++++++++--
 files/assets/js/mobile_navigation_bar.js   |  6 ++++--
 files/templates/mobile_navigation_bar.html |  2 +-
 files/templates/util/html_head.html        |  5 +++--
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 27f5bb6fa..641fda7fb 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7070,8 +7070,10 @@ body *::-webkit-scrollbar {
 }
 
 body > .container {
-	padding-left: 20px !important;
-	padding-right: 20px !important;
+	--safe-area-inset-left: env(safe-area-inset-left);
+	--safe-area-inset-right: env(safe-area-inset-right);
+	padding-left: calc(20px + var(--safe-area-inset-left)) !important;
+	padding-right: calc(20px + var(--safe-area-inset-right)) !important;
 }
 
 .emoji2 {
@@ -7479,6 +7481,18 @@ th.disable-sort-click[disabled] {
 	}
 }
 
+@supports(padding: env(safe-area-inset-bottom)) {
+	#mobile-bottom-navigation-bar {
+		--safe-area-inset-left: env(safe-area-inset-left);
+		--safe-area-inset-right: env(safe-area-inset-right);
+		--safe-area-inset-bottom: env(safe-area-inset-bottom);
+		padding-top: 0.5rem;
+		padding-left: max(0.5rem, var(--safe-area-inset-left));
+		padding-right: max(0.5rem, var(--safe-area-inset-right));
+		padding-bottom: max(0.5rem, var(--safe-area-inset-bottom));
+	}
+}
+
 #mobile-bottom-navigation-bar > button {
 	overflow: visible
 }
diff --git a/files/assets/js/mobile_navigation_bar.js b/files/assets/js/mobile_navigation_bar.js
index 992f0b537..cd3dca56e 100644
--- a/files/assets/js/mobile_navigation_bar.js
+++ b/files/assets/js/mobile_navigation_bar.js
@@ -10,6 +10,8 @@ window.onscroll = function () {
 
 	const navbar = document.getElementById("navbar");
 
+	const bottomSafeAreaInset = parseInt(getComputedStyle(bottomBar).getPropertyValue("--safe-area-inset-bottom")) || 0;
+
 	if (bottomBar != null) {
 		if (prevScrollpos > currentScrollPos && (window.innerHeight + currentScrollPos) < (document.body.offsetHeight - 65)) {
 			bottomBar.style.bottom = "0px";
@@ -18,10 +20,10 @@ window.onscroll = function () {
 			bottomBar.style.bottom = "0px";
 		}
 		else if (prevScrollpos > currentScrollPos && (window.innerHeight + currentScrollPos) >= (document.body.offsetHeight - 65)) {
-			bottomBar.style.bottom = "-50px";
+			bottomBar.style.bottom = `-${50 + bottomSafeAreaInset}px`;
 		}
 		else {
-			bottomBar.style.bottom = "-50px";
+			bottomBar.style.bottom = `-${50 + bottomSafeAreaInset}px`;
 		}
 	}
 
diff --git a/files/templates/mobile_navigation_bar.html b/files/templates/mobile_navigation_bar.html
index 413ae03b4..b491d3b7b 100644
--- a/files/templates/mobile_navigation_bar.html
+++ b/files/templates/mobile_navigation_bar.html
@@ -1,5 +1,5 @@
 <div class="container d-inline-flex d-lg-none">
-		<div class="row fixed-bottom bg-white border-top p-2" id="mobile-bottom-navigation-bar"
+		<div class="row fixed-bottom bg-white border-top" id="mobile-bottom-navigation-bar"
 		style="z-index: 1000; bottom: 0px; transition: bottom cubic-bezier(0, 0, 0.2, 1) 220ms;">
 
 				<button type="button" class="nobackground border-0 col px-0 ml-3 btn btn-dead m-0">
diff --git a/files/templates/util/html_head.html b/files/templates/util/html_head.html
index d4ee37ec1..322183fc0 100644
--- a/files/templates/util/html_head.html
+++ b/files/templates/util/html_head.html
@@ -64,7 +64,7 @@
 
 	<link rel="icon" type="image/webp" href="/icon.webp?x=6">
 
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
 	<meta name="thumbnail" content="{{'site_preview.webp' | asset_siteimg}}">
 	<meta name="description" content="{{DESCRIPTION}}">
 
@@ -159,8 +159,9 @@
 {% macro seo() %}
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-touch-fullscreen" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 	<meta name="format-detection" content="telephone=no">
-	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/icon.webp?x=6">
 	<link rel="manifest" href="/assets/manifest_{{SITE_NAME}}.json?x=7">
-- 
2.34.1


From d5f2e37f7205f4009428bce70ed6db46b7e5a41f Mon Sep 17 00:00:00 2001
From: borntolurk <borntolurk@rdrama.net>
Date: Fri, 30 Jun 2023 18:52:31 +0200
Subject: [PATCH 2/2] Add pull to refresh on PWA (with Marsey)

---
 files/assets/css/main.css            | 13 +++++++++++++
 files/assets/js/pwa_pulltorefresh.js | 19 +++++++++++++++++++
 files/templates/default.html         |  5 +++++
 files/templates/root.html            |  1 +
 4 files changed, 38 insertions(+)
 create mode 100644 files/assets/js/pwa_pulltorefresh.js

diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 641fda7fb..7862b02e1 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7069,6 +7069,19 @@ body *::-webkit-scrollbar {
 	cursor: default !important;
 }
 
+#pulltorefresh {
+	align-content: center;
+	justify-content: center;
+	position: absolute;
+	top: 12px;
+	width: 100%;
+	display: flex;
+}
+
+#pulltorefresh > img {
+	height: 50px;
+}
+
 body > .container {
 	--safe-area-inset-left: env(safe-area-inset-left);
 	--safe-area-inset-right: env(safe-area-inset-right);
diff --git a/files/assets/js/pwa_pulltorefresh.js b/files/assets/js/pwa_pulltorefresh.js
new file mode 100644
index 000000000..5dac57e5a
--- /dev/null
+++ b/files/assets/js/pwa_pulltorefresh.js
@@ -0,0 +1,19 @@
+const standalone = navigator.standalone || window.matchMedia("(display-mode: standalone)").matches;
+if (standalone) {
+	const img = document.getElementById("pulltorefresh-img");
+	const defaultImg = "/e/marseythinkorino.webp";
+	const thresholdImg = "/e/marseythumbsup.webp";
+	const threshold = -100;
+	
+	window.addEventListener("touchend", () => {
+		if (window.scrollY < threshold) {
+			window.location.reload();
+		}
+	});
+	
+	window.addEventListener("scroll", () => {
+		img.setAttribute("src", window.scrollY < threshold ? thresholdImg : defaultImg);
+	});
+} else {
+	document.getElementById("pulltorefresh").remove();
+}
diff --git a/files/templates/default.html b/files/templates/default.html
index 79d7f8c5c..5693544c8 100644
--- a/files/templates/default.html
+++ b/files/templates/default.html
@@ -1,6 +1,11 @@
 {%- extends 'root.html' -%}
 {% block body_attributes %}id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="has_header"{% endblock %}
 {% block body %}
+{% block pulltorefresh %}
+<div id="pulltorefresh">
+	<img id="pulltorefresh-img" src="/e/marseyunamused.webp">
+</div>
+{% endblock %}
 {% block banner %}
 	{% include "modals/expanded_image.html" %}
 	{% if err or '@' not in request.path %}
diff --git a/files/templates/root.html b/files/templates/root.html
index acb4ea870..f5c28e0a0 100644
--- a/files/templates/root.html
+++ b/files/templates/root.html
@@ -43,5 +43,6 @@
 			<div id="cursormarsey-heart" class="d-none"></div>
 			<script defer src="{{'js/cursormarsey.js' | asset}}"></script>
 		{% endif %}
+		<script defer src="{{'js/pwa_pulltorefresh.js' | asset}}"></script>
 	</body>
 </html>
-- 
2.34.1