Skip to content

Commit

Permalink
Select/deselect all segments.
Browse files Browse the repository at this point in the history 
CSS optimisations & fixes.
  • Loading branch information
@blazoncek
blazoncek committed Mar 11, 2022
1 parent 8e5f2d9 commit b3d691f
Show file tree
Hide file tree
Showing 6 changed files with 1,775 additions and 1,738 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ node_modules
.direnv
wled-update.sh
esp01-update.sh
/wled00/LittleFS
/wled00/LittleFS
replace_fs.py
90 changes: 48 additions & 42 deletions wled00/data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,7 @@ button {
padding: 0;
vertical-align: middle;
}
/*
.segt TD.h, .plentry TD.h {
font-size: 13px;
padding: 2px 0 0;
}
*/

.keytd {
text-align: left;
}
Expand Down Expand Up @@ -312,27 +307,30 @@ button {

#segutil, #segutil2, #segcont, #putil, #pcont, #pql {
width: 280px;
min-height: 42px;
}

#segutil, #segcont, #pcont, #pql {
margin: 10px auto 0;
}

#segutil2 {
margin: 0 auto;
}

#segutil .seg {
margin: 10px 0;
}

#pcont {
#segcont, #pcont {
margin-bottom: 10px;
}

#putil {
padding: 0 0 10px;
/*padding: 0 0 10px;*/
margin: 0 auto;
}

#putil .btn-n, #putil .btn-s {
/*box-shadow: 0 0 0 5px var(--c-1);*/
margin-bottom: 10px;
}

.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }

.tab-label {
Expand Down Expand Up @@ -362,7 +360,7 @@ button {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
z-index: 2;
margin: 0 auto auto;
}

Expand Down Expand Up @@ -438,11 +436,11 @@ button {
}

#info, #nodes {
z-index: 3;
z-index: 4;
}

#rover {
z-index: 2;
z-index: 3;
}

#ndlt {
Expand Down Expand Up @@ -473,7 +471,6 @@ button {
}

#kv, #kn {
/*max-width: 490px;*/
display: inline-block;
}

Expand Down Expand Up @@ -529,10 +526,6 @@ img {
position: absolute;
top: 13px; left: 8px; right: 8px;
height: 4px;
/*
top: 12.5px; bottom: 12.5px;
left: 13px; right: 13px;
*/
background: var(--c-4);
border-radius: 16px;
pointer-events: none;
Expand Down Expand Up @@ -656,6 +649,7 @@ input[type=range]::-moz-range-thumb {
width: 260px;
}

/* buttons */
.btn {
padding: 8px;
margin: 10px 4px;
Expand All @@ -675,8 +669,8 @@ input[type=range]::-moz-range-thumb {
background-color: var(--c-3);
}
.btn:hover {
border: 1px solid var(--c-5);
background-color: var(--c-5);
border: 1px solid var(--c-5) !important;
background-color: var(--c-5) !important;
}
.btn-s {
width: 100%;
Expand Down Expand Up @@ -706,6 +700,15 @@ input[type=range]::-moz-range-thumb {
margin: 0;
}

#putil .btn-s {
width: 135px;
}

#segutil .btn-s, #segutil2 .btn-s, #putil .btn-s {
background-color: var(--c-3);
border: 1px solid var(--c-3);
}

.btn-pl-del, .btn-pl-add {
margin: 0;
white-space: nowrap;
Expand Down Expand Up @@ -858,11 +861,11 @@ input[type=number]::-webkit-outer-spin-button {
top:0;
}

/* preset id number */
.pid {
position: absolute;
top: 8px;
left: 12px;
/*padding: 10px 0 0 12px;*/
font-size: 16px;
text-align: center;
color: var(--c-b);
Expand Down Expand Up @@ -917,6 +920,7 @@ input[type=number]::-webkit-outer-spin-button {
right: 8px;
}

/* radiobuttons and checkmarks */
.check, .radio {
display: block;
position: relative;
Expand Down Expand Up @@ -1009,10 +1013,11 @@ input[type=number]::-webkit-outer-spin-button {
margin-bottom: 5px;
}

/* segment & preset wrapper */
.seg, .pres {
position: relative;
display: block;
padding: 10px 0;
padding: 8px 0;
margin: 0 0 10px;
background-color: var(--c-2);
color: var(--c-f);
Expand All @@ -1037,10 +1042,11 @@ input[type=number]::-webkit-outer-spin-button {

.seg .schkl {
position: absolute;
top: 8px;
left: 8px;
top: 7px;
left: 9px;
}

/* list wrapper */
.list {
position: relative;
width: 280px;
Expand All @@ -1050,8 +1056,8 @@ input[type=number]::-webkit-outer-spin-button {
line-height: 24px;
}

/* list item */
.lstI {
/*display: flex;*/
align-items: center;
padding: 8px 10px;
cursor: pointer;
Expand All @@ -1063,6 +1069,7 @@ input[type=number]::-webkit-outer-spin-button {
min-height: 24px;
}

/* selected item/element */
.selected { /* has to be after .lstI */
background: var(--c-4);
}
Expand All @@ -1079,6 +1086,7 @@ input[type=number]::-webkit-outer-spin-button {
background-color: var(--c-3);
}

/* selected list item */
.lstI.selected {
top: 0;
bottom: 0;
Expand All @@ -1089,42 +1097,38 @@ input[type=number]::-webkit-outer-spin-button {
}

#pcont .selected {
bottom: 114px;
bottom: 42px;
top: 40px;
}
/* calculated in index.js
#fxlist .lstI.selected {
top: 142px;
top: 142px !important;
}
*/
#pallist .lstI.selected {
top: 82px;
}
/* must be after .selected */
/* calculated in index.js
#fxlist .lstI.sticky {
top: 99px;
top: 99px !important;
}
*/
#pallist .lstI.sticky {
top: 40px;
}

/* list item content */
.lstIcontent {
/*width: 100%;
vertical-align: middle;*/
padding: 0; /*20px 0 5px;
text-align: left;
display: inline-block;*/
padding: 0;
position: relative;
/*left: 40px;*/
}

/* list item name (for sorting) */
.lstIname {
white-space: nowrap;
}

/* palette preview */
/* list item palette preview */
.lstIprev {
width: 100%;
height: 7px;
Expand All @@ -1134,11 +1138,10 @@ input[type=number]::-webkit-outer-spin-button {
z-index: -1;
}

/* find/search element */
.fnd {
width: 280px;
margin: 0 auto;
/*border-radius: 25px;
box-shadow: 0 0 0 5px var(--c-1);*/
}

input[type="text"].fnd {
Expand All @@ -1161,9 +1164,12 @@ input[type="text"].fnd:hover {
background-color: var(--c-3);
}

/* segment inner (expanded) content */
.segin {
padding: 8px 8px 0;
}

/* preset inner/expanded content */
.presin {
padding: 8px 0 0;
}
Expand All @@ -1177,7 +1183,7 @@ input[type="text"].fnd:hover {
background-color: var(--c-5);
}

/* must be after .expanded */
/* hidden list items, must be after .expanded */
.pres .lstIcontent, .segin {
display: none;
}
Expand Down
42 changes: 17 additions & 25 deletions wled00/data/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,8 @@
</div>

<div id="Effects" class="tabcontent">
<div id="sliders">
<p class="labels" id="sliderLabel0">Effect speed</p>
<span id="sliders">
<p class="labels hd" id="sliderLabel0">Effect speed</p>
<div class="staytop" id="slider0">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il">
Expand All @@ -192,7 +192,7 @@
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels" id="sliderLabel1">Effect intensity</p>
<p class="labels hd" id="sliderLabel1">Effect intensity</p>
<div class="staytop" id="slider1">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il">
Expand All @@ -201,7 +201,7 @@
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels" id="sliderLabel2">Custom 1</p>
<p class="labels hd" id="sliderLabel2">Custom 1</p>
<div class="staytop" id="slider2">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
Expand All @@ -210,7 +210,7 @@
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels" id="sliderLabel3">Custom 2</p>
<p class="labels hd" id="sliderLabel3">Custom 2</p>
<div class="staytop" id="slider3">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
Expand All @@ -219,7 +219,7 @@
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels" id="sliderLabel4">Custom 3</p>
<p class="labels hd" id="sliderLabel4">Custom 3</p>
<div class="staytop" id="slider4">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
Expand All @@ -228,7 +228,7 @@
</div>
<output class="sliderbubble"></output>
</div>
</div>
</span>
<div class="il">
<p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind">
Expand Down Expand Up @@ -295,31 +295,23 @@
</div><br>
<div id="kv">Loading...</div><br>
<div>
<!--table>
<tr>
<td class="keytd"--><button class="btn" onclick="requestJson()">Refresh</button><!--/td>
<td class="valtd"--><button class="btn" onclick="toggleInfo()">Close Info</button><!--/td>
</tr>
<tr>
<td class="keytd"--><button class="btn" onclick="toggleNodes()">Instance List</button><!--/td>
<td class="valtd"--><button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><!--/td>
</tr>
</table-->
</div><br>
<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>
<br>
<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the <a href="https://wled.discourse.group/" target="_blank">WLED community</a></span>
</div>

<div id="nodes" class="modal">
<div id="ndlt">WLED instances</div>
<div id="kn">Loading...</div><br>
<div>
<!--table>
<tr>
<td class="keytd"--><button class="btn infobtn" onclick="loadNodes()">Refresh</button><!--/td>
<td class="valtd"--><button class="btn infobtn" onclick="toggleNodes()">Close list</button><!--/td>
</tr>
</table-->
</div><br>
<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
<button class="btn infobtn" onclick="toggleNodes()">Close list</button>
</div>
<br>
</div>

<div id="rover" class="modal">
Expand Down
Loading

0 comments on commit b3d691f

Please sign in to comment.