From: Roman Bazalevskiy <rvb@rvb.name>
Date: Thu, 17 Nov 2022 10:00:46 +0000 (+0300)
Subject: Корректная работа на мобильных устройствах
X-Git-Url: https://git.rvb.name/esp-clock.git/commitdiff_plain/0174683f7a6c4fb500e69b4eaffc6613bb865617?ds=sidebyside;hp=-c

Корректная работа на мобильных устройствах
---

0174683f7a6c4fb500e69b4eaffc6613bb865617
diff --git a/data/web/index.html b/data/web/index.html
index 2170b08..a2ec589 100644
--- a/data/web/index.html
+++ b/data/web/index.html
@@ -14,7 +14,7 @@
     <!-- Menu toggle -->
     <a href="#menu" id="menuLink" class="menu-link">
         <!-- Hamburger icon -->
-        <span></span>
+        <span id="menuBtn"></span>
     </a>
 
     <div id="menu">
diff --git a/data/web/script.js b/data/web/script.js
index 67c213f..d881926 100644
--- a/data/web/script.js
+++ b/data/web/script.js
@@ -1,61 +1,26 @@
-(function (window, document) {
-
-    // we fetch the elements each time because docusaurus removes the previous
-    // element references on page navigation
-    function getElements() {
-        return {
-            layout: document.getElementById('layout'),
-            menu: document.getElementById('menu'),
-            menuLink: document.getElementById('menuLink')
-        };
-    }
-
-    function toggleClass(element, className) {
-        var classes = element.className.split(/\s+/);
-        var length = classes.length;
-        var i = 0;
-
-        for (; i < length; i++) {
-            if (classes[i] === className) {
-                classes.splice(i, 1);
-                break;
-            }
-        }
-        // The className is not found
-        if (length === classes.length) {
-            classes.push(className);
-        }
-
-        element.className = classes.join(' ');
-    }
-
-    function toggleAll() {
-        var active = 'active';
-        var elements = getElements();
+var pages
+var parameters = {}
+var daynames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'] 
 
-        toggleClass(elements.layout, active);
-        toggleClass(elements.menu, active);
-        toggleClass(elements.menuLink, active);
+function toggleMenu(e) {
+  active = (document.getElementById('menuLink').className.indexOf('active') !== -1)
+  if (active || e.target.id == 'menuLink' || e.target.id == 'menuBtn') {
+    elements = [ document.getElementById('layout'), document.getElementById('menu'), document.getElementById('menuLink') ]
+    for (const element of elements) {
+      if (!active) {
+        element.classList.add('active')
+      } else {
+        element.classList.remove('active')
+      }
     }
-    
-    function handleEvent(e) {
-        var elements = getElements();
-        
-        if (e.target.id === elements.menuLink.id) {
-            toggleAll();
-            e.preventDefault();
-        } else if (elements.menu.className.indexOf('active') !== -1) {
-            toggleAll();
-        }
+    if (e.target.id == 'menuLink' || e.target.id == 'menuBtn') {
+      e.preventDefault()
     }
-    
-    document.addEventListener('click', handleEvent);
-
-}(this, this.document));
+    e.stopPropagation()
+  }
+}
 
-var pages
-var parameters = {}
-var daynames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'] 
+document.getElementById('layout').addEventListener('click', toggleMenu)
 
 function encode(r){
   r = String(r)
@@ -315,7 +280,7 @@ function ElementHTML(element) {
       return options
     case 'week':
       days = '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>' 
-        + '<table data-ui_class="week" data-value="' + value + '" id="_ui_element_' + element.id + '" cellpadding="5" border="0" align="left"><tbody><tr>'
+        + '<table data-ui_class="week" data-value="' + value + '" id="_ui_element_' + element.id + '" cellpadding="5" border="0" class="week"><tbody><tr>'
       for (i=0; i<7; i++) {
         a_enabled = (value[i] == "1")
         days = days + '<td><div class="weekday' + (a_enabled?"-selected":"") + '" id="_ui_elpart_'+i+'_'+element.id+'" onclick="ClickDay(\'' + element.id + '\', ' + i + ')">'+ daynames[i] + '</div></td>'
diff --git a/data/web/style.css b/data/web/style.css
index 2cbe74b..1f818db 100644
--- a/data/web/style.css
+++ b/data/web/style.css
@@ -1338,12 +1338,14 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
     background: white;
     left: 2.4em;
 }
+.week {
+    width: 100%;
+}
 .weekday, .weekday-selected {
-    font-size: 110%;
+    font-size: min(4vw, 1.5rem);
     text-align: center;
-    margin: 0.5em;
-    width: 4em;
-    height: 1.5em;
+    margin: 0.5vw;
+    padding: 0.4em;
     border-radius: 5em;
     border:2px solid #2497e3;
     box-shadow:inset 0 1px 11px 0 #1f8dd6;
@@ -1353,3 +1355,6 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
     background: #0a3660;
     color: white
 }
+#layout { 
+  min-height: 100vh; 
+}