From 59024eea986393aa0a45d1e6b6772c33e7fcb73c Mon Sep 17 00:00:00 2001
From: Hagay Goshen <hagaygo@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:58:39 +0200
Subject: [PATCH] refactor: css: query: move width consts to css variables
 (#424)

* Move const panel width from code to css variables

* Update css/query.css

* Update css/query.css

---------

Co-authored-by: coderaiser <mnemonic.enemy@gmail.com>
---
 client/client.js | 6 ++++--
 css/query.css    | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/client.js b/client/client.js
index c9f268fe..7786823e 100644
--- a/client/client.js
+++ b/client/client.js
@@ -59,8 +59,10 @@ function CloudCmdProto(DOM) {
     this.prefixSocket = '';
     this.prefixURL = '';
     
-    this.MIN_ONE_PANEL_WIDTH = 1155;
-    this.MOBILE_ONE_PANEL_WIDTH = 600;
+    var bodyStyle = getComputedStyle(document.body);
+    this.MIN_ONE_PANEL_WIDTH = bodyStyle.getPropertyValue("--min-one-panel-width");
+    this.MOBILE_ONE_PANEL_WIDTH = bodyStyle.getPropertyValue('--mobile-max-width')
+    
     this.HOST = location.origin || location.protocol + '//' + location.host;
     
     this.TITLE = 'Cloud Commander';
diff --git a/css/query.css b/css/query.css
index 6e07a0c7..ee01e161 100644
--- a/css/query.css
+++ b/css/query.css
@@ -19,7 +19,10 @@
         width: 15%;
     }
 }
-
+:root {
+    --mobile-max-width: 600px;
+    --min-one-panel-width: 1155px;
+}
 @media only screen and (height <= 900px) and (width <= 600px) {
     .fm {
         height: 85%;