Some Corrections For Mobile

app.vue

@@ -12,6 +12,15 @@ const viewport = useViewport()
   console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
 })*/
 
+const platform = ref('default')
+
+const setup = async () => {
+  if(await useCapacitor().getIsPhone()) {
+    platform.value = "mobile"
+  }
+}
+setup()
+
 const dev = process.dev
 
 Sentry.init({
@@ -55,7 +64,7 @@ useSeoMeta({
       <NuxtPage/>
     </NuxtLayout>
 
-    <UNotifications/>
+    <UNotifications :class="platform === 'mobile' ? ['mb-14'] : []"/>
     <USlideovers />
     <UModals/>
     <VitePwaManifest/>

components/EntityEdit.vue

@@ -21,6 +21,9 @@ const props = defineProps({
   },
   inModal: {
     type: Boolean,
+  },
+  platform: {
+    type: String,
   }
 })
 
@@ -233,6 +236,9 @@ const updateItem = async () => {
       v-if="!props.inModal"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
     <template #left>
       <UButton
           icon="i-heroicons-chevron-left"
@@ -245,11 +251,12 @@ const updateItem = async () => {
     <template #center>
       <h1
           v-if="item"
-          :class="['text-xl','font-medium']"
+          :class="['text-xl','font-medium', 'text-center']"
       >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
     </template>
     <template #right>
       <ButtonWithConfirm
+          v-if="platform !== 'mobile'"
           color="rose"
           variant="outline"
           @confirmed="dataStore.updateItem(type,{...item,archived: true}, oldItem)"
@@ -279,7 +286,7 @@ const updateItem = async () => {
       <UButton
           @click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
           color="red"
-          class="ml-2"
+          class="ml-1"
       >
         Abbrechen
       </UButton>
@@ -323,10 +330,10 @@ const updateItem = async () => {
     <UForm
         class="p-5"
     >
-      <div class="flex flex-row">
+      <div :class="platform ===  'mobile' ?['flex','flex-col'] : ['flex','flex-row']">
         <div
             v-for="(columnName,index) in dataType.inputColumns"
-            :class="['w-1/2', ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
+            :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
         >
           <UDivider>{{columnName}}</UDivider>
 

components/EntityList.vue

@@ -108,7 +108,7 @@ const filteredRows = computed(() => {
    :label="`+ ${dataType.labelSingle}`"
    variant="outline"
    v-if="platform === 'mobile'"
-   @click="router.push(`/mobile/standardEntity/${type}/create`)"
+   @click="router.push(`/standardEntity/${type}/create`)"
   />
   <UDashboardNavbar :title="dataType.label" :badge="filteredRows.length">
     <template #toggle>

components/HistoryDisplay.vue

@@ -21,9 +21,12 @@ const showAddHistoryItemModal = ref(false)
 const colorMode = useColorMode()
 
 const items = ref([])
+const platform = ref("default")
 
 const setup = async () => {
 
+  if(await useCapacitor().getIsPhone()) platform.value = "mobile"
+
   if(props.type && props.elementId){
     items.value = (await supabase.from("historyitems").select().eq(props.type,props.elementId).order("created_at",{ascending: true})).data || []
   } else {
@@ -102,10 +105,16 @@ const renderText = (text) => {
 <template>
   <UModal
     v-model="showAddHistoryItemModal"
+
   >
-    <UCard>
+    <UCard class="h-full">
       <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             Eintrag hinzufügen
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
+        </div>
       </template>
 
       <UFormGroup

pages/mobile/menu.vue

@@ -10,7 +10,9 @@ definePageMeta({
   <UDashboardPanelContent>
 
     <UButton
-        class="w-full my-1">
+        class="w-full my-1"
+        to="/standardEntity/absencerequests"
+    >
       Abwesenheiten
     </UButton>
     <UButton
@@ -18,15 +20,21 @@ definePageMeta({
       Kalender
     </UButton>
     <UButton
-        class="w-full my-1">
+        class="w-full my-1"
+      to="/standardEntity/customers"
+    >
       Kunden
     </UButton>
     <UButton
-        class="w-full my-1">
+        class="w-full my-1"
+        to="/standardEntity/vendors"
+    >
       Lieferanten
     </UButton>
     <UButton
-        class="w-full my-1">
+        class="w-full my-1"
+        to="/standardEntity/plants"
+    >
       Objekte
     </UButton>
 

pages/standardEntity/[type]/[[mode]]/[[id]].vue

@@ -70,6 +70,7 @@ setupPage()
       :type="route.params.type"
       :item="item"
       :mode="mode"
+      :platform="platform"
   />
   <EntityList
       v-else-if="loaded && mode === 'list'"

stores/profile.js

@@ -40,7 +40,10 @@ export const useProfileStore = defineStore('profile', () => {
         let profiles = (await supabase.from("profiles").select("*, role(*)")).data
         let activeProfileConnection = profileconnections.find(i => i.active)
         if(activeProfileConnection) {
+            if(!await useCapacitor().getIsPhone()) {
                 toast.add({title: 'Aktives Profil ausgewählt'})
+            }
+
             console.log("Active Profile selected")
             activeProfile.value = profiles.find(i => i.id === activeProfileConnection.profile_id)
             currentTenant.value = activeProfile.value.tenant