Merge pull request ansible#1475 from marshmalien/feat/style_upgrade_page

Style migrations-pending page
EagleIJoe · Mar 9, 2018 · bfbbb95 · bfbbb95
2 parents 882ed4d + 6f23147
commit bfbbb95
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 11 deletions.
diff --git a/awx/ui/client/installing.template.ejs b/awx/ui/client/installing.template.ejs
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script>var $basePath = '{{ STATIC_URL }}'</script>
     <link rel="shortcut icon" href="{{ STATIC_URL }}assets/favicon.ico?v={{version}}" />
     <title ng-bind="tabTitle"></title>
     <% htmlWebpackPlugin.files.css.forEach(file => {%>
@@ -20,16 +21,14 @@
     </script>
   </head>
   <body>
-    <div class="jumbotron">
-      <div class="container-fluid" id="content-container">
-        <div class="span4">
-          <img style="float:left" src="{% static 'assets/logo-header.svg' %}" width="200"/>
-          <div class="content-heading"><h1>AWX is Upgrading</h1></div>
-          <p>
-            AWX is currently upgrading or installing, this page will refresh when done.
-          </p>
-        </div>
-      </div>
+    <div class="at-Upgrade--panel">
+      <img src="{% static 'assets/logo-header.svg' %}" width="200"/>
+      <span class="at-Upgrade--header at-Upgrade--loading"><span class="at-Upgrade--brand" ng-bind="BRAND_NAME"></span> is Upgrading</span>
+      <span class="fa-4x at-Upgrade--icon"><i class="fa fa-refresh fa-spin"></i></span>
+      <span class="at-Upgrade--text">
+        <p><span class="at-Upgrade--brand" ng-bind="BRAND_NAME"></span>is currently upgrading.</p>
+        <p>This page will refresh when complete.</p>
+      </span>
     </div>
   </body>
-</html>
+</html>
diff --git 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
@@ -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
@@ -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;
+    }
+  }