Commit d6a09d28 authored by Benoît's avatar Benoît

fix status bar

parent 8174bc53
<div class="status">
<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 text-success"></i></li>
<li class="list-inline-item"><i class="icon-syncr text-success"></i></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 ml-2"><i class="icon-earth text-info"></i></li>
<li class="list-inline-item">{{ connectedNodes }}</li>
</ul>
</div>
......@@ -178,7 +178,7 @@ em {
// status box
.status {
background: $white;
width: 80px;
width: auto;
height: 40px;
border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
......@@ -187,29 +187,33 @@ em {
bottom: 2%;
right: 2%;
text-align: center;
ul {transform: translateY(50%) translateX(15%);}
ul {
transform: translateY(50%) translateX(0);
display: inline-block;
position: relative;
padding: 0 2em;
}
li {
font-size: .9em;
position: relative;
padding: 0 8px;
float: left;
margin-right: 4px;
.text-info {color: $gray-dark !important;}
&.pending {
i {
font-size: 1.3em;
position: absolute;
font-size: .9em;
color: $brand-warning;
animation: spin 4s linear infinite;
}
}
&.statusOK {
i {
color: $brand-success;
font-size: 1.3em;
font-size: .9em;
position: absolute;
}
}
}
}
@keyframes spin {100%{transform:rotate(360deg);}}
// modal
.modal-header {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -219,7 +219,7 @@ em.display-4 {
.status {
background: #fff;
width: 80px;
width: auto;
height: 40px;
border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80, 96, 120, 0.2);
......@@ -231,34 +231,34 @@ em.display-4 {
}
.status ul {
transform: translateY(50%) translateX(15%);
transform: translateY(50%) translateX(0);
display: inline-block;
position: relative;
padding: 0 2em;
}
.status li {
font-size: .9em;
position: relative;
padding: 0 8px;
float: left;
margin-right: 4px;
}
.status li .text-info {
color: #878685 !important;
}
.status li.pending i {
font-size: 1.3em;
position: absolute;
font-size: .9em;
color: #D1C312;
animation: spin 4s linear infinite;
}
.status li.statusOK i {
color: #2ECCA9;
font-size: 1.3em;
font-size: .9em;
position: absolute;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.modal-header .bubble {
width: 50px;
height: 50px;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
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