External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 12:20:45 -03:30
Code Issues Packages Projects Releases Wiki Activity

Minimum page sizes

Browse Source 
Set minimum page sizing heights and row counts on inventory detail and jobs. On both pages we calculate container heights and page row counts based on the viewport width and height.
This commit is contained in:
Chris Houseknecht 2014-07-31 12:24:00 -04:00
parent 4c621aeae7
commit 21bd8d63e3
3 changed files with 43 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/js/controllers/Jobs.js
View File

@ -216,6 +216,7 @@ function JobsListController ($rootScope, $log, $scope, $compile, $routeParams, C
if (docw > 1200) {
// customize the container height and # of rows based on available viewport height
available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - 80;
available_height = (available_height < 550) ? 550 : available_height;
$log.debug('available_height: ' + available_height);
$('.jobs-list-container').each(function() {
$(this).height(Math.floor(available_height / 2));
@ -226,6 +227,7 @@ function JobsListController ($rootScope, $log, $scope, $compile, $routeParams, C
height = Math.floor(available_height / 2) - header - page_row - search_row - 30;
row_height = (docw < 1350) ? 47 : 27;
max_rows = Math.floor(height / row_height);
max_rows = (max_rows < 5) ? 5 : max_rows;
}
else {
// when width < 1240px || height < 800px put things back to their default state

1
awx/ui/static/js/helpers/PaginationHelpers.js
View File

@ -145,6 +145,7 @@ angular.module('PaginationHelpers', ['Utilities', 'RefreshHelper', 'RefreshRelat
scope.changePageSize = function (set, iterator) {
// Called whenever a new page size is selected
console.log('change pageSize for ' + iterator + ' to ' + scope[iterator + '_page_size']);
scope[iterator + '_page'] = 1;
var new_url = scope[iterator + '_url'].replace(/\?page_size\=\d+/, ''),
connect = (/\/$/.test(new_url)) ? '?' : '&';

78
awx/ui/static/js/helpers/inventory.js
View File

@ -30,23 +30,31 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
$('.site-footer').outerHeight() - $('.group-breadcrumbs').outerHeight() - $('#groups-container #search-widget-container').outerHeight() -
$('#groups_table thead').height() ));
*/
return $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#breadcrumbs').outerHeight() -
var height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - $('#breadcrumbs').outerHeight() -
$('.site-footer').outerHeight() - $('.group-breadcrumbs').outerHeight() - $('#groups-container #search-widget-container').outerHeight() -
$('#groups_table thead').height() - 90;
height = (height < 600) ? 600 : height;
return height;
};
}])
.factory('GetHostContainerRows', [ function() {
return function() {
var height = $('#hosts-container .list-well').height() - $('#hosts-constainer .list-well .row').height() - $('#hosts_table thead').height();
return Math.floor(height / 30) - 2;
var height, rows;
height = $('#hosts-container .list-well').height() - $('#hosts-constainer .list-well .row').height() - $('#hosts_table thead').height();
rows = Math.floor(height / 30) - 2;
rows = (rows < 20) ? 20 : rows;
return rows;
};
}])
.factory('GetGroupContainerRows', [ function() {
return function() {
var height = $('#groups-container .list-table-container').height();
return Math.floor(height / 31) - 2;
var height, rows;
height = $('#groups-container .list-table-container').height();
rows = Math.floor(height / 31) - 2;
rows = (rows < 20) ? 20 : rows;
return rows;
};
}])
@ -54,35 +62,38 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
return function(params) {
var group_scope = params.group_scope,
host_scope = params.host_scope,
reloadHosts = (params && params.reloadHosts) ? true : false,
reloadHosts = (params.reloadHosts) ? true : false,
height, rows;
if ($(window).width() > 1210) {
height = GetGroupContainerHeight();
$('#groups-container .list-table-container').height(height);
$('#hosts-container .list-table-container').height(height);
setTimeout(function() { $('#hosts-container .list-well').height( $('#groups-container .list-well').outerHeight()); }, 500);
}
else {
$('#groups-container .list-table-container').height('auto');
$('#hosts-container .list-well').height('auto');
}
//$('#groups-container .list-table-container').mCustomScrollbar("update");
if (reloadHosts) {
// we need ro recalc the the page size
$('#groups-container .list-table-container').height('auto');
$('#hosts-container .list-well').height('auto');
$('#hosts-container .list-table-container').height('auto');
setTimeout(function() {
if ($(window).width() > 1210) {
rows = GetHostContainerRows();
host_scope.host_page_size = rows;
group_scope.group_page_size = rows;
height = GetGroupContainerHeight();
$('#groups-container .list-table-container').height(height);
$('#hosts-container .list-table-container').height(height);
setTimeout(function() { $('#hosts-container .list-well').height( $('#groups-container .list-well').outerHeight()); }, 500);
}
else {
// on small screens we go back to the default
host_scope.host_page_size = 20;
group_scope.group_page_size = 20;
if (reloadHosts) {
// we need ro recalc the the page size
if ($(window).width() > 1210) {
rows = GetHostContainerRows();
host_scope.host_page_size = rows;
group_scope.group_page_size = rows;
}
else {
// on small screens we go back to the default
host_scope.host_page_size = 20;
group_scope.group_page_size = 20;
}
host_scope.changePageSize('hosts', 'host');
group_scope.changePageSize('groups', 'group');
}
host_scope.changePageSize('hosts', 'host');
group_scope.changePageSize('groups', 'group');
}
}, 100);
};
}])
@ -95,15 +106,6 @@ angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationLis
host_scope = params.host_scope;
$(window).off("resize");
$(window).resize(_.debounce(function() {
// Hack to stop group-name div slipping to a new line
//$('#groups_table .name-column').each(function () {
// var td_width = $(this).width(),
// level_width = $(this).find('.level').width(),
// level_padding = parseInt($(this).find('.level').css('padding-left').replace(/px/, '')),
// level = level_width + level_padding,
// pct = (100 - Math.ceil((level / td_width) * 100)) + '%';
// $(this).find('.group-name').css({ width: pct });
//});
ApplyEllipsis('#groups_table .group-name a');
ApplyEllipsis('#hosts_table .host-name a');
SetContainerHeights({