diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle index 2f7b796c..cdbd1add 100644 --- a/android/app/capacitor.build.gradle +++ b/android/app/capacitor.build.gradle @@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle" dependencies { implementation project(':capacitor-clipboard') implementation project(':capacitor-haptics') + implementation project(':capacitor-plugin-safe-area') } diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle index 4b00e0fa..dc108f46 100644 --- a/android/capacitor.settings.gradle +++ b/android/capacitor.settings.gradle @@ -7,3 +7,6 @@ project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacito include ':capacitor-haptics' project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android') + +include ':capacitor-plugin-safe-area' +project(':capacitor-plugin-safe-area').projectDir = new File('../node_modules/capacitor-plugin-safe-area/android') diff --git a/ios/App/Podfile b/ios/App/Podfile index 3d7cfda8..6c66e44a 100644 --- a/ios/App/Podfile +++ b/ios/App/Podfile @@ -13,6 +13,7 @@ def capacitor_pods pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios' pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard' pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics' + pod 'CapacitorPluginSafeArea', :path => '../../node_modules/capacitor-plugin-safe-area' end target 'App' do diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock index 5d58362a..e5813b67 100644 --- a/ios/App/Podfile.lock +++ b/ios/App/Podfile.lock @@ -6,12 +6,15 @@ PODS: - CapacitorCordova (6.0.0) - CapacitorHaptics (6.0.2): - Capacitor + - CapacitorPluginSafeArea (3.0.4): + - Capacitor DEPENDENCIES: - "Capacitor (from `../../node_modules/@capacitor/ios`)" - "CapacitorClipboard (from `../../node_modules/@capacitor/clipboard`)" - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)" - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)" + - CapacitorPluginSafeArea (from `../../node_modules/capacitor-plugin-safe-area`) EXTERNAL SOURCES: Capacitor: @@ -22,13 +25,16 @@ EXTERNAL SOURCES: :path: "../../node_modules/@capacitor/ios" CapacitorHaptics: :path: "../../node_modules/@capacitor/haptics" + CapacitorPluginSafeArea: + :path: "../../node_modules/capacitor-plugin-safe-area" SPEC CHECKSUMS: Capacitor: 559d073c4ca6c27f8e7002c807eea94c3ba435a9 CapacitorClipboard: 55e0a514f1e97b1409d533266c119dcbff3e78c3 CapacitorCordova: 8c4bfdf69368512e85b1d8b724dd7546abeb30af CapacitorHaptics: b53409aaca1203f79c6d0eb3ed5de40556339518 + CapacitorPluginSafeArea: 237b6023aa7c3c1d4b245c12f73ae02e55093a50 -PODFILE CHECKSUM: 76c1648fb6ed5cd9fba3d90514994da94e1cde2d +PODFILE CHECKSUM: fc2fb6bcae9257aa9abd8d6c141005bce765fe5c COCOAPODS: 1.16.2 diff --git a/package-lock.json b/package-lock.json index 9b06f42a..e010df22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "@vueuse/core": "^10.9.0", "axios": "^1.6.8", "bech32": "^2.0.0", + "capacitor-plugin-safe-area": "^3.0.4", "core-js": "^3.37.0", "date-fns": "^3.6.0", "light-bolt11-decoder": "^3.1.1", @@ -6831,6 +6832,15 @@ } ] }, + "node_modules/capacitor-plugin-safe-area": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/capacitor-plugin-safe-area/-/capacitor-plugin-safe-area-3.0.4.tgz", + "integrity": "sha512-Ccw0MMSo+IPDWZT5qGS6PSV5ifRBBrq/TnejVHZeIULgxkMeTxzdwoPRczCTF/oAZgcLVeaahQrF7c8Gh9wqVw==", + "license": "MIT", + "peerDependencies": { + "@capacitor/core": "^6.0.0" + } + }, "node_modules/caw": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz", diff --git a/package.json b/package.json index f1f8f5e1..5f3a16b0 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@vueuse/core": "^10.9.0", "axios": "^1.6.8", "bech32": "^2.0.0", + "capacitor-plugin-safe-area": "^3.0.4", "core-js": "^3.37.0", "date-fns": "^3.6.0", "light-bolt11-decoder": "^3.1.1", diff --git a/src/boot/base.js b/src/boot/base.js index 02cd8a2b..c446e566 100644 --- a/src/boot/base.js +++ b/src/boot/base.js @@ -1,6 +1,7 @@ import { copyToClipboard } from "quasar"; import { useUiStore } from "stores/ui"; import { Clipboard } from "@capacitor/clipboard"; +import { SafeArea } from "capacitor-plugin-safe-area"; window.LOCALE = "en"; // window.EventHub = new Vue(); @@ -217,5 +218,28 @@ window.windowMixin = { } else { this.changeColor("monochrome"); } + + // only for iOS + if (window.Capacitor && Capacitor.getPlatform() === "ios") { + SafeArea.getStatusBarHeight().then(({ statusBarHeight }) => { + document.documentElement.style.setProperty( + `--safe-area-inset-top`, + `${statusBarHeight}px` + ); + }); + + SafeArea.removeAllListeners(); + + // when safe-area changed + SafeArea.addListener("safeAreaChanged", (data) => { + const { insets } = data; + for (const [key, value] of Object.entries(insets)) { + document.documentElement.style.setProperty( + `--safe-area-inset-${key}`, + `${value}px` + ); + } + }); + } }, }; diff --git a/src/css/app.scss b/src/css/app.scss index d0f5f3db..fd5f2d95 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -5,6 +5,17 @@ body { overscroll-behavior-y: contain; } +body, +#q-app, +.q-drawer, +.q-layout, +.q-header, +.q-dialog__inner > div, +.q-notification { + margin-top: var(--safe-area-inset-top); + // margin-top: 100px; // for testing +} + .q-dialog__inner > div { border-top-left-radius: 0px; border-top-right-radius: 0px;