From 21bd8d63e3bb4b8f9babf0d5db9a28c2e569a354 Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Thu, 31 Jul 2014 12:24:00 -0400 Subject: [PATCH] Minimum page sizes 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. --- awx/ui/static/js/controllers/Jobs.js | 2 + awx/ui/static/js/helpers/PaginationHelpers.js | 1 + awx/ui/static/js/helpers/inventory.js | 78 ++++++++++--------- 3 files changed, 43 insertions(+), 38 deletions(-) diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js index 17228ca14b..7021f86cc4 100644 --- a/awx/ui/static/js/controllers/Jobs.js +++ b/awx/ui/static/js/controllers/Jobs.js @@ -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 diff --git a/awx/ui/static/js/helpers/PaginationHelpers.js b/awx/ui/static/js/helpers/PaginationHelpers.js index 3fe76daee9..14219b0c98 100644 --- a/awx/ui/static/js/helpers/PaginationHelpers.js +++ b/awx/ui/static/js/helpers/PaginationHelpers.js @@ -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)) ? '?' : '&'; diff --git a/awx/ui/static/js/helpers/inventory.js b/awx/ui/static/js/helpers/inventory.js index 0c6b0ec5be..f996e60afe 100644 --- a/awx/ui/static/js/helpers/inventory.js +++ b/awx/ui/static/js/helpers/inventory.js @@ -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({