lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Additional CSS optimisations.

Browse Source
This commit is contained in:
Blaz Kristan 2021-08-11 21:28:31 +02:00
parent 602d04af82
commit 93378406c3
9 changed files with 4072 additions and 4055 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
wled00/data/index.css
View File

@ -164,21 +164,20 @@ button {
font-size: small;
}
.slider-icon
{
.slider-icon {
transform: translate(6px,3px);
color: var(--c-d);
}
.e-icon
{
.e-icon {
transform: translateY(3px);
color: var(--c-d);
}
.sel-icon {
cursor: pointer;
transform: translateX(3px);
}
.e-icon, .sel-icon, .slider-icon {
cursor: pointer;
color: var(--c-d);
}
@ -595,16 +594,13 @@ input[type=range]::-moz-range-thumb {
}
.btn-i {}
.btn-icon {
margin: -4px 8px 0 0;
margin: -4px 4px 0 0;
vertical-align: middle;
display: inline-block;
}
.btna-icon {
margin: 0px;
}
.btn-n {
width: 230px;
margin-right: 8px;
margin: 0 8px 10px 0;
}
.btn-p {
width: 120px;
@ -763,16 +759,23 @@ input[type=number]::-webkit-outer-spin-button {
}
.xxs {
width: 40px;
margin: 6px;
border: 2px solid var(--c-e) !important;
width: 44px;
height: 44px;
margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.xxs-w {
border-width: 5px !important;
margin: 2px;
width: 50px;
height: 50px;
}
.psts {
background-color: var(--c-3);
color: var(--c-f);
cursor: pointer;
padding: 2px 0 0 0;
height: 40px;
margin: 4px;
}
.pwr {
@ -954,18 +957,22 @@ input[type=number]::-webkit-outer-spin-button {
.lstI.selected {
background: var(--c-5);
top: 142px;
top: 0;
bottom: 0;
}
.lstI.sticky {
top: 100px;
}
.lstI.sticky, .lstI.selected {
z-index: 1;
}
#fxlist .lstI.sticky {
top: 99px;
}
#fxlist .lstI.selected {
top: 142px;
}
#pallist .lstI.selected {
top: 84px;
}

8
wled00/data/index.htm
View File

@ -91,13 +91,13 @@
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
</div>
<div id="csl">
<button class="xxs btn" onclick="selectSlot(0);">1</button>
<button class="xxs btn" onclick="selectSlot(1);">2</button>
<button class="xxs btn" onclick="selectSlot(2);">3</button>
<button class="btn xxs" onclick="selectSlot(0);">1</button>
<button class="btn xxs" onclick="selectSlot(1);">2</button>
<button class="btn xxs" onclick="selectSlot(2);">3</button>
</div>
<div id="hexw">
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
</div>
<p class="labels"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div class="il">

18
wled00/data/index.js
View File

@ -515,7 +515,7 @@ function populateQL()
pQL.sort((a,b) => (a[0]>b[0]));
cn += `<p class="labels">Quick load</p>`;
for (var key of (pQL||[])) {
cn += `<button class="xxs btn psts" id="p${key[0]}qlb" title="${key[2]?key[2]:''}" onclick="setPreset(${key[0]});">${key[1]}</button>`;
cn += `<button class="btn btn-xs psts" id="p${key[0]}qlb" title="${key[2]?key[2]:''}" onclick="setPreset(${key[0]});">${key[1]}</button>`;
}
}
gId('pql').innerHTML = cn;
@ -759,7 +759,7 @@ function populateNodes(i,n)
for (var x=0;x<n.nodes.length;x++) {
var o = n.nodes[x];
if (o.name) {
var url = `<button class="btn btna-icon tab" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
var url = `<button class="btn tab" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
nnodes++;
}
@ -1804,13 +1804,15 @@ function selectSlot(b)
csel = b;
var cd = gId('csl').children;
for (let i = 0; i < cd.length; i++) {
cd[i].style.border="2px solid var(--c-e)";
cd[i].style.margin="5px";
cd[i].style.width="42px";
//cd[i].style.borderWidth="2px";
//cd[i].style.margin="5px";
//cd[i].style.width="42px";
cd[i].classList.remove('xxs-w');
}
cd[csel].style.border="5px solid var(--c-e)";
cd[csel].style.margin="2px";
cd[csel].style.width="50px";
//cd[csel].style.borderWidth="5px";
//cd[csel].style.margin="2px";
//cd[csel].style.width="50px";
cd[csel].classList.add('xxs-w');
cpick.color.set(cd[csel].style.backgroundColor);
gId('sliderW').value = whites[csel];
updateTrail(gId('sliderW'));

27
wled00/data/simple.css
View File

@ -472,6 +472,12 @@ input[type=range]::-moz-range-thumb {
border: 1px solid var(--c-4);
}
.btn-xs {
width: 42px;
height: 42px;
margin: 4px;
}
#fxBtn, #palBtn {
background-color: var(--c-2);
border: 1px solid var(--c-2);
@ -487,10 +493,6 @@ input[type=range]::-moz-range-thumb {
display: inline-block;
}
.btna-icon {
margin: 0px;
}
.qcs {
padding: 14px;
margin: 2px;
@ -546,16 +548,23 @@ input[type=number]::-webkit-outer-spin-button {
}
.xxs {
border: 2px solid var(--c-e) !important;
width: 44px;
margin: 6px;
height: 44px;
margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.xxs-w {
border-width: 4px !important;
margin: 2px;
width: 50px;
height: 50px;
}
.psts {
background-color: var(--c-3);
color: var(--c-f);
cursor: pointer;
padding: 2px 0 0 0;
height: 44px;
margin: 6px;
}
.pwr {

12
wled00/data/simple.js
View File

@ -422,7 +422,7 @@ function populateQL()
if (pQL.length > 0) {
pQL.sort((a,b) => (a[0]>b[0]));
for (var key of (pQL||[])) {
cn += `<button class="xxs btn psts" id="p${key[0]}qlb" title="${key[2]?key[2]:''}" onclick="setPreset(${key[0]});">${key[1]}</button>`;
cn += `<button class="btn btn-xs psts" id="p${key[0]}qlb" title="${key[2]?key[2]:''}" onclick="setPreset(${key[0]});">${key[1]}</button>`;
}
}
gId('pql').innerHTML = cn;
@ -594,7 +594,7 @@ function populateNodes(i,n)
for (var x=0;x<n.nodes.length;x++) {
var o = n.nodes[x];
if (o.name) {
var url = `<button class="btn btna-icon tab" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
var url = `<button class="btn tab" title="${o.ip}" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
nnodes++;
}
@ -1150,13 +1150,9 @@ function selectSlot(b)
csel = b;
var cd = gId('csl').children;
for (let i = 0; i < cd.length; i++) {
cd[i].style.border="2px solid var(--c-e)";
cd[i].style.margin="5px";
cd[i].style.width="46px";
cd[i].classList.remove('xxs-w');
}
cd[csel].style.border="5px solid var(--c-e)";
cd[csel].style.margin="2px";
cd[csel].style.width="54px";
cd[csel].classList.add('xxs-w');
cpick.color.set(cd[csel].style.backgroundColor);
gId('sliderW').value = whites[csel];
updateTrail(gId('sliderW'));

3561
wled00/html_simple.h
View File

File diff suppressed because it is too large Load Diff

4444
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

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

2
wled00/wled_server.cpp
View File

@ -26,6 +26,7 @@ void handleUpload(AsyncWebServerRequest *request, String filename, size_t index,
if (final) {
request->_tempFile.close();
request->send(200, "text/plain", F("File Uploaded!"));
cacheInvalidate++;
}
}
@ -286,6 +287,7 @@ bool handleIfNoneMatchCacheHeader(AsyncWebServerRequest* request)
void setStaticContentCacheHeaders(AsyncWebServerResponse *response)
{
char tmp[12];
// https://medium.com/@codebyamir/a-web-developers-guide-to-browser-caching-cc41f3b73e7c
#ifndef WLED_DEBUG
response->addHeader(F("Cache-Control"),"max-age=604800"); // 7 day caching
#else