commit ada02a8: [WebUI] Convert stat boxes to Bootstrap cards

[moisseev]

Author: moisseev
Date: 2020-07-08 20:23:26 +0300
URL: https://github.com/rspamd/rspamd/commit/ada02a80d9642fde602ea0bd8fd6bcde4612a24a (refs/pull/3425/head)

[WebUI] Convert stat boxes to Bootstrap cards

---
 interface/css/rspamd.css  | 44 ++++----------------------------------------
 interface/index.html      |  8 ++------
 interface/js/app/stats.js | 26 +++++++++++++++-----------
 3 files changed, 21 insertions(+), 57 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index b4de0e64f..bbaa51586 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -30,6 +30,9 @@ THE SOFTWARE.
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.text-secondary {
+    color: #666 !important;
+}
 .navbar {
     padding-top: 0;
     padding-bottom: 0;
@@ -229,62 +232,23 @@ table#symbolsTable input[type="number"] {
     font-size: 0.857rem;
 }
 
-.stat-boxes {
-    margin: 0;
-    margin-right: -10px !important;
-    padding-left: 0;
-}
 .stat-box {
-    background-color: #f6f6f6;
     background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#f9f9f9), to(#ededed));
     background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #ededed 100%);
     background-image: -moz-linear-gradient(top, #f9f9f9 0%, #ededed 100%);
     background-image: -ms-linear-gradient(top, #f9f9f9 0%, #ededed 100%);
     background-image: -o-linear-gradient(top, #f9f9f9 0%, #ededed 100%);
     background-image: linear-gradient(to bottom, #f9f9f9 0%, #ededed 100%);
-    border: 1px solid #d5d5d5;
-    border-radius: 4px 4px 4px 4px;
-    display: inline-block;
-    line-height: 18px;
-    margin: 0 10px 10px 0;
-    padding: 0 10px;
+    line-height: 1;
 }
 .stat-box:not(.float-right) {
     min-width: 90px;
 }
 .stat-box .widget {
-    overflow: hidden;
-    margin: 0 12px;
-    padding: 10px 0 6px;
     font-size: 10px;
-    font-weight: bold;
-    text-align: center;
-    text-transform: capitalize;
-    color: #666;
-}
-.stat-box .left,
-.stat-box .right {
-    float: left;
-}
-.stat-box .left {
-    border-right: 1px solid gainsboro;
-    margin-right: 14px;
-    padding-right: 18px;
-    font-size: 10px;
-    font-weight: bold;
-}
-.stat-box .right {
-    padding-left: 4px;
-}
-.stat-box .widget span,
-.stat-box .widget strong {
-    display: block;
 }
 .stat-box .widget strong {
     font-size: 26px;
-    margin-bottom: 3px;
-    margin-top: 6px;
-    font-weight: 700;
 }
 .nomargin {
     margin: 0 !important;
diff --git a/interface/index.html b/interface/index.html
index 1ac5e2ca4..3b2f1f2ca 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -80,11 +80,7 @@
 		<div class="tab-content">
 			<div class="tab-pane active" id="status">
 				<div class="row">
-					<div class="col-lg-12">
-						<div class="card border-0">
-							<ul id="statWidgets" class="stat-boxes" style="display: none;">
-							</ul>
-						</div>
+					<div id="statWidgets" class="col-lg-12 stat-boxes text-capitalize font-weight-bold text-secondary" style="display: none;">
 					</div>
 				</div>
 				<div class="row">
@@ -96,7 +92,7 @@
 							</div>
 								<div class="card-body nopadding table-responsive">
 									<table class="table table-sm table-hover table-bordered text-nowrap mb-0" id="clusterTable">
-										<thead>
+										<thead class="text-secondary">
 											<tr>
 												<th></th>
 												<th>Server name</th>
diff --git a/interface/js/app/stats.js b/interface/js/app/stats.js
index 03cc02d08..4c7f5067b 100644
--- a/interface/js/app/stats.js
+++ b/interface/js/app/stats.js
@@ -70,18 +70,21 @@ define(["jquery", "d3pie"],
             $.each(data, function (i, item) {
                 var widget = "";
                 if (i === "auth" || i === "error") return; // Skip to the next iteration
-                if (i === "version") {
-                    widget = "<div class=\"left\"><strong>" + item + "</strong>" +
-                    i + "</div>";
-                    $(widget).appendTo(widgets);
-                } else if (i === "uptime") {
-                    widget = "<div class=\"right\"><strong>" + msToTime(item) +
-                    "</strong>" + i + "</div>";
+                if (i === "uptime" || i === "version") {
+                    var cls = "border-right ";
+                    var val = item;
+                    if (i === "uptime") {
+                        cls = "";
+                        val = msToTime(item);
+                    }
+                    widget = "<div class=\"" + cls + "float-left px-3\"><strong class=\"d-block mt-2 mb-1 font-weight-bold\">" + val +
+                      "</strong>" + i + "</div>";
                     $(widget).appendTo(widgets);
                 } else {
                     var titleAtt = d3.format(",")(item) + " " + i;
-                    widget = "<li class=\"stat-box bg-light shadow-sm\"><div class=\"widget\" title=\"" + titleAtt + "\"><strong>" +
-                    d3.format(".3~s")(item) + "</strong>" + i + "</div></li>";
+                    widget = "<div class=\"card stat-box d-inline-block text-center bg-light shadow-sm mr-3 px-3\"><div class=\"widget overflow-hidden p-2\" title=\"" +
+                      titleAtt + "\"><strong class=\"d-block mt-2 mb-1 font-weight-bold\">" +
+                    d3.format(".3~s")(item) + "</strong>" + i + "</div></div>";
                     if (i === "scanned") {
                         stat_w[0] = widget;
                     } else if (i === "clean") {
@@ -100,8 +103,9 @@ define(["jquery", "d3pie"],
             $.each(stat_w, function (i, item) {
                 $(item).appendTo(widgets);
             });
-            $("#statWidgets .left,#statWidgets .right").wrapAll("<li class=\"stat-box bg-light shadow-sm float-right\"><div class=\"widget\"></div></li>");
-            $("#statWidgets").find("li.float-right").appendTo("#statWidgets");
+            $("#statWidgets > div:not(.stat-box)")
+                .wrapAll("<div class=\"card stat-box text-center bg-light shadow-sm float-right\"><div class=\"widget overflow-hidden p-2\"></div></div>");
+            $("#statWidgets").find("div.float-right").appendTo("#statWidgets");
 
             $("#clusterTable tbody").empty();
             $("#selSrv").empty();