rDrama
/
rDrama
9
10
Fork 8
Code Issues Pull Requests Packages Releases Wiki Activity

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: #161
Co-authored-by: borntolurk <borntolurk@noreply.fsdfsd.net>
Co-committed-by: borntolurk <borntolurk@noreply.fsdfsd.net>
pull/164/head
borntolurk 2023-06-30 19:39:19 +00:00 committed by Aevann
parent fa70dc4e93
commit 0762f179b7
7 changed files with 62 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
files/assets/css/main.css
View File

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

6
files/assets/js/mobile_navigation_bar.js
View File

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

19
files/assets/js/pwa_pulltorefresh.js 100644
View File

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

5
files/templates/default.html
View File

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

2
files/templates/mobile_navigation_bar.html
View File

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

1
files/templates/root.html
View File

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

5
files/templates/util/html_head.html
View File

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