Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve mobile scrolling with changing viewport (#1781)

This commit is contained in:
Tim Wilkinson 2024-12-25 17:00:06 -08:00 committed by GitHub
parent 5d0bdc4ec8
commit 977a82c71b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
files/app/main/app.ut
View File

@ -129,20 +129,21 @@
}
}
}
document.body.addEventListener("click", closePopups);
document.addEventListener("DOMContentLoaded", _ => document.querySelector("meta[name=theme-color]").content = getComputedStyle(document.body).getPropertyValue("--nav-bg-color"));
let lastScrollTop = -1;
document.getElementById("m-main").addEventListener("scroll", e => {
window.addEventListener("scroll", e => {
const target = document.documentElement;
closePopups(e);
const newScrollTop = e.target.scrollTop;
const newScrollTop = target.scrollTop;
if (newScrollTop > 0 && newScrollTop > lastScrollTop) {
document.body.classList.add("hide-bars");
}
else if (newScrollTop < e.target.scrollHeight - e.target.clientHeight && newScrollTop < lastScrollTop) {
else if (newScrollTop < target.scrollHeight - target.clientHeight && newScrollTop < lastScrollTop) {
document.body.classList.remove("hide-bars");
}
lastScrollTop = newScrollTop;
});
document.body.addEventListener("click", closePopups);
document.addEventListener("DOMContentLoaded", _ => document.querySelector("meta[name=theme-color]").content = getComputedStyle(document.body).getPropertyValue("--nav-bg-color"));
})();
</script>
{% } %}

2
files/app/resource/css/admin.css
View File

@ -410,7 +410,7 @@ label.switch
background-color: var(--nav-bg-color);
border-top-right-radius: 10px;
border-left: 1px solid var(--ctrl-modal-bg-tertiary-color);
z-index: 1;
z-index: 5;
white-space: nowrap;
}
#tools input:checked ~ .menu

50
files/app/resource/css/mobile.css
View File

@ -1,3 +1,8 @@
body.mobile
{
overflow-x: hidden;
overflow-y: scroll;
}
#m-all
{
display: flex;
@ -8,10 +13,14 @@
}
#m-title
{
position: fixed;
display: flex;
top: 0;
height: 80px;
width: 100%;
z-index: 2;
background-color: var(--nav-bg-color);
transition: margin-top 0.4s;
transition: top 0.4s;
}
#m-title #icon-logo
{
@ -39,26 +48,33 @@ body.mobile hr
#m-main
{
flex: 1;
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
}
#main-container
{
overflow: hidden;
padding: 80px 0 100px 0;
}
#m-nav
{
position: fixed;
display: flex;
bottom: 0;
width: 100%;
height: 80px;
min-height: 80px;
z-index: 2;
background-color: var(--nav-bg-color);
overflow: hidden;
transition: height 0.4s, min-height 0.4s;
transition: bottom 0.4s;
}
body.hide-bars #m-title
body.hide-bars #m-title:has(#changes:empty)
{
margin-top: -80px;
top: -80px;
}
body.hide-bars #m-nav
{
height: 0px;
min-height: 0px;
bottom: -80px;
}
#m-main #main-container
@ -130,11 +146,21 @@ body.hide-bars #m-nav
{
width: 100px;
}
#m-nav #login-icon .menu
{
margin-left: -15px;
}
#m-nav #logout-icon .menu
{
margin-left: -30px;
}
#m-nav #login-icon .menu,
#m-nav #logout-icon .menu
{
position: fixed;
top: auto;
bottom: 70px;
bottom: 80px;
right: auto;
border-bottom-left-radius: 0;
border-top: none;
border-top-left-radius: 10px;
@ -142,8 +168,10 @@ body.hide-bars #m-nav
}
#m-nav #tools .menu
{
left: -26px;
bottom: 66px;
position: fixed;
bottom: 80px;
left: auto;
margin-left: -30px;
border-left: none;
border-bottom-left-radius: 0;
border-top-left-radius: 10px;