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

Improve handing of safe area on iOS PWA

pull/161/head
borntolurk 2023-06-30 18:52:02 +02:00
parent b12b057114
commit b15aa83ff7
4 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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