ctucx.git: mqtt-webui

improve switch css

diff --git a/src/webui.css b/src/webui.css
@@ -11,9 +11,9 @@
 		--text-color:                      #212529;
 		--secondary-text-color:            #212529;
 		--icon-color:                      #212529;
-		--toggle-background-color:         #ccc;
-		--toggle-knob-color:               #6c757d;
-		--toggle-knob-active-color:        #693;
+		--switch-background-color:         #ccc;
+		--switch-knob-color:               #6c757d;
+		--switch-knob-active-color:        #693;
 		--slider-background-color:         #ccc;
 		--slider-knob-color:               #6c757d;
 	}

@@ -32,9 +32,9 @@
 		--text-color:                      #fff;
 		--secondary-text-color:            #ebebf599;
 		--icon-color:                      #fff;
-		--toggle-background-color:         #ebebf52e;
-		--toggle-knob-color:               #9b9aa3;
-		--toggle-knob-active-color:        #693;
+		--switch-background-color:         #ebebf52e;
+		--switch-knob-color:               #9b9aa3;
+		--switch-knob-active-color:        #693;
 		--slider-background-color:         #ebebf52e;
 		--slider-knob-color:               #9b9aa3;
 	}

@@ -188,42 +188,46 @@ section > div .title{
 
 
 /* Switch Styling*/
-.toggle {
-	font-family: sans-serif;
-	background-color: var(--toggle-background-color);
+.switch {
+	background-color: var(--switch-background-color);
 	display: inline-block;
 	border-radius: 1.2em;
 	padding: 0.2em 2em 0.2em 0.2em;
+	cursor: pointer;
+	display: inline-block;
+	position: relative;
+	vertical-align: top;
 }
 
-.toggle input {
+.switch input {
 	display: none;
 }
 
-.toggle label {
+.switch span {
 	position: relative;
 	transition: transform 0.1s;
 	cursor: pointer;
-	background-color: var(--toggle-knob-color);
+	background-color: var(--switch-knob-color);
 	color: #fff;
 	display: inline-block;
 	padding: 0.25em 1em;
 	border-radius: 1em;
 }
 
-.toggle input:checked + label {
-	background-color: var(--toggle-knob-active-color);
+.switch input:checked ~ .switch-handle {
+	background-color: var(--switch-knob-active-color);
 	color: #fff;
 	transform: translateX(1.8em);
 }
 
+
 /* Slider Styling*/
 .slider {
 	width: 100%;
 	-webkit-appearance: none;
 	height: 10px;
 	border-radius: 5px;   
-	background: var(--slider-background-color);
+	background: var(--switch-background-color);
 	outline: none;
 }
 

diff --git a/src/webui.js b/src/webui.js
@@ -147,7 +147,7 @@ const renderItem = (itemData) => {
 	if (itemData.type !== 'html') {
 		let element = html``;
 
-		if (itemData.type == 'switch' || itemData.type == 'select') {
+		if (itemData.type == 'select') {
 			itemData.id = Math.random().toString(36).slice(2);
 		}
 

@@ -168,10 +168,10 @@ const renderItem = (itemData) => {
 				}
 			
 				element = html`
-					<div class="toggle">
-						<input id="${itemData.id}" type="checkbox" @change="${switchChangeHandler}" data-type="${itemData.type}" data-mqtt-topic="${itemData.topic.get}" data-transform="${ifDefined(transform)}">
-						<label for="${itemData.id}">&nbsp;</label>
-					</div>
+					<label class="switch">
+						<input type="checkbox" @change="${switchChangeHandler}" data-type="${itemData.type}" data-mqtt-topic="${itemData.topic.get}" data-transform="${ifDefined(transform)}">
+						<span class="switch-handle">&nbsp;</span>
+					</label>
 				`;
 				break;
 

@@ -227,7 +227,7 @@ const renderItem = (itemData) => {
 					if (!client.connected)           return false;
 					if (itemData.topic.set === null) return false;
 
-					client.publish(itemData.topic.set, transformMessage(event.target.dataset.mqttValue, meta), itemData.mqtt);
+					client.publish(itemData.topic.set, transformMessage(event.target.dataset.mqttValue, itemData), itemData.mqtt);
 					return false;
 				}