External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-11 03:17:38 -02:30
Code Issues Packages Projects Releases Wiki Activity

Adjust table heights based on actual viewport height. Summary flyout now accounts for viewport width and goes 100% on width < 840px.

Browse Source
This commit is contained in:
Chris Houseknecht
2014-05-01 14:29:08 -04:00
parent 286c4ab0b4
commit 042e15f109
4 changed files with 45 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -254,7 +254,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
// Use debounce from the underscore library. We're including underscore // Use debounce from the underscore library. We're including underscore
// for the timezone stuff, so might as well take advantage of it. // for the timezone stuff, so might as well take advantage of it.
function adjustSize() { function adjustSize() {
var ww = $(window).width(); var height, ww = $(window).width();
if (ww < 1240) { if (ww < 1240) {
$('#job-summary-container').hide(); $('#job-summary-container').hide();
$('#job-detail-container').css({ "width": "100%", "padding-right": "15px" }); $('#job-detail-container').css({ "width": "100%", "padding-right": "15px" });
@@ -271,6 +271,23 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
}); });
$('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px", "z-index": 0 }).show(); $('#job-summary-container').css({ "width": "41.66666667%", "padding-right": "15px", "z-index": 0 }).show();
} }
// Adjust page height
$('#plays-table-detail').height(150);
$('#plays-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').height(150);
$('#tasks-table-detail').mCustomScrollbar("update");
$('#hosts-table-detail').height(150);
$('#hosts-table-detail').mCustomScrollbar("update");
height = ($('#wrap').height() - $('.site-footer').height()) - $('.main-container').height() - 22;
if (height > 15) {
$('#plays-table-detail').height(150 + (height / 3));
$('#plays-table-detail').mCustomScrollbar("update");
$('#tasks-table-detail').height(150 + (height / 3));
$('#tasks-table-detail').mCustomScrollbar("update");
$('#hosts-table-detail').height(150 + (height / 3));
$('#hosts-table-detail').mCustomScrollbar("update");
}
} }
$(document).ready(function() { $(document).ready(function() {
adjustSize(); adjustSize();
@@ -281,10 +298,11 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
}, 500)); }, 500));
$scope.toggleSummary = function(hide) { $scope.toggleSummary = function(hide) {
var docw, doch, height = $('#job-detail-container').height(); var docw, doch, height = $('#job-detail-container').height(), slide_width;
if (!hide) { if (!hide) {
docw = $(window).width(); docw = $(window).width();
doch = $(window).height(); doch = $(window).height();
slide_width = (docw < 840) ? '100%' : '80%';
$('#summary-button').hide(); $('#summary-button').hide();
$('.overlay').css({ $('.overlay').css({
width: $(document).width(), width: $(document).width(),
@@ -297,9 +315,10 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
$('#job-summary-container').css({ $('#job-summary-container').css({
top: 0, top: 0,
right: 0, right: 0,
width: '75%', width: slide_width,
'z-index': 2000, 'z-index': 2000,
'padding-right': '15px' 'padding-right': '15px',
'padding-left': '15px'
}).show('slide', {'direction': 'right'}); }).show('slide', {'direction': 'right'});
} }
else { else {
@@ -373,7 +392,7 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
scope.hostResults.pop(); scope.hostResults.pop();
} }
}); });
//$('#hosts-table-detail').mCustomScrollbar("update"); $('#hosts-table-detail').mCustomScrollbar("update");
if (data.next) { if (data.next) {
// there are more rows. move dragger down, letting user know. // there are more rows. move dragger down, letting user know.
setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700); setTimeout(function() { $('#hosts-table-detail .mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700);

22
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -695,16 +695,18 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
Rest.get() Rest.get()
.success(function(data) { .success(function(data) {
var i; var i;
for (i = data.results.length - 1; i >=0; i--) { if (data.results.length > 0) {
scope.hostResults.push({ for (i = data.results.length - 1; i >=0; i--) {
id: data.results[i].id, scope.hostResults.push({
status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ), id: data.results[i].id,
host_id: data.results[i].host, status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ),
task_id: data.results[i].parent, host_id: data.results[i].host,
name: data.results[i].summary_fields.host.name, task_id: data.results[i].parent,
created: data.results[i].created, name: data.results[i].event_data.host,
msg: data.results[i].event_data.res.msg created: data.results[i].created,
}); msg: ( (data.results[i].event_data && data.results[i].event_data.res) ? data.results[i].event_data.res.msg : '' )
});
}
} }
Wait('stop'); Wait('stop');
SelectHost({ scope: scope }); SelectHost({ scope: scope });

10
awx/ui/static/less/job-details.less
View File

@@ -180,7 +180,10 @@
background-color: @white; background-color: @white;
.row { .row {
border-top: 1px solid @grey; border-top: 1px solid @grey;
} }
.row:first-child {
border: none;
}
/*.row:nth-child(odd) { /*.row:nth-child(odd) {
background-color: @well; background-color: @well;
padding-top: 0; padding-top: 0;
@@ -189,6 +192,11 @@
.active { .active {
background-color: #EDF2F2; background-color: #EDF2F2;
} }
.loading-info {
padding-top: 5px;
padding-left: 3px;
}
} }
.status-column i { .status-column i {

2
awx/ui/templates/ui/index.html
View File

@@ -359,8 +359,6 @@
<div class="overlay"></div> <div class="overlay"></div>
<div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div> <div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
<div id="push"></div>
</div> </div>
<div class="navbar navbar-inverse site-footer fade-in"> <div class="navbar navbar-inverse site-footer fade-in">