From 6f4eefe60181a9913155ec8c1cc644bf78b23ea3 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Fri, 21 Mar 2025 15:09:05 +0000
Subject: [PATCH] chore: make class to get the device form factor

---
 web/assets/js/util/index.js       | 6 ++++++
 web/html/common/qrcode_modal.html | 3 +--
 web/html/xui/inbounds.html        | 4 ++--
 web/html/xui/index.html           | 2 +-
 web/html/xui/xray.html            | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index 85d53352..625af8b9 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -780,4 +780,10 @@ class LanguageManager {
     
         return languageFilter.length > 0;
     }    
+}
+
+class DeviceUtils {
+    static isMobile() {
+        return window.innerWidth <= 768;
+    }
 }
\ No newline at end of file
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 5ea1ca95..93d66fc2 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,6 +1,6 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-    :dialog-style="isMobileQr ? { top: '18px' } : {}"
+    :dialog-style="DeviceUtils.isMobile() ? { top: '18px' } : {}"
     :closable="true"
     :class="themeSwitcher.currentTheme"
     :footer="null" width="fit-content">
@@ -35,7 +35,6 @@
 </a-modal>
 
 <script>
-  const isMobileQr = window.innerWidth <= 768;
   const qrModal = {
     title: '',
     dbInbound: new DBInbound(),
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 758de9e8..94333429 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -709,7 +709,7 @@
             showAlert: false,
             ipLimitEnable: false,
             pageSize: 50,
-            isMobile: window.innerWidth <= 768,
+            isMobile: DeviceUtils.isMobile(),
         },
         methods: {
             loading(spinning = true) {
@@ -1473,7 +1473,7 @@
                 return false
             },
             onResize() {
-                this.isMobile = window.innerWidth <= 768;
+              this.isMobile = DeviceUtils.isMobile();
             }
         },
         watch: {
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 92b25d5c..c072893d 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -601,7 +601,7 @@
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
             showIp: false,
-            isMobile: window.innerWidth <= 768
+            isMobile: DeviceUtils.isMobile()
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index 8ba14f7d..f8f3071d 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -877,7 +877,7 @@
             refreshing: false,
             restartResult: '',
             showAlert: false,
-            isMobile: window.innerWidth <= 768,
+            isMobile: DeviceUtils.isMobile(),
             advSettings: 'xraySetting',
             obsSettings: '',
             cm: null,