diff --git a/code/html/custom.css b/code/html/custom.css index 62926cf2bd..5c4fae7138 100644 --- a/code/html/custom.css +++ b/code/html/custom.css @@ -61,7 +61,7 @@ h2 { .hint { color: #ccc; font-size: 80%; - margin: -10px 0 10px 0; + margin: 0px 0 10px 0; } .hint a { @@ -158,6 +158,9 @@ div.state { .main-buttons button { width: 100px; } +.button-del-schedule { + margin-top: 15px; +} .button-reboot, .button-reconnect, @@ -233,59 +236,98 @@ span.slider { Checkboxes -------------------------------------------------------------------------- */ -.checkbox-container { - width: 130px; - height: 30px; - margin: 3px 0 10px 0px; - position: relative; - border-radius: 4px; - overflow: hidden; - user-select: none; - cursor: pointer; -} - -.checkbox-container input { - display: none; -} - -.inner-container { - position: absolute; - left: 0; - top: 0; - width: inherit; - height: inherit; - text-transform: uppercase; - font-size: .7em; - letter-spacing: .2em; -} - -.inner-container:first-child { - background: #e9e9e9; - color: #a9a9a9; -} - -.inner-container:nth-child(2) { - background: #c00000; - color: white; - -webkit-clip-path: inset(0 50% 0 0); - clip-path: inset(0 50% 0 0); - transition: .3s cubic-bezier(0,0,0,1); -} - -.toggle { - width: 50%; - position: absolute; - height: inherit; - display: flex; - box-sizing: border-box; -} - -.toggle p { - margin: auto; -} - -.toggle:nth-child(1) { - right: 0; +.toggleWrapper{ + overflow: hidden; + width:auto; + height:29px; + border: 1px solid #AAA; + margin: 0px; + padding: 0px; + border-radius: 4px; + box-shadow: inset 1px 1px #CCC; +} +.toggleWrapper input{ + position: absolute; + left: -99em; +} +label[for].toggle{ + margin: 0px; + padding: 0px; +} +.toggle{ + letter-spacing:normal; + cursor: pointer; + display: inline-block; + position: relative; + width: 130px; + height: 100%; + background: #e9e9e9; + color: #a9a9a9; + border-radius: 4px; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); +} +.toggle:before, .toggle:after{ + position: absolute; + line-height: 30px; + font-size: .7em; + z-index: 2; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); +} +.toggle:before{ + content: "NO"; + left: 20px; +} +input[name="relay"] + .toggle:before{ + content: "OFF"; +} +.toggle:after{ + content: "YES"; + right: 20px; +} +input[name="relay"] + .toggle:after{ + content: "ON"; +} +.toggle__handler{ + display: inline-block; + position: relative; + z-index: 1; + background: #c00000; + width: 50%; + height: 100%; + border-radius: 4px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + top: 0px; + left: 0px; + -webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); + -webkit-transform: translateX(0px); + transform: translateX(0px); +} +input:checked + .toggle:after { + color: #fff; +} +input:checked + .toggle:before { + color: #a9a9a9; +} +input + .toggle:before { + color: #fff; +} +input:checked + .toggle .toggle__handler{ + width: 50%; + background: #00c000; + -webkit-transform: translateX(65px); + transform: translateX(65px); + border-color: #000; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} +input[disabled] + .toggle .toggle__handler{ + background: #ccc; } /* ----------------------------------------------------------------------------- diff --git a/code/html/custom.js b/code/html/custom.js index 725c4e4793..e36b99eec3 100644 --- a/code/html/custom.js +++ b/code/html/custom.js @@ -785,11 +785,13 @@ function addSchedule(event) { }); $(line).find(".button-del-schedule").on("click", delSchedule); $(line).find(".button-more-schedule").on("click", moreSchedule); + $(line).find("input[name='schUTC']").prop("id", "schUTC" + (numSchedules + 1)) + .next().prop("for", "schUTC" + (numSchedules + 1)); + $(line).find("input[name='schEnabled']").prop("id", "schEnabled" + (numSchedules + 1)) + .next().prop("for", "schEnabled" + (numSchedules + 1)); line.appendTo("#schedules"); $(line).find("input[type='checkbox']").prop("checked", false); - initCheckboxes(); - return line; } @@ -809,7 +811,14 @@ function initRelays(data) { // Add relay fields var line = $(template).clone(); $(".id", line).html(i); - $(":checkbox", line).prop('checked', data[i]).attr("data", i); + $(":checkbox", line).prop('checked', data[i]).attr("data", i) + .prop("id", "relay" + i) + .on("change", function (event) { + var id = parseInt($(event.target).attr("data"), 10); + var status = $(event.target).prop("checked"); + doToggle(id, status); + }); + $("label.toggle", line).prop("for", "relay" + i) line.appendTo("#relays"); // Populate the relay SELECTs @@ -820,57 +829,13 @@ function initRelays(data) { } -function initCheckboxes() { - - var setCheckbox = function(element, value) { - var container = $(".toggle-container", $(element)); - if (value) { - container.css("-webkit-clip-path", "inset(0 0 0 50%)"); - container.css("clip-path", "inset(0 0 0 50%)"); - container.css("backgroundColor", "#00c000"); - } else { - container.css("-webkit-clip-path", "inset(0 50% 0 0)"); - container.css("clip-path", "inset(0 50% 0 0)"); - container.css("backgroundColor", "#c00000"); - } - } - - $(".checkbox-container") - - .each(function() { - var status = $(this).next().prop('checked'); - setCheckbox(this, status); - }) - .off('click') - .on('click', function() { - - var checkbox = $(this).next(); - - var status = checkbox.prop('checked'); - status = !status; - checkbox.prop('checked', status); - setCheckbox(this, status); - - if ("relay" == checkbox.attr('name')) { - var id = parseInt(checkbox.attr('data'), 10); - doToggle(id, status); - } - - }); - -} - function createCheckboxes() { $("input[type='checkbox']").each(function() { - var text_on = $(this).attr("on") || "YES"; - var text_off = $(this).attr("off") || "NO"; - - var toggles = "

" + text_on + "

" + text_off + "

"; - var content = "
" + toggles - + "
" + toggles + "
"; - $(this).before(content).hide(); + if($(this).prop("name"))$(this).prop("id", $(this).prop("name")); + $(this).parent().addClass("toggleWrapper"); + $(this).after('') }); @@ -1499,7 +1464,6 @@ function processData(data) { } resetOriginals(); - initCheckboxes(); } diff --git a/code/html/index.html b/code/html/index.html index 6b7cb43b39..03a2554d83 100644 --- a/code/html/index.html +++ b/code/html/index.html @@ -633,7 +633,7 @@

You can configure up to 5 different WiFi networks. The device will try to co
-
+
ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of signal strength, even if multiple AP share the same SSID. When disabled, ESPurna will try to connect to the networks in the same order they are listed below. Disable this option if you are connecting to a single access point (or router) or to a hidden SSID. @@ -1390,6 +1390,7 @@

+
@@ -1402,7 +1403,7 @@

-
+

@@ -1434,7 +1435,7 @@

- +