CSS tuning

components/wifi-manager/code.js

@@ -313,15 +313,15 @@ $(document).ready(function(){
         });
 });
 
-function setURL(button) {
+    function setURL(button) {
         var url = button.dataset.url;
         $("#fwurl").val(url);
 
         $('[data-url^="http"]').addClass("btn-success").removeClass("btn-danger");
         $('[data-url="'+url+'"]').addClass("btn-danger").removeClass("btn-success");
-}
+    }
 
-function performConnect(conntype){
+    function performConnect(conntype){
         //stop the status refresh. This prevents a race condition where a status 
         //request would be refreshed with wrong ip info from a previous connection
         //and the request would automatically shows as succesful.
@@ -363,9 +363,9 @@ function performConnect(conntype){
         //now we can re-set the intervals regardless of result
         startCheckStatusInterval();
         startRefreshAPInterval();
-}
+    }
 
-function rssiToIcon(rssi){
+    function rssiToIcon(rssi){
         if(rssi >= -60){
             return 'w0';
         }
@@ -378,9 +378,9 @@ function rssiToIcon(rssi){
         else{
             return 'w3';
         }
-}
+    }
 
-function refreshAP(){
+    function refreshAP(){
         if (!enableAPTimer) return;
         $.getJSON( "/ap.json", function( data ) {
             if(data.length > 0){
@@ -393,9 +393,9 @@ function refreshAP(){
                 refreshAPHTML(apList);
             }
         });
-}
+    }
 
-function refreshAPHTML(data){
+    function refreshAPHTML(data){
         var h = "";
         data.forEach(function(e, idx, array) {
             h += '<div class="ape{0}"><div class="{1}"><div class="{2}">{3}</div></div></div>'.format(idx === array.length - 1?'':' brdb', rssiToIcon(e.rssi), e.auth==0?'':'pw',e.ssid);
@@ -403,9 +403,9 @@ function refreshAPHTML(data){
         });
 
         $( "#wifi-list" ).html(h)
-}
+    }
 
-function checkStatus(){
+    function checkStatus(){
         RepeatCheckStatusInterval();
         if (!enableStatusTimer) return;
         if (blockAjax) return;
@@ -422,7 +422,7 @@ function checkStatus(){
                         $("#netmask").text(data["netmask"]);
                         $("#gw").text(data["gw"]);
                         $("#wifi-status").slideDown( "fast", function() {});
-                    $("span#foot-wifi").html(", SSID: "+data["ssid"]+", IP: "+data["ip"]);
+                        $("span#foot-wifi").html(", SSID: <strong>"+data["ssid"]+"</strong>, IP: <strong>"+data["ip"]+"</strong>");
 
                         //unlock the wait screen if needed
                         $( "#ok-connect" ).prop("disabled",false);
@@ -469,7 +469,7 @@ function checkStatus(){
                         $("#netmask").text(data["netmask"]);
                         $("#gw").text(data["gw"]);
                         $("#wifi-status").slideDown( "fast", function() {});
-                    $("span#foot-wifi").html(", SSID: "+data["ssid"]+", IP: "+data["ip"]);
+                        $("span#foot-wifi").html(", SSID: <strong>"+data["ssid"]+"</strong>, IP: <strong>"+data["ip"]+"</strong>");
                     }
                     enableAPTimer = false;
                     if (!recovery) enableStatusTimer = false;
@@ -489,7 +489,7 @@ function checkStatus(){
             }
             if(data.hasOwnProperty('version') && data['version'] != ''){
                 ver = data['version'];
-            $("span#foot-fw").html("fw: "+ver+", mode: "+pname);
+                $("span#foot-fw").html("fw: <strong>"+ver+"</strong>, mode: <strong>"+pname+"</strong>");
             }
             if(data.hasOwnProperty('ota_pct') && data['ota_pct'] != 0){
                 otapct = data['ota_pct'];
@@ -501,9 +501,9 @@ function checkStatus(){
             .fail(function() {
                 //don't do anything, the server might be down while esp32 recalibrates radio
             });
-}
+    }
 
-function getConfig() {
+    function getConfig() {
         $.getJSON("/config.json", function(data) {
             if (data.hasOwnProperty('autoexec')) {
                 if (data["autoexec"] === 1) {
@@ -538,4 +538,4 @@ function getConfig() {
             .fail(function() {
                 console.log("failed to fetch config!");
             });
-}
+    }

components/wifi-manager/style.css

@@ -2,6 +2,8 @@ body {
     border: 0;
     margin: 0;
     margin-bottom:50px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 a {
     color: darkblue;
@@ -25,7 +27,6 @@ button:focus {
     filter: blur(2px);
 }
 .ape {
-    margin-left: 20px;
     padding: 10px 0px 10px 10px;
     background-color: #444;
 }
@@ -79,21 +80,18 @@ h3 {
 #manual_ssid {
     border: none;
     width: 80%;
-    margin-left: 35px;
     padding: 10px 0px 10px 10px;
     display: block
 }
 #manual_pwd {
     border: none;
     width: 80%;
-    margin-left: 35px;
     padding: 10px 0px 10px 10px;
     display: block
 }
 #pwd {
     border: none;
     width: 80%;
-    margin-left: 35px;
     padding: 10px 0px 10px 10px;
     display: block
 }
@@ -108,7 +106,6 @@ h3 {
 }
 #yes-disconnect {
     display: inline-block;
-    margin-left: 20px;
 }
 #no-disconnect {
     display: inline-block;
@@ -220,9 +217,12 @@ input.gpio {
     height: 1.8em;
 }
 
+.custom-switch {
+    margin-left: 8px;
+}
+
 .custom-switch, .custom-radio {
   padding-left: 2.25rem;
-  margin-left: 12px;
   padding-bottom: 1rem;
 }
 
@@ -273,7 +273,6 @@ textarea#autoexec1, textarea#fwurl {
 }
 
 input, textarea {
-    margin-left: 10px;
     border-radius: 3px;
     border: 1px solid transparent;
     border-top: none;
@@ -281,10 +280,6 @@ input, textarea {
     box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
 }
 
-.form-group {
-    margin-left: 10px;
-}
-
 #otadiv {
 	display: none;
 }
@@ -299,7 +294,6 @@ input, textarea {
 }
 
 #progress {
-    margin-left: 13px;
     width: 60%;
 }