admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web: improvements for android web app

Browse Source 
- reduced padding when installed as standalone
- now attempting to color the navigation bar
This commit is contained in:
wukko
2024-05-12 19:34:48 +06:00
parent 05301f1cd5
commit d57fe93234
3 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/front/cobalt.css
View File

@@ -1171,7 +1171,7 @@ button:active,
.tab-content-settings,
#picker-holder {
padding-bottom: calc(var(--padding) + 3.5rem);
padding-top: calc(var(--padding) + 3rem);
padding-top: calc(var(--padding) + 3rem - var(--padding-small));
}
#footer,
.popup-tabs {
@@ -1191,7 +1191,7 @@ button:active,
}
.tab-content-settings,
#tab-about-about .popup-content-inner {
padding-top: 5rem;
padding-top: calc(5rem - var(--padding-small));
}
}
@media screen and (max-width: 535px) and (display-mode: standalone) {
@@ -1252,4 +1252,18 @@ button:active,
calc(4rem - var(--padding) + var(--padding-small))
);
}
.android .popup-header {
padding-top: var(--padding);
}
.android .popup-content-inner,
.android .tab-content-settings,
.android #picker-holder {
padding-bottom: calc(var(--padding) + 3.5rem);
padding-top: calc(var(--padding) + 3rem - var(--padding-small));
}
.android .tab-content-settings,
.android #tab-about-about .popup-content-inner {
padding-top: calc(5rem - var(--padding-small));
}
}

5
src/front/cobalt.js
View File

@@ -1,5 +1,6 @@
const ua = navigator.userAgent.toLowerCase();
const isIOS = ua.includes("iphone os") || (ua.includes("mac os") && navigator.maxTouchPoints > 0);
const isAndroid = ua.includes("android");
const isMobile = ua.includes("android") || isIOS;
const isSafari = ua.includes("safari/");
const isFirefox = ua.includes("firefox/");
@@ -167,6 +168,7 @@ const changeStatusBarColor = () => {
}
document.querySelector('meta[name="theme-color"]').setAttribute('content', colors[state]);
document.querySelector('meta[name="background-color"]').setAttribute('content', colors[state]);
}
const detectColorScheme = () => {
document.documentElement.setAttribute("data-theme", preferredColorScheme());
@@ -626,6 +628,9 @@ const loadSettings = () => {
if (!isMobile) {
eid("cobalt-body").classList.add('desktop');
}
if (isAndroid) {
eid("cobalt-body").classList.add('android');
}
if (isIOS) {
eid("download-switcher")
.querySelector(".explanation")