mirror of
https://github.com/xoseperez/espurna.git
synced 2026-03-05 16:04:19 +01:00
Merge pull request #1066 from Valcob/fix/webui-checkboxes
[fix]ON OFF switch in Microsoft Edge #1049
This commit is contained in:
Xose Pérez
@@ -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;
|
||||
.toggleWrapper{
|
||||
overflow: hidden;
|
||||
width:auto;
|
||||
height:29px;
|
||||
border: 1px solid #AAA;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 1px 1px #CCC;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
display: none;
|
||||
.toggleWrapper input{
|
||||
position: absolute;
|
||||
left: -99em;
|
||||
}
|
||||
|
||||
.inner-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
text-transform: uppercase;
|
||||
font-size: .7em;
|
||||
letter-spacing: .2em;
|
||||
label[for].toggle{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.inner-container:first-child {
|
||||
background: #e9e9e9;
|
||||
color: #a9a9a9;
|
||||
.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);
|
||||
}
|
||||
|
||||
.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: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 {
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
.toggle:before{
|
||||
content: "NO";
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.toggle p {
|
||||
margin: auto;
|
||||
input[name="relay"] + .toggle:before{
|
||||
content: "OFF";
|
||||
}
|
||||
|
||||
.toggle:nth-child(1) {
|
||||
right: 0;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------------------------------
|
||||
|
||||
@@ -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 = "<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 +1464,6 @@ function processData(data) {
|
||||
}
|
||||
|
||||
resetOriginals();
|
||||
initCheckboxes();
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user