From 2d07f9ed0a4e4f8c81e8249f42023b148601f606 Mon Sep 17 00:00:00 2001
From: Nicolas TESSIER <nicolas.tessier@thetribe.io>
Date: Mon, 21 Apr 2025 23:37:20 +0200
Subject: [PATCH] feat(manager): upgrade de mobile support

---
 projects/manager3/quasar.config.mjs           |  1 +
 projects/manager3/src/boot/platform.ts        |  6 ++++
 .../manager3/src/composables/usePlatform.ts   | 31 +++++++++++++++++++
 projects/manager3/src/css/app.sass            | 12 +++++++
 4 files changed, 50 insertions(+)
 create mode 100644 projects/manager3/src/boot/platform.ts
 create mode 100644 projects/manager3/src/composables/usePlatform.ts

diff --git a/projects/manager3/quasar.config.mjs b/projects/manager3/quasar.config.mjs
index ffaa25b04e..ed7f910124 100644
--- a/projects/manager3/quasar.config.mjs
+++ b/projects/manager3/quasar.config.mjs
@@ -52,6 +52,7 @@ export default configure((ctx) => ({
     'quasar-lang-pack',
     'mqtt',
     'apexcharts',
+    'platform',
   ],
 
   // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
diff --git a/projects/manager3/src/boot/platform.ts b/projects/manager3/src/boot/platform.ts
new file mode 100644
index 0000000000..360be9cce2
--- /dev/null
+++ b/projects/manager3/src/boot/platform.ts
@@ -0,0 +1,6 @@
+import { boot } from 'quasar/wrappers';
+import { usePlatform } from 'src/composables/usePlatform';
+
+export default boot(() => {
+  usePlatform();
+});
diff --git a/projects/manager3/src/composables/usePlatform.ts b/projects/manager3/src/composables/usePlatform.ts
new file mode 100644
index 0000000000..3d6fcbd8cd
--- /dev/null
+++ b/projects/manager3/src/composables/usePlatform.ts
@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+const isIOS = ref(false);
+const isAndroid = ref(false);
+const isMobile = ref(false);
+
+const detectPlatform = () => {
+  const ua = navigator.userAgent;
+
+  isIOS.value = /iP(ad|hone|od)/.test(ua);
+  isAndroid.value = /Android/.test(ua);
+  isMobile.value = isIOS.value || isAndroid.value;
+
+  if (isIOS.value) {
+    document.documentElement.classList.add('is-ios');
+  }
+
+  if (isAndroid.value) {
+    document.documentElement.classList.add('is-android');
+  }
+};
+
+detectPlatform();
+
+export function usePlatform() {
+  return {
+    isIOS,
+    isAndroid,
+    isMobile,
+  };
+}
diff --git a/projects/manager3/src/css/app.sass b/projects/manager3/src/css/app.sass
index 6a3b571062..a484f87618 100644
--- a/projects/manager3/src/css/app.sass
+++ b/projects/manager3/src/css/app.sass
@@ -204,6 +204,18 @@ $icon-recalbox-buttons: "\e905"
   .home .home-emustation
     height: calc(100vh - 292px - 5em)
 
+@media(max-width: 950px)
+  .is-ios
+    .absolute-full
+      right: 0!important
+
+    ::-webkit-scrollbar-track
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
+
+    ::-webkit-scrollbar-thumb
+      border-radius: 0
+
 // Custom background et text classes
 .text-dark-grey-light
   color: $dark-grey-light !important
-- 
GitLab