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

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

View File

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

View File

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

View File

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

View File

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