diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 27f5bb6fa..7862b02e1 100644
--- a/files/assets/css/main.css
+++ b/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
}
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/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 %}
+
+
+
-