1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-30 13:55:31 +03:00

Fix issue with graph modules causing vertical scroll

This commit is contained in:
Joe Fiorini 2015-01-28 12:06:10 -05:00
parent 5ab6ed91fa
commit f2dbf7a559
5 changed files with 37 additions and 9 deletions

View File

@ -86,17 +86,14 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
"margin-bottom": "15px"};
$('.graph-container').css(borderStyles);
var winHeight = $(window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container').height(available_height/2);
// // chart.update();
DashboardCounts({
scope: $scope,
target: 'dash-counts',
dashboard: data
});
// // chart.update();
$scope.graphData = graphData;
if ($rootScope.user_is_superuser !== true) {

View File

@ -0,0 +1,31 @@
angular.module('DashboardGraphs')
.directive('autoSizeModule', ['$window', function($window) {
// Adjusts the size of the module so that all modules
// fit into a single a page; assumes there are 2 rows
// of modules, with the available height being offset
// by the navbar & the count summaries module
return function(scope, element, attr) {
function adjustSize() {
var winHeight = $($window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
element.height(available_height/2);
}
$($window).resize(adjustSize);
element.on('$destroy', function() {
$($window).off('resize', adjustSize);
});
// This makes sure count-container div is loaded
// by controllers/Home.js before we use it
// to determine the available window height
scope.$on('dashboardReady', function() {
adjustSize();
});
};
}]);

View File

@ -14,7 +14,6 @@ angular.module('DashboardGraphs').
var width = parseInt(graph.style('width')) - margins.left - margins.right;
var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
chartModel.xRange([0, width]);
chartModel.yRange([height, 0]);

View File

@ -13,12 +13,12 @@
</div>
<div class="row">
<div class="left-side col-sm-6 col-xs-12">
<div id="dash-job-status-graph" class="graph-container">
<div id="dash-job-status-graph" auto-size-module class="graph-container">
<job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph>
</div>
</div>
<div class="right-side col-sm-6 col-xs-12">
<div id="dash-host-status-graph" class="graph-container">
<div id="dash-host-status-graph" auto-size-module class="graph-container">
<host-status-graph data="dashboardData"></host-status-graph>
</div>
</div>
@ -26,7 +26,7 @@
<div class="row">
<div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>
<div class="right-side col-sm-6 col-xs-12">
<div id="dash-host-count-graph" class="graph-container">
<div id="dash-host-count-graph" auto-size-module class="graph-container">
<host-count-graph data="graphData.hostCounts"></host-count-graph>
</div>
</div>

View File

@ -86,6 +86,7 @@
<script src="{{ STATIC_URL }}js/services/job-status-graph-data.js"></script>
<script src="{{ STATIC_URL }}js/directives/dashboard-graphs.js"></script>
<script src="{{ STATIC_URL }}js/services/adjust-graph-size.js"></script>
<script src="{{ STATIC_URL }}js/directives/auto-size-module.js"></script>
<script src="{{ STATIC_URL }}js/directives/job-status-graph.js"></script>
<script src="{{ STATIC_URL }}js/directives/host-status-graph.js"></script>
<script src="{{ STATIC_URL }}js/directives/host-count-graph.js"></script>