diff --git a/admin/adapter-settings.js b/admin/adapter-settings.js index 5ba7c6c6..453066e2 100644 --- a/admin/adapter-settings.js +++ b/admin/adapter-settings.js @@ -96,12 +96,12 @@ function loadSettings(callback) { if (typeof load === 'undefined') { alert('Please implement save function in your admin/index.html'); } else { - const _query = query.split('&'); + const _query = query.split('&'); for (let q = 0; q < _query.length; q++) { - if (_query[q].indexOf('react=') !== -1) { - $('.adapter-container').addClass('react-' + _query[q].substring(6)); - theme = 'react-' + _query[q].substring(6); - } + if (_query[q].indexOf('react=') !== -1) { + $('.adapter-container').addClass('react-' + _query[q].substring(6)); + theme = 'react-' + _query[q].substring(6); + } } load(res.native, onChange); } @@ -114,9 +114,101 @@ function loadSettings(callback) { } alert('error loading settings for ' + _adapterInstance + '\n\n' + err); } + // 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() { + var dropdownToggle = document.querySelector('.dropdown-toggle'); + + if (!dropdownToggle) { + const cols = document.querySelectorAll('.col:not(.tab)'); + const sClasses = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9', 's10', 's11']; + + cols.forEach(col => { + sClasses.forEach(sClass => { + if (col.classList.contains(sClass)) { + col.classList.remove(sClass); + } + }); + + 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'); + + 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); + + tabs.insertAdjacentElement('beforebegin', dropdownToggle); + + const dropdownMenu = document.createElement('div'); + dropdownMenu.classList.add('dropdown-menu'); + + 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'); + }); + }); + + tabs.insertAdjacentElement('beforebegin', dropdownMenu); + + dropdownToggle.addEventListener('click', function () { + dropdownMenu.classList.toggle('show'); + }); + + const rect = dropdownToggle.getBoundingClientRect(); + dropdownMenu.style.top = `${rect.bottom}px`; + dropdownMenu.style.right = '10px'; + }); + } +} + function prepareTooltips() { $('.admin-icon').each(function () { let id = $(this).data('id'); diff --git a/admin/index_m.html b/admin/index_m.html index b093d980..82fa0c52 100644 --- a/admin/index_m.html +++ b/admin/index_m.html @@ -1,4 +1,4 @@ -s + @@ -44,6 +44,7 @@ .m .zlogo { padding: 0.5rem; width: 64px; + margin-right: 10px; } .input-group { @@ -80,7 +81,7 @@ } #tabs { - margin-top: 115px; + margin-top: 40px; } #main { @@ -439,6 +440,201 @@ .m.react-dark .switch label .lever:after { background-color: #436a93; } + + .m .tabs .tab a.active { + color: #fff !important; + border-bottom: 2px solid #fff !important; + } + + .m .navbar-fixed nav { + position: fixed; + z-index: 200; + } + + #tabs { + margin-top: 0; + } + + .m .page { + margin-top: 7.0rem; + } + + #sett { + margin-top: 40px; + } + + .m .row .col.offset-s11 { + margin-left: 15px; + } + + #tab-main .navbar-fixed #nav-mobile { + position: fixed; + z-index: 100; + } + + .m .navbar-fixed { + z-index: unset; + } + + /* Style for medium Screens */ + @media screen and (max-width: 900px) { + .m nav ul a.btn-floating { + margin-left: 5px; + margin-right: 5px; + } + } + + /* Style for small Screens */ + @media screen and (max-width: 768px) { + #viewconfig { + margin-top: 0; + } + + .m nav ul a.btn-floating { + margin-left: 5px; + margin-right: 5px; + } + + .m .navbar-fixed { + position: relative; + } + + #tab-main { + margin-top: 7rem; + } + + #devices { + margin-top: 1rem; + } + + #tab-main .navbar-fixed #nav-mobile { + display: flex; + flex-wrap: wrap; + position: fixed; + margin-bottom: 4rem; + z-index: 100; + } + + #tab-main .navbar-fixed #nav-mobile li:nth-child(1) { + flex: 0 0 10%; + } + + #tab-main .navbar-fixed #nav-mobile li:nth-child(2) { + flex: 0 0 35%; + height: 30px; + } + #tab-main .navbar-fixed #nav-mobile li:nth-child(3), + #tab-main .navbar-fixed #nav-mobile li:nth-child(4) { + height: 36px; + } + } + + /* Style for very small Screens */ + @media screen and (max-width: 600px) { + .m .navbar-fixed nav { + position: relative; + z-index: unset; + } + + .m nav ul a.btn-floating { + margin-left: 8px; + margin-right: 8px; + } + + #nav-mobile { + background-color: #39c; + padding-bottom: 2px; + padding-top: 2px; + margin-top: -8px; + width: calc(100%); + } + .m .navbar-fixed { + position: relative; + } + .m .dropdown-menu { + position: fixed; + } + + #viewconfig { + margin-top: 0; + } + + .m .modal { + width: 98%; + } + .m .modal .modal-content { + padding: 24px; + } + + #tab-dev { + overflow-x: hidden; + } + + .m .row .col.offset-s11 { + margin-left: 13px; + margin-bottom: 10px; + width: calc(100% - 26px); + } + + .device { + padding: 8px; + width: calc(100%); + } + + #devices { + margin-top: 3rem; + } + + #tab-main .navbar-fixed #nav-mobile { + display: flex; + flex-wrap: wrap; + position: fixed; + margin-bottom: 4rem; + z-index: 100; + } + + #tab-main .navbar-fixed #nav-mobile li:nth-child(1) { + flex: 0 0 20%; + } + + #tab-main .navbar-fixed #nav-mobile li:nth-child(2) { + flex: 0 0 70%; + } + #tab-main .navbar-fixed #nav-mobile li:nth-child(3), + #tab-main .navbar-fixed #nav-mobile li:nth-child(4) { + height: 36px; + margin-top: 6px; + } + + #dev_result_log { + overflow: auto; + height: 20em; + padding: 0.5em; + + } + + .move-label-up { + position: absolute !important; + top: -60px !important; + left: 0 !important; + } + + #tabs { + margin-top: 0; + } + + #tab-main { + margin-top: .5rem; + } + + .m .navbar-fixed { + z-index: unset; + } + + .m .page { + margin-top: 0rem; + } + } @@ -447,11 +643,11 @@