Corrected how the initial base font size is calculated to address the…

… issue with "culprits" becoming unreadable on certain screen resolutions. Further tweaks may be required so feedback is welcome! Closes #190
jenkinsci · Jan 11, 2016 · bc36050 · bc36050
1 parent d665766
commit bc36050
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/main/webapp/less/module/widget/basic.less b/src/main/webapp/less/module/widget/basic.less
@@ -9,11 +9,11 @@
 
     & {
       header h2 {
-        font-size: 4em;
+        font-size: 2.5em;
       }
 
       .slots .slot {
-        font-size:     2em;
+        font-size:     1.5em;
         font-weight:   bold;
 
         text-overflow: ellipsis;
@@ -67,7 +67,7 @@
 
       header {
         position: relative;   // so that the stacking order works correctly: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
-        margin:   8px;
+        margin:   8px 8px 0 8px;
         overflow: hidden;
 
         ul.details {

diff --git a/src/main/webapp/scripts/controllers.js b/src/main/webapp/scripts/controllers.js
@@ -3,8 +3,8 @@
 angular.
     module('buildMonitor.controllers', [ 'buildMonitor.services', 'buildMonitor.cron', 'uiSlider', 'jenkins', 'buildMonitor.stats']).
 
-    controller('JobViews', ['$scope', '$rootScope', 'proxy', 'every', 'connectivityStrategist',
-        function ($scope, $rootScope, proxy, every, connectivityStrategist) {
+    controller('JobViews', ['$scope', '$rootScope', '$window', 'proxy', 'every', 'connectivityStrategist',
+        function ($scope, $rootScope, $window, proxy, every, connectivityStrategist) {
             var tryToRecover  = connectivityStrategist.decideOnStrategy,
                 fetchJobViews = proxy.buildMonitor.fetchJobViews;
 
@@ -29,12 +29,14 @@ angular.
                 $scope.fontSize = fontSizeFor($scope.jobs);
             });
 
+            // todo: extract into a 'widget' directive; this shouldn't be a responsibility of a controller to calculate the size of the font...
             function fontSizeFor(itemsOnScreen) {
-                var initialFontSize = 24,
-                    minFontSize     = 3,
-                    numberOfRows    = Math.ceil((itemsOnScreen && itemsOnScreen.size() || 1) / ($rootScope.settings.numberOfColumns || 1));
+                var numberOfRows       = Math.ceil((itemsOnScreen && itemsOnScreen.size() || 1) / ($rootScope.settings.numberOfColumns || 1)),
+                    approxWidgetHeight = ($window.innerHeight - (58 + 26)) / numberOfRows,  // todo: calculate this properly when the widgets are extracted as directives
+                    baseFontSize       = approxWidgetHeight / 10,
+                    minFontSize        = 10;
 
-                return Math.max(initialFontSize / numberOfRows, minFontSize);
+                return Math.max(baseFontSize, minFontSize);
             }
         }]).