diff --git a/src/App.vue b/src/App.vue index 7edbe078..5ead13d0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -238,6 +238,11 @@ export default defineComponent({ }, }) ); + + // Check for native interface + if (window.nativex?.isNative()) { + document.body.classList.add('native'); + } }, async beforeMount() { diff --git a/src/global.scss b/src/global.scss index 783ec0da..9e5d5d8b 100644 --- a/src/global.scss +++ b/src/global.scss @@ -2,6 +2,18 @@ body { overflow: hidden; } +// Native app styles +body.native { + #content-vue { + margin-top: 0 !important; + height: 100vh !important; + } + + #header { + display: none !important; + } +} + // Nextcloud 25+: get rid of gap and border radius at right #content-vue.remove-gap { // was var(--body-container-radius) @@ -25,12 +37,6 @@ body { border-top-left-radius: var(--body-container-radius); border-bottom-left-radius: var(--body-container-radius); } - - // Nothing on top - body.layout-base & { - margin-top: 0 !important; - height: 100vh !important; - } } // Top bar is above everything else on mobile diff --git a/src/main.ts b/src/main.ts index 1220ded0..0deaddb2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,6 +12,7 @@ import { getRequestToken } from '@nextcloud/auth'; import type { Route } from 'vue-router'; import type { IPhoto } from './types'; +import type { NativeX } from './types-native'; import type PlyrType from 'plyr'; import type videojsType from 'video.js'; @@ -48,6 +49,8 @@ declare global { var Plyr: typeof PlyrType; var videoClientId: string; var videoClientIdPersistent: string; + + var nativex: NativeX | undefined; } // Allow global access to the router diff --git a/src/types-native.ts b/src/types-native.ts new file mode 100644 index 00000000..9165dcad --- /dev/null +++ b/src/types-native.ts @@ -0,0 +1,3 @@ +export type NativeX = { + isNative: () => boolean; +};