From 6f23147d980da0aab4ddd67659332a166428b20c Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 8 Mar 2018 11:40:07 -0500 Subject: [PATCH] Style migrations/pending page --- awx/ui/client/installing.template.ejs | 21 ++++--- awx/ui/client/lib/theme/_variables.less | 4 ++ awx/ui/client/lib/theme/index.less | 1 + .../src/shared/upgrade/upgrade.block.less | 55 +++++++++++++++++++ 4 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 awx/ui/client/src/shared/upgrade/upgrade.block.less diff --git a/awx/ui/client/installing.template.ejs b/awx/ui/client/installing.template.ejs index 42aa1ffc07..432c42b48b 100644 --- a/awx/ui/client/installing.template.ejs +++ b/awx/ui/client/installing.template.ejs @@ -5,6 +5,7 @@ + <% htmlWebpackPlugin.files.css.forEach(file => {%> @@ -20,16 +21,14 @@ -
-
-
- -

AWX is Upgrading

-

- AWX is currently upgrading or installing, this page will refresh when done. -

-
-
+
+ + is Upgrading + + +

is currently upgrading.

+

This page will refresh when complete.

+
- + \ No newline at end of file diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index cd3a8a6675..2d640a0ccd 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -69,6 +69,7 @@ @at-space-3x: 15px; @at-space-4x: 20px; @at-space-5x: 25px; +@at-space-10x: 50px; // 4. Breakpoints --------------------------------------------------------------------------------- @@ -117,6 +118,7 @@ @at-color-disabled: @at-gray-d7; @at-color-body-background-dark: @at-gray-70; +@at-color-body-background-light: @at-gray-eb; @at-color-body-text-dark: @at-white; @at-color-body-background: @at-gray-fc; @at-color-body-text: @at-gray-70; @@ -209,6 +211,8 @@ @at-font-size-list-row-item-tag: 10px; @at-font-size-list-row-action: 19px; @at-font-size-list-row-action-icon: 19px; +@at-font-size-jumbotron-heading: 24px; +@at-font-size-jumbotron-text: @at-font-size-4x; @at-font-weight-body: @at-font-weight; @at-font-weight-heading: @at-font-weight-2x; diff --git a/awx/ui/client/lib/theme/index.less b/awx/ui/client/lib/theme/index.less index c236928da6..b5ac04dfca 100644 --- a/awx/ui/client/lib/theme/index.less +++ b/awx/ui/client/lib/theme/index.less @@ -115,6 +115,7 @@ @import '../../src/shared/download-standard-out.block.less'; @import '../../src/shared/media-object.block.less'; @import '../../src/shared/text-label'; +@import '../../src/shared/upgrade/upgrade.block.less'; @import '../../src/smart-status/smart-status.block.less'; @import '../../src/standard-out/standard-out.block.less'; @import '../../src/system-tracking/date-picker/date-picker.block.less'; diff --git a/awx/ui/client/src/shared/upgrade/upgrade.block.less b/awx/ui/client/src/shared/upgrade/upgrade.block.less new file mode 100644 index 0000000000..1f7ecbe25f --- /dev/null +++ b/awx/ui/client/src/shared/upgrade/upgrade.block.less @@ -0,0 +1,55 @@ +.at-Upgrade--panel { + align-items: center; + background-color: @at-color-body-background-light; + color: @at-color-body-text; + display: flex; + flex-direction: column; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: @at-font-size-jumbotron-text; + justify-content: center; + margin-top: @at-space-10x; + padding: @at-space-10x; + } + + .at-Upgrade--header { + display: flex; + font-size: @at-font-size-jumbotron-heading; + margin-top: @at-space-2x; + } + + .at-Upgrade--text { + align-items: center; + display: flex; + flex-flow: column; + } + + .at-Upgrade--brand { + margin-right: .4em; + } + + .at-Upgrade--icon { + color: @at-gray-b7; + } + + .at-Upgrade--loading:after { + content: "\2026"; + display: inline-block; + overflow: hidden; + position: absolute; + vertical-align: bottom; + width: 0px; + animation: ellipsis steps(4, end) 1500ms infinite; + -webkit-animation: ellipsis steps(4, end) 1500ms infinite; + } + + @keyframes ellipsis { + to { + width: 30px; + } + } + + @-webkit-keyframes ellipsis { + to { + width: 30px; + } + }