From 4094adbae66e8e5ab5483513f312d7194c30a8a9 Mon Sep 17 00:00:00 2001 From: userName Date: Sat, 21 Jul 2018 23:45:48 +0300 Subject: [PATCH] changed the look and feel of the checkboxes to resolve Edge issue and bring disabled state also minor html fixes --- code/html/custom.css | 143 +++++++++++++++++++++++++++---------------- code/html/custom.js | 67 +++++--------------- code/html/index.html | 7 ++- 3 files changed, 109 insertions(+), 108 deletions(-) diff --git a/code/html/custom.css b/code/html/custom.css index 62926cf2..df37d21b 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,91 @@ 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; +} +.toggle{ + margin: 0px !important; + padding: 0px!important; + 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; +} +.toggle:after{ + content: "YES"; + right: 20px; +} +.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[disabled] + .toggle .toggle__handler{ + background: #CCC !important; +} + +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; } /* ----------------------------------------------------------------------------- diff --git a/code/html/custom.js b/code/html/custom.js index 725c4e47..a3a719af 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,15 @@ 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) { + console.log("sending message"); + 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 +830,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 +1465,6 @@ function processData(data) { } resetOriginals(); - initCheckboxes(); } diff --git a/code/html/index.html b/code/html/index.html index 6b7cb43b..03a2554d 100644 --- a/code/html/index.html +++ b/code/html/index.html @@ -633,7 +633,7 @@
-
+
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 @@
- +