stuff

rust/src_webpack/src/main.html

@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="bootstrap-grid.css">
 <style>
   .progressPane {
     display: block;
@@ -68,31 +67,110 @@
       transform: translateX(0%) scaleX(0.5);
     }
   }
+
+
+  .flexcontainer {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .subcontainer {
+    min-width: 300px;
+    flex-grow: 1;  
+    border-style: solid; 
+    border-width: 1px; 
+    padding: 8px;
+  }
+  .subcontainercontainer{
+    flex-grow: 1;
+  }
+  
+  .plantcontainer {
+    min-width: 200px;
+    border-style: solid;
+    border-width: 1px;
+    padding: 8px;
+  }
+  .subtitle {
+    flex-grow: 1; 
+    text-align: center; 
+    font-weight: bold;
+  }
+
+  .powerflexkey {
+    min-width: 150px;
+  }
+  .powerflexvalue {
+    text-wrap: nowrap; 
+    flex-grow: 1;
+  }
+
+  .basicnetworkkey{
+    min-width: 200px;
+  }
+  .basicnetworkvalue{
+    flex-grow: 1;
+  }
+  .basicnetworkkeyssid1{
+    flex-grow: 1;
+  }
+  .basicnetworkkeyssid2{
+    min-width: 50px; 
+    flex-grow: 1;
+  }
+
+  .mqttkey{
+    min-width: 100px;
+  }
+  .mqttvalue{
+    flex-grow: 1;
+  }
+
+  .otakey{
+    min-width: 100px;
+  }
+  .otavalue{
+    flex-grow: 1;
+  }
+  .otaform {
+    min-width: 100px;
+    flex-grow: 1;
+  }
+  .otachooser {
+    min-width: 100px;
+    width: 100%;
+  }
+
+  .lightpre{
+    min-width: 20px
+  }
+  .lightkeypre{
+    min-width: 100px;
+  }
+  .lightkey{
+    min-width: 120px;
+  }
+  .lightpost{
+    flex-grow: 1;
+  }
+
 </style>
 
 
-
-
 <div class="container-xl">
-  <div class="row">
-    <div id="firmwareview" class="container col-12 col-lg-4"
-      style="border-width: 1px; border-style: solid; padding: 8px;">
+  <div style="display:flex; flex-wrap: wrap;">
+    <div id="firmwareview" style="border-width: 1px; border-style: solid; flex-grow: 1; min-width: 350px">
     </div>
-    <div id="timeview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 8px;">
+    <div id="timeview" style="border-width: 1px; border-style: solid; flex-grow: 1;">
     </div>
-    <div id="batteryview" class="container col-12 col-lg-4"
-      style="border-style: solid; border-width: 1px; padding: 8px;">
+    <div id="batteryview" style="border-width: 1px; border-style: solid; flex-grow: 1;">
     </div>
   </div>
 
-  <div class="row">
-    <div id="network_view" class="container col-12 col-sm-6 col-lg-4"
-      style="border-style: solid; border-width: 1px; padding: 8px;">
+  <div class="flexcontainer">
+    <div id="network_view" class="subcontainercontainer"></div>
+    <div id="lightview" class="subcontainer">
     </div>
-    <div id="lightview" class="container col-12 col-sm-6 col-lg-4"
-      style="border-style: solid; border-width: 1px; padding: 16px;">
-    </div>
-    <div id="tankview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 16px;">
+    <div id="tankview" class="subcontainer">
     </div>
   </div>
 
@@ -105,7 +183,7 @@
   <h2>config</h2>
   <h3>Plants:</h3>
   <button id="measure_moisture">Measure Moisture</button>
-  <div id="plants" class="row"></div>
+  <div id="plants" style="display: flex; flex-wrap: 1;"></div>