fix: try to fix insets

This commit is contained in:
ThaUnknown 2023-11-18 18:47:22 +01:00
parent 1d450ba778
commit 94155bdd59
7 changed files with 57 additions and 28 deletions

View file

@ -3,7 +3,7 @@
"private": true,
"scripts": {
"build:app": "build:web && build:android",
"build:web": "cross-env NODE_ENV=development webpack build",
"build:web": "cross-env NODE_ENV=production webpack build",
"build:android": "cap build android",
"build:ios": "run-s build:app cap-run:ios",
"cap:android-emulator": "cap run android --target=Pixel_XL_API_33 --external --public-host=10.5.0.2 && dev:localhost-bind",
@ -40,11 +40,14 @@
"@capacitor/core": "^5.5.1",
"@capacitor/ios": "^5.5.1",
"@capacitor/status-bar": "^5.0.6",
"@mauricewegner/capacitor-navigation-bar": "^2.0.3",
"@superfrogbe/cordova-plugin-chrome-apps-sockets-udp": "github:superfrogbe/cordova-plugin-chrome-apps-sockets-udp",
"capacitor-plugin-safe-area": "^2.0.5",
"common": "workspace:*",
"cordova-plugin-chrome-apps-common": "^1.0.7",
"cordova-plugin-chrome-apps-sockets-tcp": "github:KoenLav/cordova-plugin-chrome-apps-sockets-tcp",
"cordova-plugin-navigationbar": "^1.0.31",
"cordova-plugin-screen-orientation": "^3.0.4",
"es6-promise-plugin": "^4.2.2",
"webpack-merge": "^5.10.0"
}
}

View file

@ -1,23 +1,24 @@
/* globals navigationbar */
import TorrentClient from 'common/modules/webtorrent.js'
import { ipcRendererWebTorrent } from './ipc.js'
import { StatusBar, Style } from '@capacitor/status-bar'
import { NavigationBar } from '@mauricewegner/capacitor-navigation-bar'
import { SafeArea } from 'capacitor-plugin-safe-area'
SafeArea.addListener('safeAreaChanged', data => {
const { insets } = data
for (const [key, value] of Object.entries(insets)) {
document.documentElement.style.setProperty(
`--safe-area-${key}`,
`${value}px`
)
}
})
StatusBar.hide()
StatusBar.setStyle({ style: Style.Dark })
StatusBar.setOverlaysWebView({ overlay: true })
NavigationBar.setColor({ color: '#17191c' })
function hideAndroidNavBar () {
NavigationBar.hide()
// NavigationBar.setTransparency({ isTransparent: true })
}
screen.orientation.addEventListener('change', () => {
hideAndroidNavBar()
})
hideAndroidNavBar()
navigationbar.setUp(true)
globalThis.chrome.runtime = { lastError: false, id: 'something' }

View file

@ -60,7 +60,7 @@
}
@media (min-width: 769px) {
.page-wrapper {
padding-left: env(safe-area-inset-left) !important;
padding-left: env(safe-area-inset-left, var(--safe-area-left)) !important;
}
}
</style>

View file

@ -22,6 +22,8 @@
--gray-color-light: hsl(var(--gray-color-light-hsl));
--gray-color-light-hsl: var(--gray-color-base-hue), 10%, 28%;
--gray-color-base-hue: 216;
--safe-area-top: 0px;
--safe-area-left: 0px;
color-scheme: dark;
}

View file

@ -1377,7 +1377,7 @@
}
.top {
padding-top: env(safe-area-inset-top) !important;
padding-top: env(safe-area-inset-top, var(--safe-area-top)) !important;
}
}

View file

@ -78,7 +78,7 @@ module.exports = (parentDir, alias = {}, aliasFields = 'browser', filename = 'ap
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#17191C">
<title>Miru</title>

View file

@ -71,12 +71,12 @@ importers:
'@capacitor/status-bar':
specifier: ^5.0.6
version: 5.0.6(@capacitor/core@5.5.1)
'@mauricewegner/capacitor-navigation-bar':
specifier: ^2.0.3
version: 2.0.3(@capacitor/core@5.5.1)
'@superfrogbe/cordova-plugin-chrome-apps-sockets-udp':
specifier: github:superfrogbe/cordova-plugin-chrome-apps-sockets-udp
version: github.com/superfrogbe/cordova-plugin-chrome-apps-sockets-udp/4b740017299c81cfc7d5b49c7d6122a6650b57d4
capacitor-plugin-safe-area:
specifier: ^2.0.5
version: 2.0.5(@capacitor/core@5.5.1)
common:
specifier: workspace:*
version: link:../common
@ -86,6 +86,15 @@ importers:
cordova-plugin-chrome-apps-sockets-tcp:
specifier: github:KoenLav/cordova-plugin-chrome-apps-sockets-tcp
version: github.com/KoenLav/cordova-plugin-chrome-apps-sockets-tcp/f06fbc33befc34709210f657bf6674aea0ca8f88
cordova-plugin-navigationbar:
specifier: ^1.0.31
version: 1.0.31
cordova-plugin-screen-orientation:
specifier: ^3.0.4
version: 3.0.4
es6-promise-plugin:
specifier: ^4.2.2
version: 4.2.2
webpack-merge:
specifier: ^5.10.0
version: 5.10.0
@ -669,14 +678,6 @@ packages:
- supports-color
dev: true
/@mauricewegner/capacitor-navigation-bar@2.0.3(@capacitor/core@5.5.1):
resolution: {integrity: sha512-E8HTcVkZEqm4tLJ7MpkTlqc93mboUSbJL41fFbvEaVwBhpgenEezkK268RxwQDij5hkudZmo4/eRXG3aJQwrzQ==}
peerDependencies:
'@capacitor/core': ^4.0.1 || ^5.0.0
dependencies:
'@capacitor/core': 5.5.1
dev: false
/@nodelib/fs.scandir@2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@ -2088,6 +2089,14 @@ packages:
/caniuse-lite@1.0.30001551:
resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==}
/capacitor-plugin-safe-area@2.0.5(@capacitor/core@5.5.1):
resolution: {integrity: sha512-Lg3P+/aW2/+C3gz2/xZFdfjgkOJ/ZSFTmZSxLaSY6lIudOTjwVpjoxhAyKUz1tc13Carjqdlq01yRrr++XOzAg==}
peerDependencies:
'@capacitor/core': ^5.0.0
dependencies:
'@capacitor/core': 5.5.1
dev: false
/chalk@2.4.2:
resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
engines: {node: '>=4'}
@ -2567,6 +2576,16 @@ packages:
engines: {'0': {name: cordova, version: '>=3.0.0'}}
dev: false
/cordova-plugin-navigationbar@1.0.31:
resolution: {integrity: sha512-xt9tx5Aprf052OvuG2JohjRkkU/6U6XQ8mXOx93HaHFz6cCZI1+B0pl/uoyU/FkJsP41QIw1upnMdzgav11ifw==}
engines: {'0': {name: cordova, version: '>=3.0.0'}}
dev: false
/cordova-plugin-screen-orientation@3.0.4:
resolution: {integrity: sha512-AswRuUKJ8J3HycUilTJsIB50aa9TLrwndPNBFG+wfAPhHEqIBF0HaD0q3HbAK7ypgmaj0cvbzk84qP51IcTfrQ==}
engines: {cordovaDependencies: {4.0.0: {cordova: '>100'}}}
dev: false
/cordova-res@0.15.4:
resolution: {integrity: sha512-TjFZhjUtK8qq4DVrgR+KI7tKcUL704cnkTPRhHbKlCPzefHoz1tBOX93wc76dOMmOWKTsbJz83DIm6mqdp5Pmg==}
engines: {node: '>=10.3.0'}
@ -3322,6 +3341,10 @@ packages:
dev: true
optional: true
/es6-promise-plugin@4.2.2:
resolution: {integrity: sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA==}
dev: false
/escalade@3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
engines: {node: '>=6'}