PWA fixes (#161)

* Content now takes the whole screen on latest iPhones and bottom bar now respects the bottom safe area inset
* You can now pull to refresh in PWA

Co-authored-by: borntolurk <borntolurk@rdrama.net>
Reviewed-on: rDrama/rDrama#161
Co-authored-by: borntolurk <borntolurk@noreply.fsdfsd.net>
Co-committed-by: borntolurk <borntolurk@noreply.fsdfsd.net>

files/assets/css/main.css

@@ -7069,9 +7069,24 @@ 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 {
-	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 +7494,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
 }

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`;
 		}
 	}
 

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();
+}

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 %}

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">

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>

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">