Merge branch 'master' into fixed-cloud-icon

ioBroker · Oct 27, 2024 · 1750f4e · 1750f4e
2 parents feb2c71 + 91cdfea
commit 1750f4e
Showing 1 changed file with 67 additions and 50 deletions.
diff --git a/packages/admin/src-admin/public/js/adapter-settings.js b/packages/admin/src-admin/public/js/adapter-settings.js
@@ -485,81 +485,98 @@ function preInit() {
             });
 
             // Design Fix simatec
+            checkMediaQuery();
+        }
+    }
+
+    window.addEventListener('resize', checkMediaQuery);
+
+    function checkMediaQuery() {
+        const mediaQuery = window.matchMedia("(max-width: 600px)");
+
+        if (mediaQuery.matches) {
             designFix();
+            console.log("Screen < 600px.");
+        } else {
+            console.log("Screen > 600px.");
         }
     }
 
     // Design Fix simatec
     function designFix() {
-        const cols = document.querySelectorAll('.col:not(.tab)');
-        const sClasses = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11'];
+        var dropdownToggle = document.querySelector('.dropdown-toggle');
 
-        cols.forEach(col => {
-            sClasses.forEach(sClass => {
-                if (col.classList.contains(sClass)) {
-                    col.classList.remove(sClass);
-                }
-            });
+        if (!dropdownToggle) {
+            const cols = document.querySelectorAll('.col:not(.tab)');
+            const sClasses = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11'];
 
-            col.classList.add('s12');
-        });
-
-        const logo = document.querySelector('.logo');
-
-        if (logo) {
-            const col = logo.closest('.col');
-            if (col) {
-                const sClasses = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11', 's12', 'm2', 'm4', 'm8', 'm10', 'm12', 'l2', 'l4', 'l8', 'l10', 'l12',];
+            cols.forEach(col => {
                 sClasses.forEach(sClass => {
                     if (col.classList.contains(sClass)) {
                         col.classList.remove(sClass);
                     }
                 });
-                col.classList.add('s10');
-                col.classList.add('m6');
-                col.classList.add('l6');
+
+                col.classList.add('s12');
+            });
+
+            const logo = document.querySelector('.logo');
+
+            if (logo) {
+                const col = logo.closest('.col');
+                if (col) {
+                    const sClasses = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11', 's12', 'm2', 'm4', 'm8', 'm10', 'm12', 'l2', 'l4', 'l8', 'l10', 'l12',];
+                    sClasses.forEach(sClass => {
+                        if (col.classList.contains(sClass)) {
+                            col.classList.remove(sClass);
+                        }
+                    });
+                    col.classList.add('s10');
+                    col.classList.add('m6');
+                    col.classList.add('l6');
+                }
             }
-        }
 
-        const allTabs = document.querySelectorAll('.tabs');
+            const allTabs = document.querySelectorAll('.tabs');
 
-        allTabs.forEach(function (tabs) {
-            const dropdownToggle = document.createElement('div');
-            dropdownToggle.classList.add('dropdown-toggle');
+            allTabs.forEach(function (tabs) {
+                const dropdownToggle = document.createElement('div');
+                dropdownToggle.classList.add('dropdown-toggle');
 
-            const icon = document.createElement('i');
-            icon.classList.add('material-icons');
-            icon.textContent = 'menu';
-            dropdownToggle.appendChild(icon);
+                const icon = document.createElement('i');
+                icon.classList.add('material-icons');
+                icon.textContent = 'menu';
+                dropdownToggle.appendChild(icon);
 
-            tabs.insertAdjacentElement('beforebegin', dropdownToggle);
+                tabs.insertAdjacentElement('beforebegin', dropdownToggle);
 
-            const dropdownMenu = document.createElement('div');
-            dropdownMenu.classList.add('dropdown-menu');
+                const dropdownMenu = document.createElement('div');
+                dropdownMenu.classList.add('dropdown-menu');
 
-            const tabLinks = tabs.querySelectorAll('li a');
+                const tabLinks = tabs.querySelectorAll('li a');
 
-            tabLinks.forEach(function (tab) {
-                const dropdownLink = document.createElement('a');
-                dropdownLink.href = tab.getAttribute('href');
-                dropdownLink.textContent = tab.textContent;
-                dropdownMenu.appendChild(dropdownLink);
-                dropdownLink.addEventListener('click', function () {
-                    tab.click();
-                    dropdownMenu.classList.remove('show');
+                tabLinks.forEach(function (tab) {
+                    const dropdownLink = document.createElement('a');
+                    dropdownLink.href = tab.getAttribute('href');
+                    dropdownLink.textContent = tab.textContent;
+                    dropdownMenu.appendChild(dropdownLink);
+                    dropdownLink.addEventListener('click', function () {
+                        tab.click();
+                        dropdownMenu.classList.remove('show');
+                    });
                 });
-            });
 
-            tabs.insertAdjacentElement('beforebegin', dropdownMenu);
+                tabs.insertAdjacentElement('beforebegin', dropdownMenu);
 
-            dropdownToggle.addEventListener('click', function () {
-                dropdownMenu.classList.toggle('show');
-            });
+                dropdownToggle.addEventListener('click', function () {
+                    dropdownMenu.classList.toggle('show');
+                });
 
-            const rect = dropdownToggle.getBoundingClientRect();
-            dropdownMenu.style.top = `${rect.bottom}px`;
-            dropdownMenu.style.right = '10px';
-        });
+                const rect = dropdownToggle.getBoundingClientRect();
+                dropdownMenu.style.top = `${rect.bottom}px`;
+                dropdownMenu.style.right = '10px';
+            });
+        }
     }
 
     function loadScript(src, onload) {