Ensure long domain names are visible in the app grid

Part of #340

webadmin/src/3rdparty/js/angular-fittext.min.js

@@ -0,0 +1 @@
+!function(t,e,i,n){"use strict";i.module("ngFitText",[]).value("fitTextDefaultConfig",{debounce:!1,delay:250,loadDelay:10,compressor:1,min:0,max:Number.POSITIVE_INFINITY}).directive("fittext",["$timeout","fitTextDefaultConfig","fitTextConfig",function(e,n,o){return{restrict:"A",scope:!0,link:function(f,a,l){function r(){var t=T*h/s.offsetWidth/h;return Math.max(Math.min((c[0].offsetWidth-6)*t*p,parseFloat(y)),parseFloat(m))}function u(){s.offsetHeight*s.offsetWidth!==0&&(d.fontSize=T+"px",d.lineHeight="1",d.display="inline-block",d.fontSize=r()+"px",d.lineHeight=b,d.display=v)}i.extend(n,o.config);var c=a.parent(),s=a[0],d=s.style,x=t.getComputedStyle(a[0],null),h=a.children().length||1,g=l.fittextLoadDelay||n.loadDelay,p=l.fittext||n.compressor,m=("inherit"===l.fittextMin?x["font-size"]:l.fittextMin)||n.min,y=("inherit"===l.fittextMax?x["font-size"]:l.fittextMax)||n.max,b=x["line-height"],v=x.display,T=10;e(function(){u()},g),f.$watch(l.ngBind,function(){u()}),n.debounce?i.element(t).bind("resize",n.debounce(function(){f.$apply(u)},n.delay)):i.element(t).bind("resize",function(){f.$apply(u)})}}}]).provider("fitTextConfig",function(){var t=this;return this.config={},this.$get=function(){var e={};return e.config=t.config,e},this})}(window,document,angular);

webadmin/src/index.html

@@ -40,6 +40,7 @@
     <script src="3rdparty/js/angular-sanitize.min.js"></script>
     <script src="3rdparty/js/angular-slick.min.js"></script>
     <script src="3rdparty/js/angular-ui-notification.min.js"></script>
+    <script src="3rdparty/js/angular-fittext.min.js"></script>
     <script src="3rdparty/js/autofill-event.js"></script>
 
     <!-- Angular directives for tldjs -->

webadmin/src/js/index.js

@@ -9,7 +9,7 @@ if (search.accessToken) localStorage.token = search.accessToken;
 
 
 // create main application module
-var app = angular.module('Application', ['ngRoute', 'ngAnimate', 'ngSanitize', 'angular-md5', 'base64', 'slick', 'ui-notification', 'ui.bootstrap', 'ui.bootstrap-slider', 'ngTld']);
+var app = angular.module('Application', ['ngFitText', 'ngRoute', 'ngAnimate', 'ngSanitize', 'angular-md5', 'base64', 'slick', 'ui-notification', 'ui.bootstrap', 'ui.bootstrap-slider', 'ngTld']);
 
 app.config(['NotificationProvider', function (NotificationProvider) {
     NotificationProvider.setOptions({
@@ -467,3 +467,12 @@ app.directive('tagInput', function () {
             '</div>'
     };
 });
+
+app.config(['fitTextConfigProvider', function (fitTextConfigProvider) {
+  fitTextConfigProvider.config = {
+    loadDelay: 100,
+    compressor: 1,
+    min: 8,
+    max: 24
+  };
+}]);

webadmin/src/views/apps.html

@@ -389,7 +389,7 @@
                         <br/>
                         <div class="row">
                             <div class="col-xs-12 text-center">
-                                <div class="grid-item-top-title">{{ app.altDomain || app.location || app.fqdn }}</div>
+                                <div class="grid-item-top-title" data-fittext>{{ app.altDomain || app.location || app.fqdn }}</div>
                                 <div class="text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
                                     {{ app | installationStateLabel }}
                                 </div>