@@ -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; |
@@ -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> |
@@ -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(); |