Add preset (name) UI bugfix.

Close modal button.

wled00/data/index.css

@@ -436,10 +436,20 @@ button {
 	overflow: auto;
 }
 
+.close {
+	position: sticky;
+	top: 0;
+	float: right;
+}
+
 #info, #nodes {
 	z-index: 4;
 }
 
+#nodes {
+	height: calc(100% - var(--th) - 15px);
+}
+
 #rover {
 	z-index: 3;
 }
@@ -474,7 +484,12 @@ button {
 #kv, #kn {
 	display: inline-block;
 }
-
+/*
+#kn {
+	height: 90%;
+	overflow: scroll;
+}
+*/
 #info table, #nodes table {
 	table-layout: fixed;
 	width: 100%;
@@ -491,7 +506,7 @@ button {
 	margin: 0;
 }
 #info div, #nodes div {
-	width: 490px;
+	max-width: 490px;
 	margin: 0 auto;
 }
 
@@ -703,7 +718,11 @@ input[type=range]::-moz-range-thumb {
 #putil .btn-s {
 	width: 135px;
 }
-
+/*
+#nodes .infobtn {
+	width: 45%;
+}
+*/
 #segutil .btn-s, #segutil2 .btn-s, #putil .btn-s {
 	background-color: var(--c-3);
 	border: 1px solid var(--c-3);
@@ -1010,6 +1029,10 @@ textarea {
 	height: 10px;
 	border: solid var(--c-f);
 	border-width: 0 3px 3px 0;
+}
+
+.rot45,
+.check .checkmark:after {
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);
 	transform: rotate(45deg);
@@ -1040,14 +1063,14 @@ textarea {
 	/*position: relative;*/
 	/*display: block;*/
 	/*margin: 0 0 10px;*/
-	/*background-color: var(--c-2);*/
+	background-color: var(--c-2);
 	color: var(--c-f);
 	border: 0px solid var(--c-f);
 	text-align: left;
 	transition: background-color 0.5s;
   	/*filter: brightness(1);*/
 	font-size: 19px;
-	/*border-radius: 21px;*/
+	border-radius: 21px;
 	/*min-height: 40px;*/
 	min-width: 280px;
 }

wled00/data/index.htm

@@ -291,13 +291,13 @@
 <div id="toast" onclick="clearErrorToast(100);"></div>
 <div id="namelabel" onclick="toggleNodes()"></div>
 <div id="info" class="modal">
+	<button class="btn btn-xs close" onclick="toggleInfo()"><i class="icons rot45">&#xe18a;</i></button>
 	<div id="imgw">
 		<img class="wi" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" />
 	</div><br>
 	<div id="kv">Loading...</div><br>
 	<div>
 		<button class="btn" onclick="requestJson()">Refresh</button>
-		<button class="btn" onclick="toggleInfo()">Close Info</button>
 		<button class="btn" onclick="toggleNodes()">Instance List</button>
 		<button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button>
 	</div>
@@ -306,13 +306,12 @@
 </div>
 
 <div id="nodes" class="modal">
+	<button class="btn btn-xs close" onclick="toggleNodes()"><i class="icons rot45">&#xe18a;</i></button>
 	<div id="ndlt">WLED instances</div>
-	<div id="kn">Loading...</div><br>
-	<div>
+	<div id="kn">Loading...</div>
+	<div style="position:sticky;bottom:0;">
 		<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
-		<button class="btn infobtn" onclick="toggleNodes()">Close list</button>
-	</div>
-	<br>
+	</div>	
 </div>
 
 <div id="rover" class="modal">

wled00/data/index.js

@@ -1686,7 +1686,7 @@ ${makePlSel(true)}
 		}
 	}
 
-	return `<input type="text" class="ptxt noslide" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/>
+	return `<input type="text" class="ptxt noslide ${i==0?'show':''}" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/>
 <div class="c">Quick load label: <input type="text" class="stxt noslide" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div>
 <div class="h">(leave empty for no Quick load button)</div>
 <div ${pl&&i==0?"style='display:none'":""}>
@@ -1718,7 +1718,8 @@ function makePUtil()
 {
 	let p = gId('putil');
 	p.classList.remove('staybot');
-	p.innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
+	p.classList.add('pres');
+	p.innerHTML = `<div class="presin expanded">${makeP(0)}</div>`;
 	p.scrollIntoView({
 		behavior: 'smooth',
 		block: 'center'
@@ -1772,8 +1773,10 @@ function makePlUtil()
 function resetPUtil()
 {
 	gId('psFind').classList.add('staytop');
-	gId('putil').classList.add('staybot');
-	gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>preset</button>`
+	let p = gId('putil');
+	p.classList.add('staybot');
+	p.classList.remove('pres');
+	p.innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>preset</button>`
 	+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon">&#xe18a;<!--&#xe139;--></i>playlist</button>`;
 }
 
@@ -1788,14 +1791,12 @@ function tglSegn(s)
 {
 	let t = gId(s<100?`seg${s}t`:`p${s-100}txt`);
 	if (t) t.classList.toggle("show");
-	//if (t) t.style.display = (getComputedStyle(t).display === "none") ? "inline":"none";
 	event.preventDefault();
 	event.stopPropagation();
 }
 
 function selSegAll(o)
 {
-	//o.checked = true;
 	var obj = {"seg":[]};
 	for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":o.checked});
 	requestJson(obj);

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2204022
+#define VERSION 2204051
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG