Merge pull request #292 from LiskHQ/285-286-refine-top-header

Refine top header
LiskArchive · Jun 1, 2017 · a109c52 · a109c52
2 parents ccca3b3 + ccf0da4
commit a109c52
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 20 deletions.
diff --git a/src/components/top/top.less b/src/components/top/top.less
@@ -11,7 +11,6 @@ top {
     display: block;
     width: 100%;
     text-align: center;
-    padding-top: 12px;
   }
 
   .status {
@@ -27,15 +26,29 @@ top {
       color: #F45D4C;
     }
   }
-
-  .value {
-    font-size: 120%;
-    font-weight: bold;
-    background-color: #5f696e;
-    color: #fff;
-    border-radius: 3px;
-    padding: 9px 9px;
+  .value-wrapper {
+    width: 100%;
+    height: 70px;
+    text-align: center;
+    background: #eee;
+    .primary {
+      font-size: 120%;
+      font-weight: bold;
+      color: #5f696e;
+      padding: 9px 9px;
+      display: inline-block;
+      &.full {
+        height: 51px;
+        line-height: 51px;
+      }
+    }
+    .secondary {
+      color: #5f696e;
+      border-radius: 3px;
+      font-size: 100%;
+    }
   }
+
 
   md-select {
     margin: 0;
@@ -46,8 +59,34 @@ top {
   .balance-wrapper {
     display: inline-block;
     line-height: 41px;
+    position: relative;
+    overflow: hidden;
     &.has-send-modal {
       cursor: pointer;
+
+      .tooltip {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        text-align: center;
+        left: 0;
+        top: 100%;
+        transition: all ease 200ms;
+        font-size: 85%;
+      }
+
+      lsk {
+        position: relative;
+        transition: all ease 200ms;
+        z-index: 2;
+        &:hover {
+          color: #000;
+
+          & + .tooltip {
+            transform: translateY(-33px);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/components/top/top.pug b/src/components/top/top.pug
@@ -2,25 +2,30 @@ md-content(layout='column', layout-gt-xs='row')
   md-card.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center', ng-if='!$ctrl.account.get().isDelegate')
       span.md-title.title Address
-      .address.value {{ $ctrl.account.get().address }}
+      div.value-wrapper
+        .address.value.primary.full {{ $ctrl.account.get().address }}
     md-card-content(layout='column', layout-align='center center', ng-if='$ctrl.account.get().isDelegate')
       span.md-title.title Delegate
-      .address.value {{ $ctrl.account.get().username }}
-      small.username {{ $ctrl.account.get().address }}
+      div.value-wrapper
+        .address.value.primary {{ $ctrl.account.get().username }}
+        small.username.secondary {{ $ctrl.account.get().address }}
   md-card.peer.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center')
       span.status
         i.material-icons.offline(ng-show='!$ctrl.peers.online') error
         i.material-icons.online(ng-show='$ctrl.peers.online') check circle
       span.md-title.title Peer
-      div.active-peer.value
-        span(ng-bind="$ctrl.peers.active.currentPeer")
-        span(ng-if="$ctrl.peers.active.port && $ctrl.peers.active.port != '8000' ")
-          span :
-          span(ng-bind="$ctrl.peers.active.port")
+      div.value-wrapper
+        span.primary {{ $ctrl.peers.active.options.name }}
+        div.active-peer.value.secondary
+          span(ng-bind="$ctrl.peers.active.currentPeer")
+          span(ng-if="$ctrl.peers.active.port && $ctrl.peers.active.port != '8000' ")
+            span :
+            span(ng-bind="$ctrl.peers.active.port")
   md-card.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center')
       span.md-title.title Balance
-      div(class='balance-wrapper', data-show-send-modal, data-amount='$ctrl.totalSendable', data-ng-class='{"has-send-modal": $ctrl.totalSendable > 0}')
-        lsk.balance.value(amount='$ctrl.account.get().balance', nocolor, append)
-        md-tooltip(md-direction='top', md-delay='350', data-ng-if='$ctrl.account.get().balance > 0') Send all funds
+      div.value-wrapper
+        div(class='balance-wrapper', data-show-send-modal, data-amount='$ctrl.totalSendable', data-ng-class='{"has-send-modal": $ctrl.totalSendable > 0}')
+          lsk.balance.value.primary.full(amount='$ctrl.account.get().balance', nocolor, append)
+          span.tooltip.secondary(data-ng-if='$ctrl.account.get().balance > 0') Click to send all funds