diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/app.js | 14 | ||||
-rw-r--r-- | ui/app/components/page-container/index.scss | 2 | ||||
-rw-r--r-- | ui/app/components/pages/unlock-page/index.scss | 1 | ||||
-rw-r--r-- | ui/app/css/itcss/components/loading-overlay.scss | 20 | ||||
-rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 10 |
5 files changed, 23 insertions, 24 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index f1590d89e..aeb3d05ee 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -152,12 +152,14 @@ class App extends Component { h(AccountMenu), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), - - // content - this.renderRoutes(), + h('div.main-container-wrapper', [ + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), + + // content + this.renderRoutes(), + ]), ]) ) } diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index 14cdbacd3..61434cbcf 100644 --- a/ui/app/components/page-container/index.scss +++ b/ui/app/components/page-container/index.scss @@ -182,5 +182,7 @@ max-height: 82vh; min-height: 570px; flex: 0 0 auto; + margin-right: auto; + margin-left: auto; } } diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss index 3d44bd037..6bd52282d 100644 --- a/ui/app/components/pages/unlock-page/index.scss +++ b/ui/app/components/pages/unlock-page/index.scss @@ -14,6 +14,7 @@ align-self: stretch; justify-content: center; flex: 1 0 auto; + height: 100vh; } &__mascot-container { diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index b07d6af17..b023c8423 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -1,6 +1,6 @@ .loading-overlay { left: 0; - z-index: 50; + z-index: 51; position: absolute; flex-direction: column; display: flex; @@ -8,25 +8,9 @@ align-items: center; flex: 1 1 auto; width: 100%; + height: 100%; background: rgba(255, 255, 255, .8); - @media screen and (max-width: 575px) { - margin-top: 66px; - height: calc(100% - 66px); - } - - @media screen and (min-width: 576px) { - margin-top: 75px; - height: calc(100% - 75px); - } - - &--full-screen { - position: fixed; - height: 100vh; - width: 100vw; - margin-top: 0; - } - &__container { position: absolute; top: 33%; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 7eb193d6f..8e963d495 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -22,6 +22,12 @@ $wallet-view-bg: $alabaster; display: none; } +.main-container-wrapper { + display: flex; + width: 100vw; + justify-content: center; +} + //Account and transaction details .account-and-transaction-details { display: flex; @@ -219,6 +225,10 @@ $wallet-view-bg: $alabaster; overflow-y: auto; background-color: $white; } + + .main-container-wrapper { + height: 100%; + } } // wallet view |