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

diff --git a/data/web/index.html b/data/web/index.html
index 2170b0810be2d94b3cd5269a3c96a0de3f2a37b6..a2ec589e61a246f04bbd81cdbd21d6c988c3f5d0 100644 (file)
--- 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 -->
     <!-- Menu toggle -->
     <a href="#menu" id="menuLink" class="menu-link">
         <!-- Hamburger icon -->

-        <span></span>
+        <span id="menuBtn"></span>

     </a>
 
     <div id="menu">
     </a>
 
     <div id="menu">

diff --git a/data/web/script.js b/data/web/script.js
index 67c213ffc792a5bd1f39884038100372e3414c53..d88192661ed47f008ba972311b68bd59a3d2b9db 100644 (file)
--- 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)
 
 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>' 
       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>'
       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 2cbe74b96b118dfb8d11207b652c7e58a7b37194..1f818dbe2006b6312c1e163b3eb012e5c908655a 100644 (file)
--- 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;
 }
     background: white;
     left: 2.4em;
 }

+.week {
+    width: 100%;
+}

 .weekday, .weekday-selected {
 .weekday, .weekday-selected {

-    font-size: 110%;
+    font-size: min(4vw, 1.5rem);

     text-align: center;
     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;
     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
 }
     background: #0a3660;
     color: white
 }

+#layout { 
+  min-height: 100vh; 
+}