beautified system.html (converted to table)

src/CHANGES.md

@@ -4,6 +4,7 @@
 * factory reset formats entire little fs
 * renamed sunrise / sunset on indext.html to start / stop communication
 * show system information only if called directly from menu
+* beautified system.html
 
 ## 0.5.55
 * fixed static IP save

src/web/html/api.js

@@ -128,9 +128,10 @@ function opt(val, html) {
     return o;
 }
 
-function div(cl) {
+function div(cl, h=null) {
     e = document.createElement('div');
     e.classList.add(...cl);
+    if(null != h) e.innerHTML = h;
     return e;
 }
 

src/web/html/style.css

@@ -437,3 +437,77 @@ div.ModPwr, div.ModName {
     border: 0px;
     margin-bottom: 10px;
 }
+
+
+.head {
+    background-color: #006ec0;
+    color: #fff;
+}
+
+.row { display: flex; max-width: 100%; flex-wrap: wrap; }
+.col { flex: 1 0 0%; }
+
+.col-1, .col-2, .col-3, .col-4,
+.col-5, .col-6, .col-7, .col-8,
+.col-9, .col-10, .col-11, .col-12 { flex: 0 0 auto; }
+
+
+.col-1 { width: 8.333333333%; }
+.col-2 { width: 16.66666667%; }
+.col-3 { width: 25%; }
+.col-4 { width: 33.33333333%; }
+.col-5 { width: 41.66666667%; }
+.col-6 { width: 50%; }
+.col-7 { width: 58.33333333%; }
+.col-8 { width: 66.66666667%; }
+.col-9 { width: 75%; }
+.col-10 { width: 83.33333333%; }
+.col-11 { width: 91.66666667%; }
+.col-12 { width: 100%; }
+
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 1rem; }
+.p-4 { padding: 1.5rem; }
+.p-5 { padding: 3rem; }
+
+.mt-1  { margin-top: 0.25rem }
+.mt-2  { margin-top: 0.5rem }
+.mt-3  { margin-top: 1rem }
+.mt-4  { margin-top: 1.5rem }
+.mt-5  { margin-top: 3rem }
+
+.a-r { text-align: right; }
+.a-c { text-align: center; }
+
+/* sm */
+@media(min-width: 768px) {
+    .col-sm-1 { width: 8.333333333%; }
+    .col-sm-2 { width: 16.66666667%; }
+    .col-sm-3 { width: 25%; }
+    .col-sm-4 { width: 33.33333333%; }
+    .col-sm-5 { width: 41.66666667%; }
+    .col-sm-6 { width: 50%; }
+    .col-sm-7 { width: 58.33333333%; }
+    .col-sm-8 { width: 66.66666667%; }
+    .col-sm-9 { width: 75%; }
+    .col-sm-10 { width: 83.33333333%; }
+    .col-sm-11 { width: 91.66666667%; }
+    .col-sm-12 { width: 100%; }
+}
+
+/* md */
+@media(min-width: 992px) {
+    .col-md-1 { width: 8.333333333%; }
+    .col-md-2 { width: 16.66666667%; }
+    .col-md-3 { width: 25%; }
+    .col-md-4 { width: 33.33333333%; }
+    .col-md-5 { width: 41.66666667%; }
+    .col-md-6 { width: 50%; }
+    .col-md-7 { width: 58.33333333%; }
+    .col-md-8 { width: 66.66666667%; }
+    .col-md-9 { width: 75%; }
+    .col-md-10 { width: 83.33333333%; }
+    .col-md-11 { width: 91.66666667%; }
+    .col-md-12 { width: 100%; }
+}

src/web/html/system.html

@@ -18,9 +18,9 @@
         </div>
         <div id="wrapper">
             <div id="content">
-                <div><ul id="info"></ul></div>
+                <div id="info" class="col-sm-12 col-md-6 mt-3"></div>
-                <div><ul id="radio"></ul></div>
+                <div id="radio" class="col-sm-12 col-md-6 mt-3"></div>
-                <div id="system"></div>
+                <div id="system" class="mt-3"></div>
             </div>
         </div>
         <div id="footer">
@@ -45,19 +45,29 @@
                 parseESP(obj);
             }
 
+            function genTabRow(key, value) {
+                var r = div(["row", "p-1"]);
+                r.appendChild(div(["col"], key));
+                r.appendChild(div(["col"], value));
+                return r;
+            }
+
             function parseSysInfo(obj) {
                 const data = ["sdk", "cpu_freq", "chip_revision",
                     "chip_model", "chip_cores", "esp_type", "mac", "wifi_rssi",
                     "flash_size", "sketch_used", "heap_total", "heap_free", "heap_frag",
                     "max_free_blk", "version", "core_version", "reboot_reason"];
 
-                var ul = document.getElementById("info");
+                var main = document.getElementById("info");
+                var h = div(["head", "p-2"]);
+                var r = div(["row"]);
+                r.appendChild(div(["col", "a-c"], "System Information"));
+                h.appendChild(r);
+                main.appendChild(h);
+
                 for (const [key, value] of Object.entries(obj)) {
                     if(!data.includes(key) || (typeof value == 'undefined')) continue;
-                    var li = document.createElement("li");
+                    main.appendChild(genTabRow(key, value));
-                    li.appendChild()
-                    li.appendChild(document.createTextNode(key + ": " + value));
-                    ul.appendChild(li);
                 }
             }
 
@@ -65,21 +75,18 @@
                 const pa = ["MIN", "LOW", "HIGH", "MAX"];
                 const datarate = ["1 MBps", "2 MBps", "250 kbps"];
 
-                var ul = document.getElementById("radio");
+                var main = document.getElementById("radio");
-                let data;
+                var h = div(["head", "p-2"]);
+                var r = div(["row"]);
+                r.appendChild(div(["col", "a-c"], "Radio"));
+                h.appendChild(r);
+                main.appendChild(h);
 
-                var li = document.createElement("li");
+                main.appendChild(genTabRow("nrf24l01" + (obj["isPVariant"] ? "+ " : ""), (obj["isconnected"] ? "is connected " : "is not connected ")));
-                li.appendChild(document.createTextNode("nrf24l01" + (obj["isPVariant"] ? "+ " : "") + (obj["isconnected"] ? "is connected " : "is not connected ")));
-                ul.appendChild(li);
 
                 if(obj["isconnected"]) {
-                    var li = document.createElement("li");
+                    main.appendChild(genTabRow("Datarate", datarate[obj["DataRate"]]));
-                    li.appendChild(document.createTextNode("Datarate: " + datarate[obj["DataRate"]]));
+                    main.appendChild(genTabRow("Power Level", pa[obj["power_level"]]));
-                    ul.appendChild(li);
-
-                    var li = document.createElement("li");
-                    li.appendChild(document.createTextNode("Power Level: " + pa[obj["power_level"]]));
-                    ul.appendChild(li);
                 }
             }