Commit 620fc9f9 authored by dev0tion's avatar dev0tion

Add number of connections to status bar

parent 43d563d1
<div class="status"> <div class="status">
<ul class="list-inline align-self-center row"> <ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
<li class="list-inline-item pending"><i class="icon-syncr"></i></li> <li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li>
<li class="list-inline-item">{{ percentSynced }}%</li> <li class="list-inline-item">{{ percentSynced }}%</li>
<li class="list-inline-item"><i class="icon-earth text-success"></i></li>
<li class="list-inline-item">{{ connectedNodes }}</li>
</ul> </ul>
</div> </div>
This diff is collapsed.
...@@ -133,27 +133,35 @@ code { ...@@ -133,27 +133,35 @@ code {
color: #2ECCA9; } color: #2ECCA9; }
.status { .status {
background: #fff;
width: 80px;
height: 40px;
border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80, 96, 120, 0.2);
border-radius: 80px;
position: fixed; position: fixed;
bottom: 2%; bottom: 2%;
right: 2%; right: 4%;
text-align: center; } text-align: center;
}
.status ul { .status ul {
transform: translateY(50%) translateX(15%); } transform: translateY(50%) translateX(15%);
display: block;
background: #fff;
width: auto;
height: 40px;
border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80, 96, 120, 0.2);
border-radius: 80px;
padding: .75em;
}
.status li { .status li {
font-size: .9em; font-size: .9em;
position: relative; position: relative;
padding: 0 8px; } margin: 0 4px;
float: left;
width: auto;
}
.status li.pending i { .status li.pending i {
font-size: 1.3em; font-size: 1.3em;
position: absolute; /* position: relative; */
color: #D1C312; color: #D1C312;
animation: spin 4s linear infinite; } animation: spin 4s linear infinite;
}
.status li.statusOK i { .status li.statusOK i {
color: #2ECCA9; color: #2ECCA9;
font-size: 1.3em; font-size: 1.3em;
...@@ -162,6 +170,7 @@ code { ...@@ -162,6 +170,7 @@ code {
@keyframes spin { @keyframes spin {
100% { 100% {
transform: rotate(360deg); } } transform: rotate(360deg); } }
.modal-header .bubble { .modal-header .bubble {
width: 50px; width: 50px;
height: 50px; height: 50px;
...@@ -7344,10 +7353,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { ...@@ -7344,10 +7353,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
src: url("./assets/fonts/Lato-Black.ttf") format("truetype"); } src: url("./assets/fonts/Lato-Black.ttf") format("truetype"); }
@font-face { @font-face {
font-family: 'icon'; font-family: 'icon';
src: url("./assets/fonts/icon.eot?uu062v"); src: url("./assets/fonts/icon.eot?qz0v16");
src: url("./assets/fonts/icon.eot?uu062v#iefix") format("embedded-opentype"), url("./assets/fonts/icon.ttf?uu062v") format("truetype"), url("./assets/fonts/icon.woff?uu062v") format("woff"), url("./assets/fonts/icon.svg?uu062v#icomoon") format("svg"); src: url("./assets/fonts/icon.eot?qz0v16#iefix") format('embedded-opentype'),
url("./assets/fonts/icon.ttf?qz0v16") format('truetype'),
url("./assets/fonts/icon.woff?qz0v16") format('woff'),
url("./assets/fonts/icon.svg?qz0v16#icomoon") format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal;
}
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icon' !important; font-family: 'icon' !important;
...@@ -7357,60 +7371,120 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { ...@@ -7357,60 +7371,120 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale;
}
.icon-stratis:before {
content: "\e900"; }
.icon-syncr:before {
content: "\e902"; }
.icon-bitcoin:before {
content: "\e904"; }
.icon-block:before {
content: "\e92e"; }
.icon-coin-dollar:before { .icon-coin-dollar:before {
content: "\e93b"; } content: "\e93b";
}
.icon-coin-euro:before { .icon-coin-euro:before {
content: "\e93c"; } content: "\e93c";
}
.icon-coin-pound:before { .icon-coin-pound:before {
content: "\e93d"; } content: "\e93d";
}
.icon-database:before { .icon-coin-yen:before {
content: "\e964"; } content: "\e93e";
}
.icon-settings:before { .icon-bell:before {
content: "\e994"; } content: "\e951";
}
.icon-download:before { .icon-download:before {
content: "\e9c2"; } content: "\e960";
}
.icon-upload:before { .icon-upload:before {
content: "\e9c3"; } content: "\e961";
}
.icon-cancel-circle:before { .icon-coin:before {
content: "\ea0d"; } content: "\e964";
}
.icon-checkmark2:before { .icon-lock:before {
content: "\ea11"; } content: "\e98f";
}
.icon-unlocked:before {
content: "\e990";
}
.icon-cog:before {
content: "\e994";
}
.icon-bin:before {
content: "\e9ac";
}
.icon-switch:before {
content: "\e9b6";
}
.icon-cloud:before {
content: "\e9c1";
}
.icon-cloud-download:before {
content: "\e9c2";
}
.icon-cloud-upload:before {
content: "\e9c3";
}
.icon-cloud-check:before {
content: "\e9c4";
}
.icon-download2:before {
content: "\e9c5";
}
.icon-upload2:before {
content: "\e9c6";
}
.icon-download3:before {
content: "\e9c7";
}
.icon-upload3:before {
content: "\e9c8";
}
.icon-sphere:before {
content: "\e9c9";
}
.icon-earth:before {
content: "\e9ca";
}
.icon-link:before {
content: "\e9cb";
}
.icon-circle-up:before {
content: "\ea41";
}
.icon-circle-right:before {
content: "\ea42";
}
.icon-circle-down:before {
content: "\ea43";
}
.icon-circle-left:before {
content: "\ea44";
}
.icon-checkbox-checked:before { .icon-checkbox-checked:before {
content: "\ea52"; } content: "\ea52";
}
.icon-checkbox-unchecked:before { .icon-checkbox-unchecked:before {
content: "\ea53"; } content: "\ea53";
}
.icon-radio-checked:before { .icon-radio-checked:before {
content: "\ea54"; } content: "\ea54";
}
.icon-radio-unchecked:before { .icon-radio-unchecked:before {
content: "\ea56"; } content: "\ea56";
}
.icon-block:before {
content: "\eae8";
}
.icon-stratis:before {
content: "\e900";
}
.icon-syncr:before {
content: "\e1";
}
.icon-bitcoin:before {
content: "\e2";
}
.btn-primary { .btn-primary {
color: #fff !important; color: #fff !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment