From b1b5968e5e4f7bdf9a7db159bbc2f1e64c2808f0 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:32:20 -0230 Subject: [PATCH 1/4] Remove unused loading-overlay--full-screen CSS styles Refs #4417 --- ui/app/css/itcss/components/loading-overlay.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index b07d6af17..6d7d666be 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -20,13 +20,6 @@ height: calc(100% - 75px); } - &--full-screen { - position: fixed; - height: 100vh; - width: 100vw; - margin-top: 0; - } - &__container { position: absolute; top: 33%; From 4c376695573ea2372e25b1a14ed31edb5f613d2d Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:33:53 -0230 Subject: [PATCH 2/4] Make the LoadingScreen component 100% as tall as its container --- ui/app/css/itcss/components/loading-overlay.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 6d7d666be..38627af17 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -8,18 +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); - } - &__container { position: absolute; top: 33%; From fbf14cd130c6f7f73697fad28730da485cb7c946 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:52:39 -0230 Subject: [PATCH 3/4] Prevent loading screen from overlaying the app bar Refs #4417 This change is functional copy of 3893469 that solves the problem in a way that doesn't depend on the height of the app bar since the app bar isn't a fixed height in the smaller views. --- ui/app/app.js | 14 ++++++++------ ui/app/components/page-container/index.scss | 2 ++ ui/app/css/itcss/components/loading-overlay.scss | 2 +- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index c93f93e75..7c92bcf74 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', [ + (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/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 38627af17..17f12ab73 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: 256; position: absolute; flex-direction: column; display: flex; From 3987f9860f9a1892c12237b726db30a8d5a3c41d Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 16:43:58 -0230 Subject: [PATCH 4/4] Move main-container wrapper div into its own class --- ui/app/app.js | 2 +- ui/app/components/pages/unlock-page/index.scss | 1 + ui/app/css/itcss/components/loading-overlay.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 10 ++++++++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 7c92bcf74..26dd784f0 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -152,7 +152,7 @@ class App extends Component { h(AccountMenu), - h('div.main-container', [ + h('div.main-container-wrapper', [ (isLoading || isLoadingNetwork) && h(Loading, { loadingMessage: loadMessage, }), 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 17f12ab73..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: 256; + z-index: 51; position: absolute; flex-direction: column; display: flex; 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