partition table and css

This commit is contained in:
2025-01-18 01:33:47 +01:00
parent 31350eeed2
commit af4f209026
7 changed files with 99 additions and 50 deletions

View File

@@ -85,11 +85,47 @@
}
.plantcontainer {
min-width: 200px;
border-style: solid;
border-width: 1px;
padding: 8px;
flex-grow: 1;
min-width: 100%;
border-style: solid;
border-width: 1px;
padding: 8px;
}
@media (min-width: 350px) {
.plantcontainer {
flex-grow: 1;
min-width: 40%;
border-style: solid;
border-width: 1px;
padding: 8px;
}
}
@media (min-width: 900px) {
.plantcontainer {
flex-grow: 1;
min-width: 20%;
border-style: solid;
border-width: 1px;
padding: 8px;
}
}
@media (min-width: 1800px) {
.plantcontainer {
flex-grow: 1;
min-width: 200px;
border-style: solid;
border-width: 1px;
padding: 8px;
}
}
.plantlist {
display: flex;
flex-wrap: wrap;
}
.subtitle {
flex-grow: 1;
text-align: center;
@@ -140,18 +176,32 @@
width: 100%;
}
.lightpre{
.lightcheckbox{
margin: 0px;
min-width: 20px
}
.lightkeypre{
min-width: 100px;
}
.lightkey{
min-width: 120px;
min-width: 200px;
}
.lightpost{
.lightvalue{
flex-grow: 1;
}
.lightnumberbox{
min-width: 75px;
}
.tankcheckbox {
min-width: 20px;
margin: 0px;
}
.tankkey{
min-width: 250px;
}
.tankvalue{
flex-grow: 1;
margin: 0px;
}
</style>
@@ -183,11 +233,7 @@
<h2>config</h2>
<h3>Plants:</h3>
<button id="measure_moisture">Measure Moisture</button>
<div id="plants" style="display: flex; flex-wrap: 1;"></div>
<div id="plants" class="plantlist"></div>
<button id="submit">Submit</button>
<div id="submit_status"></div>

View File

@@ -1,17 +1,19 @@
<div class="subtitle">Light:</div>
<div class="flexcontainer">
<input class="lightpre" type="checkbox" id="night_lamp_enabled" checked="false">
<div class="lightkeypre">Enable Nightlight</div>
<div class="lightkey">Enable Nightlight</div>
<input class="lightcheckbox" type="checkbox" id="night_lamp_enabled" checked="false">
</div>
<div class="flexcontainer">
<div>Start</div>
<select type="time" id="night_lamp_time_start">
</select>
<div>Stop</div>
<select type="time" id="night_lamp_time_end">
<div class="lightkey">Light only when dark</div>
<input class="lightcheckbox" type="checkbox" id="night_lamp_only_when_dark">
</div>
<div class="flexcontainer">
<div class="lightkey">Start</div>
<select class="lightnumberbox" type="time" id="night_lamp_time_start">
</select>
</div>
<div class="flexcontainer">
<input class="" type="checkbox" id="night_lamp_only_when_dark">
Light only when dark
<div class="lightkey">Stop</div>
<select class="lightnumberbox" type="time" id="night_lamp_time_end">
</select>
</div>

View File

@@ -56,7 +56,7 @@
<input class="col-4" id="plant_${plantId}_sensor_b" type="checkbox">
</div>
<div class="row">
<div class="col-7">Max Consecutive Pump Count:</div>
<div class="col-7">Warn Pump Count:</div>
<input class="col-4" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" , max="50" ,
placeholder="10">
</div>

View File

@@ -1,29 +1,29 @@
<div class="row">
<div class="col-12" style="font-weight: bold; text-align: center;">Tank:</div>
<div class="flexcontainer">
<div class="subtitle">Tank:</div>
</div>
<div class="row">
<input class="col-4" type="checkbox" id="tank_sensor_enabled">
<div class="col-7">Enable Tank Sensor</div>
<div class="flexcontainer">
<span class="tankkey">Enable Tank Sensor</span>
<input class="tankcheckbox" type="checkbox" id="tank_sensor_enabled">
</div>
<div class="row">
<input class="col-4" type="checkbox" id="tank_allow_pumping_if_sensor_error">
<div class="col-7">Ignore Sensor Error</div>
<div class="flexcontainer">
<div class="tankkey">Ignore Sensor Error</div>
<input class="tankcheckbox" type="checkbox" id="tank_allow_pumping_if_sensor_error">
</div>
<div class="row">
<input class="col-4" type="number" min="2" max="500000" id="tank_useable_ml">
<div class="col-7">Tank Size mL</div>
<div class="flexcontainer">
<div class="tankkey">Useable ml full% to empty%</div>
<input class="tankvalue" type="number" min="2" max="500000" id="tank_useable_ml">
</div>
<div class="row">
<input class="col-4" type="number" min="1" max="500000" id="tank_warn_percent">
<div class="col-7">Tank Warn Percent (mapped in relation to empty and full)</div>
<div class="flexcontainer">
<div class="tankkey">Warn below %</div>
<input class="tankvalue" type="number" min="1" max="500000" id="tank_warn_percent">
</div>
<div class="row">
<input class="col-4" type="number" min="0" max="100" id="tank_empty_percent">
<div class="col-7">Tank Empty Percent (% max move)</div>
<div class="flexcontainer">
<div class="tankkey">Empty at %</div>
<input class="tankvalue" type="number" min="0" max="100" id="tank_empty_percent">
</div>
<div class="row">
<input class="col-4" type="number" min="0" max="100" id="tank_full_percent">
<div class="col-7">Tank Full Percent (% max move)</div>
<div class="flexcontainer">
<div class="tankkey">Full at %</div>
<input class="tankvalue" type="number" min="0" max="100" id="tank_full_percent">
</div>