changed the look and feel of the checkboxes to resolve Edge issue and bring disabled state

also minor html fixes

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;
 }
 
 /* -----------------------------------------------------------------------------

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 = "<div class=\"toggle\"><p>" + text_on + "</p></div><div class=\"toggle\"><p>" + text_off + "</p></div>";
-        var content = "<div class=\"checkbox-container\"><div class=\"inner-container\">" + toggles
-            + "</div><div class=\"inner-container toggle-container\">" + toggles + "</div></div>";
-        $(this).before(content).hide();
+        if($(this).prop("name"))$(this).prop("id", $(this).prop("name"));
+        $(this).parent().addClass("toggleWrapper");
+        $(this).after('<label for="' + $(this).prop("name") + '" class="toggle"><span class="toggle__handler"></span></label>')
 
     });
 
@@ -1499,7 +1465,6 @@ function processData(data) {
     }
 
     resetOriginals();
-    initCheckboxes();
 
 }
 

code/html/index.html

@@ -633,7 +633,7 @@
                                     <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1" /></div>
                                     <div class="pure-u-0 pure-u-lg-1-2"></div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4 hint">
+                                    <div class="pure-u-1 pure-u-lg-3-4 hint"><thead>
                                         ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, 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 <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.
@@ -1390,6 +1390,7 @@
                 <label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label>
                 <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schUTC" /></div>
 
+                <div class="pure-u-0 pure-u-lg-1-2"></div>
                 <label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>
                 <div class="pure-u-2-5 pure-u-lg-1-5">
                     <input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7" />
@@ -1402,7 +1403,7 @@
                 <label class="pure-u-1 pure-u-lg-1-4">Enabled</label>
                 <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schEnabled" /></div>
 
-                <div class="pure-u-0 pure-u-lg-1-4"></div>
+                <div class="pure-u-1 pure-u-lg-1-2"></div>
                 <button class="pure-button button-del-schedule" type="button">Delete schedule</button>
             </div>
         </div>
@@ -1434,7 +1435,7 @@
         <div id="relayTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label>
-                <input name="relay" type="checkbox" on="ON" off="OFF" />
+                <div><input name="relay" type="checkbox" on="ON" off="OFF" /></div>
             </div>
         </div>