External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 19:10:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1475 from marshmalien/feat/style_upgrade_page

Browse Source 
Style migrations-pending page
This commit is contained in:
Marliana Lara 2018-03-09 11:47:34 -05:00 committed by GitHub
commit bfbbb95256
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
awx/ui/client/installing.template.ejs
View File

@ -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>

4
awx/ui/client/lib/theme/_variables.less
View File

@ -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;

1
awx/ui/client/lib/theme/index.less
View File

@ -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';

55
awx/ui/client/src/shared/upgrade/upgrade.block.less Normal file
View File

@ -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;
}
}