diff --git a/src/components/header/header.pug b/src/components/header/header.pug index 8f83b1465..1787ea0fa 100644 --- a/src/components/header/header.pug +++ b/src/components/header/header.pug @@ -1,9 +1,9 @@ md-content.header(layout='row', layout-align='center center', layout-padding) img.logo(src=require('../../assets/images/LISK-nano.png')) div(flex) - md-button.md-raised.md-primary.send-button(data-show-send-modal, ng-if='$root.logged') Send + md-button.md-raised.md-primary.send-button.offline-hide(data-show-send-modal, ng-if='$root.logged' ng-disabled='!$root.peers.online') Send md-button.md-raised.md-secondary.logout-button(ng-click='$root.logout()', ng-if='$root.logged') Logout - md-menu.top-menu(ng-if='$root.logged', md-position-mode='target-right target', md-offset='14 0') + md-menu.top-menu.offline-hide(ng-if='$root.logged', md-position-mode='target-right target', md-offset='14 0') md-button.md-icon-button(ng-click='$mdOpenMenu()') i.material-icons more_vert md-menu-content(width='2') diff --git a/src/components/main/main.js b/src/components/main/main.js index 423706521..5b80a2efc 100644 --- a/src/components/main/main.js +++ b/src/components/main/main.js @@ -1,5 +1,3 @@ -import './main.less'; - /** * The main component, used as parent for transaction, forging and delgate tabs. * diff --git a/src/components/main/main.less b/src/components/main/main.less deleted file mode 100644 index 92a6056a0..000000000 --- a/src/components/main/main.less +++ /dev/null @@ -1,45 +0,0 @@ -md-toast.lsk-toast-success { - .md-toast-content { - background-color: #7cb342; - } -} - -md-toast.lsk-toast-error { - .md-toast-content { - background-color: #c62828; - } -} - - -html body md-input-container { - overflow-x: initial; -} - -md-menu-item md-checkbox { - margin: 0; - padding: 8px; -} - -md-tabs.main-tabs { - margin: 0 0 -8px 0; - md-tabs-wrapper { - margin: 0 8px; - - &.md-stretch-tabs md-pagination-wrapper { - width: auto; - display: block; - } - md-ink-bar { - bottom: auto; - top: 0; - } - } - .md-tab { - background: #f4f4f4; - box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12); - &.md-active { - background: white; - box-shadow: 0px -2px 1px 0px rgba(0,0,0,0.54); - } - } -} diff --git a/src/components/main/main.pug b/src/components/main/main.pug index 092375f58..d3e89eb36 100644 --- a/src/components/main/main.pug +++ b/src/components/main/main.pug @@ -1,5 +1,5 @@ top -md-tabs.main-tabs(md-stretch-tabs='always') +md-tabs.main-tabs.offline-hide(md-stretch-tabs='always') md-tab(data-ui-sref='main.transactions', md-active='$ctrl.activeTab === "main.transactions"') md-tab-label Transactions md-tab(data-ui-sref='main.voting', md-active='$ctrl.activeTab === "main.voting"') diff --git a/src/components/top/top.pug b/src/components/top/top.pug index 3ff78ea05..e31eea089 100644 --- a/src/components/top/top.pug +++ b/src/components/top/top.pug @@ -7,7 +7,7 @@ md-content(layout='column', layout-gt-xs='row') span.md-title.title Delegate .address.value {{ $ctrl.account.get().username }} small.username {{ $ctrl.account.get().address }} - md-card.peer(flex-gt-xs=33) + 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 diff --git a/src/index.less b/src/index.less index 0fbb1ee22..f3e3451c7 100644 --- a/src/index.less +++ b/src/index.less @@ -49,12 +49,61 @@ body { .offline .offline-hide { opacity: 0.5; + pointer-events: none; } md-input-container { - overflow-x: hidden; + overflow-x: initial; label:not(.md-no-float):not(.md-container-ignore), .md-placeholder { box-sizing: content-box; } } + + .absolutely-positioned-loading { + position: absolute; + margin: 24px 12px; + width: 100%; + z-index: 10; + } +} + +md-toast.lsk-toast-success { + .md-toast-content { + background-color: #7cb342; + } +} + +md-toast.lsk-toast-error { + .md-toast-content { + background-color: #c62828; + } +} + +md-menu-item md-checkbox { + margin: 0; + padding: 8px; +} + +md-tabs.main-tabs { + margin: 0 0 -8px 0; + md-tabs-wrapper { + margin: 0 8px; + + &.md-stretch-tabs md-pagination-wrapper { + width: auto; + display: block; + } + md-ink-bar { + bottom: auto; + top: 0; + } + } + .md-tab { + background: #f4f4f4; + box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12); + &.md-active { + background: white; + box-shadow: 0px -2px 1px 0px rgba(0,0,0,0.54); + } + } } diff --git a/src/index.pug b/src/index.pug index bfc84c9bf..8a46cee4e 100644 --- a/src/index.pug +++ b/src/index.pug @@ -11,7 +11,7 @@ html div.body-wrapper md-content(id="main", flex='100', flex-gt-sm='80', flex-offset-gt-sm='10') header - div(layout='row', layout-align='space-around', ng-show='prelogged') + div.absolutely-positioned-loading(layout='row', layout-align='space-around', ng-show='prelogged') md-progress-circular.md-warn(md-mode='indeterminate', md-diameter='80') div(ng-class='{ online: $root.peers.online, offline: !$root.peers.online }') div(data-ui-view)