Cahnges to make compatible

app.vue

@@ -19,7 +19,7 @@ const dev = process.dev
 useHead({
   title:"FEDEO",
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
   ],
   link: [
     { rel: 'icon', href: '/favicon.ico' }
@@ -45,14 +45,17 @@ useSeoMeta({
 </script>
 
 <template>
-  <NuxtLayout>
+  <div class="safearea">
-    <NuxtPage/>
+    <NuxtLayout>
-  </NuxtLayout>
+      <NuxtPage/>
+    </NuxtLayout>
+
+    <UNotifications/>
+    <USlideovers />
+    <UModals />
+    <VitePwaManifest/>
+  </div>
 
-  <UNotifications/>
-  <USlideovers />
-  <UModals />
-  <VitePwaManifest/>
 
 
 </template>
@@ -122,5 +125,11 @@ useSeoMeta({
     color: #69c350
   }
 
-
+.safearea {
+  margin-top: env(safe-area-inset-top, 10px) !important;
+  margin-left: env(safe-area-inset-left, 5px) !important;
+  margin-right: env(safe-area-inset-right, 5px) !important;
+  margin-bottom: env(safe-area-inset-bottom, 37px) !important;
+  /*background-color: grey;*/
+}
 </style>

capacitor.config.ts

@@ -6,6 +6,10 @@ const config: CapacitorConfig = {
   webDir: 'dist',
   ios: {
     handleApplicationNotifications: false
+  },
+  server: {
+    url: "http://192.168.1.226:3000",
+    cleartext: true
   }
 };
 

composables/useCapacitor.js

@@ -0,0 +1,30 @@
+import {Capacitor} from "@capacitor/core";
+import {Device} from "@capacitor/device";
+import {Network} from "@capacitor/network";
+
+export const useCapacitor = () => {
+    const getPlatform = () => {
+        return Capacitor.getPlatform()
+    }
+
+    const getDeviceInfo = async () => {
+        return await Device.getInfo()
+    }
+
+    const getIsPhone = async () => {
+        let deviceInfo = await useCapacitor().getDeviceInfo()
+
+        if(deviceInfo.model.toLowerCase().includes('iphone')) {
+            return true
+        } else {
+            return false
+        }
+    }
+
+    const getNetworkStatus = async () => {
+        return await Network.getStatus()
+    }
+
+
+    return {getPlatform, getDeviceInfo, getNetworkStatus, getIsPhone}
+}

composables/useFiles.js

@@ -1,4 +1,3 @@
-import index from "v-calendar";
 
 export const useFiles = () => {
     const supabase = useSupabaseClient()

ios/App/Podfile

@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
   pod 'CapacitorNetwork', :path => '../../node_modules/@capacitor/network'
+  pod 'CapacitorPluginSafeArea', :path => '../../node_modules/capacitor-plugin-safe-area'
   pod 'CordovaPluginsStatic', :path => '../capacitor-cordova-ios-plugins'
 end
 

ios/App/Podfile.lock

@@ -6,6 +6,8 @@ PODS:
     - Capacitor
   - CapacitorNetwork (7.0.0):
     - Capacitor
+  - CapacitorPluginSafeArea (4.0.0):
+    - Capacitor
   - CordovaPluginsStatic (7.1.0):
     - CapacitorCordova
     - OneSignalXCFramework (= 5.2.10)
@@ -61,6 +63,7 @@ DEPENDENCIES:
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorDevice (from `../../node_modules/@capacitor/device`)"
   - "CapacitorNetwork (from `../../node_modules/@capacitor/network`)"
+  - CapacitorPluginSafeArea (from `../../node_modules/capacitor-plugin-safe-area`)
   - CordovaPluginsStatic (from `../capacitor-cordova-ios-plugins`)
   - OneSignalXCFramework (< 6.0, >= 5.0)
 
@@ -77,6 +80,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/device"
   CapacitorNetwork:
     :path: "../../node_modules/@capacitor/network"
+  CapacitorPluginSafeArea:
+    :path: "../../node_modules/capacitor-plugin-safe-area"
   CordovaPluginsStatic:
     :path: "../capacitor-cordova-ios-plugins"
 
@@ -85,9 +90,10 @@ SPEC CHECKSUMS:
   CapacitorCordova: 866217f32c1d25b326c568a10ea3ed0c36b13e29
   CapacitorDevice: 069faf433b3a99c3d5f0e500fbe634f60a8c6a84
   CapacitorNetwork: 30c2e78a0ed32530656cb426c8ee6c2caec10dbf
+  CapacitorPluginSafeArea: 22031c3436269ca80fac90ec2c94bc7c1e59a81d
   CordovaPluginsStatic: f722d4ff434f50099581e690d579b7c108f490e6
   OneSignalXCFramework: 1a3b28dfbff23aabce585796d23c1bef37772774
 
-PODFILE CHECKSUM: a76b76ce1d80d4f5e496b01be96018c23d93b734
+PODFILE CHECKSUM: ccfbce7f13cfefd953204fe26b280d6431731aa5
 
 COCOAPODS: 1.16.2

layouts/default.vue

@@ -4,6 +4,7 @@
 import MainNav from "~/components/MainNav.vue";
 import dayjs from "dayjs";
 import {useProfileStore} from "~/stores/profile.js";
+import {useCapacitor} from "../composables/useCapacitor.js";
 
 const dataStore = useDataStore()
 const profileStore = useProfileStore()
@@ -107,14 +108,13 @@ const footerLinks = [/*{
   click: () => isHelpSlideoverOpen.value = true
 }]
 
-
 </script>
 
 <template>
-  <UDashboardLayout  v-if="profileStore.loaded">
+  <UDashboardLayout class="safearea"  v-if="profileStore.loaded">
 
     <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
-      <UDashboardNavbar class="!border-transparent" :ui="{ left: 'flex-1' }">
+      <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
         <template #left>
           <ProfileDropdown class="w-full" />
         </template>
@@ -122,7 +122,7 @@ const footerLinks = [/*{
 
       <UDashboardSidebar id="sidebar">
         <template #header>
-          <UDashboardSearchButton label="Suche..."/>
+          <UDashboardSearchButton v-if="!useCapacitor().getIsPhone()" label="Suche..."/>
         </template>
 
         <MainNav/>
@@ -130,13 +130,12 @@ const footerLinks = [/*{
         <div class="flex-1" />
 
 
-
         <template #footer>
           <div class="flex flex-col w-full">
 
             <UDashboardSidebarLinks :links="footerLinks" />
             <UDivider class="sticky bottom-0" />
-            <UserDropdown />
+            <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/>
           </div>
 
         </template>

package.json

@@ -53,6 +53,7 @@
     "axios": "^1.6.7",
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
+    "capacitor-plugin-safe-area": "^4.0.0",
     "chart.js": "^4.4.4",
     "client-oauth2": "^4.3.3",
     "date-fns": "^3.6.0",
@@ -69,6 +70,7 @@
     "pinia": "^2.1.7",
     "sass": "^1.69.7",
     "socket.io-client": "^4.7.2",
+    "tailwindcss-safe-area-capacitor": "^0.5.1",
     "uuid": "^11.0.3",
     "uuidv4": "^6.2.13",
     "v-calendar": "^3.1.2",

tailwind.config.ts

@@ -21,5 +21,8 @@ export default <Partial<Config>>{
                 }
             }
         }
-    }
+    },
+    plugins: [
+        require('tailwindcss-safe-area-capacitor'),
+    ]
 }