Istruzioni per installare l'APP: Android, iOS

src/components/CCheckAppRunning/CCheckAppRunning.ts

@@ -24,6 +24,11 @@ export default defineComponent({
     const finishLoading = computed(() => globalStore.finishLoading)
 
     const deferredPrompt = computed(() => globalStore.deferredPrompt)
+    const homescreen = computed(() => globalStore.homescreen)
+
+
+    const viewiOS = ref(false)
+    const viewAndroid = ref(false)
 
     function installApp() {
       if (globalStore.deferredPrompt) {
@@ -56,6 +61,9 @@ export default defineComponent({
       installApp,
       isAppRunning,
       deferredPrompt,
+      viewiOS,
+      viewAndroid,
+      homescreen,
     }
   }
 })

src/components/CCheckAppRunning/CCheckAppRunning.vue

@@ -1,20 +1,96 @@
 <template>
   <div v-if="tools.isDebugOn()" class="bg-red text-white">
-    <span> isAppRunning: {{isAppRunning}} - </span>
-    <span> deferredPrompt: {{deferredPrompt}} - </span>
-    <span> finishLoading: {{finishLoading}} - </span>
+    <span> isAppRunning: {{ isAppRunning }} - </span>
+    <span> deferredPrompt: {{ deferredPrompt }} - </span>
+    <span> homescreen: {{ homescreen }} </span>
   </div>
-  <div v-if="finishLoading && !isAppRunning && deferredPrompt" class="row justify-center">
+  <div v-if="finishLoading" class="row justify-center">
+    <div v-if="!isAppRunning" class="q-ma-sm">
+      <!-- App not running -->
 
-    <q-btn
-      glossy
-      size="xl"
-      label="Installa App"
-      @click="installApp"
-      icon="fas fa-mobile-alt"
-      color="green"
-      text-color="white"
-    />
+      <q-btn
+        v-if="deferredPrompt"
+        glossy
+        size="xl"
+        label="Installa App"
+        @click="installApp"
+        icon="fas fa-mobile-alt"
+        color="green"
+        text-color="white"
+      ></q-btn>
+      <div v-else>
+        <div v-if="$q.platform.is.ios && $q.platform.is.safari">
+          <q-btn
+            glossy
+            size="xl"
+            label="Installa App su iOS"
+            @click="viewiOS = !viewiOS"
+            icon="fab fa-apple"
+            color="green"
+            text-color="white"
+          ></q-btn>
+
+          <q-slide-transition>
+            <!-- Mostra spiegazione per iOS -->
+            <div v-if="viewiOS">
+              <q-img
+                src="images/install_app_on_ios_1.png"
+                fit="contain"
+                style="min-width: 350px"
+                class="q-my-sm"
+              ></q-img
+              ><br />
+
+              <q-img
+                src="images/install_app_on_ios_1b.jpg"
+                class="q-mb-md"
+              ></q-img
+              ><br />
+
+              <q-img
+                src="images/install_app_on_ios_2.jpg"
+                fit="contain"
+              ></q-img>
+            </div>
+          </q-slide-transition>
+        </div>
+        <div v-if="$q.platform.is.android">
+          <q-btn
+            glossy
+            size="lg"
+            label="Installa App su Android"
+            @click="viewAndroid = !viewAndroid"
+            icon="fab fa-android"
+            color="green"
+            text-color="white"
+          ></q-btn>
+
+          <q-slide-transition>
+            <!-- Mostra spiegazione per Android -->
+            <div v-if="viewAndroid">
+              <div class="q-ma-sm text-h6"> 1) Cliccare sui 3 puntini verticali<br>
+              2) Cliccare su 'Installa App' o 'Schermata Home'
+              </div>
+              <q-img
+                src="images/install_app_on_android_1.jpg"
+                fit="contain"
+                style="min-width: 350px"
+                class="q-my-sm"
+              ></q-img
+              ><br />
+              <q-img
+                src="images/install_app_on_android_2.jpg"
+                fit="contain"
+                style="min-width: 350px"
+                class="q-my-sm"
+              ></q-img
+              ><br />
+            </div>
+          </q-slide-transition>
+        </div>
+      </div>
+
+    </div>
   </div>
   <!--<div class="row justify-center">
     <CBigBtn

src/components/MyHeader/MyHeader.ts

@@ -76,8 +76,14 @@ export default defineComponent({
       // if (tools.isDebug()) return 'bg-info'
       if (globalStore.site && globalStore.site.confpages?.col_toolbar)
         return 'bg-' + globalStore.site.confpages?.col_toolbar
-      else
-        return 'bg-light-blue'
+      else {
+        if (globalStore.homescreen) {
+          return 'bg-blue'
+        } else {
+          return 'bg-light-blue'
+        }
+      }
+
     })
 
     const getColorText = computed(() => {