style(templates): new effect on hover (#268)

* style(templates): new effect on hover

* feat(templates): display a loading message

app/components/templates/templates.html

@@ -77,11 +77,14 @@
       </rd-widget-header>
       <rd-widget-body classes="padding">
         <div class="template-list">
-          <div ng-repeat="tpl in templates" class="container-template hvr-grow" id="template_{{ $index }}" ng-click="selectTemplate($index)">
+          <div ng-repeat="tpl in templates" class="container-template hvr-underline-from-center" id="template_{{ $index }}" ng-click="selectTemplate($index)">
             <img class="logo" ng-src="{{ tpl.logo }}" />
             <div class="title">{{ tpl.title }}</div>
             <div class="description">{{ tpl.description }}</div>
           </div>
+          <div ng-if="!templates" class="text-center text-muted">
+            Loading...
+          </div>
           <div ng-if="templates.length == 0" class="text-center text-muted">
             No templates available.
           </div>

app/components/templates/templatesController.js

@@ -1,13 +1,11 @@
 angular.module('templates', [])
 .controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages',
 function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) {
-  $scope.templates = [];
   $scope.selectedTemplate = null;
   $scope.formValues = {
     network: "",
     name: ""
   };
-  $scope.templates = [];
 
   var selectedItem = -1;
 
@@ -161,6 +159,7 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
     }, function (e) {
       $('#loadTemplatesSpinner').hide();
       Messages.error("Failure", e, "Unable to retrieve apps list");
+      $scope.templates = [];
     });
   }
 

app/directives/widget-custom-header.js

@@ -8,7 +8,7 @@ angular
       icon: '='
     },
     transclude: true,
-    template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="small text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
+    template: '<div class="widget-header"><div class="row"><span class="pull-left"><img class="custom-header-ico" ng-src="{{icon}}"></img> <span class="text-muted"> {{title}} </span> </span><span class="pull-right col-xs-6 col-sm-4" ng-transclude></span></div></div>',
     restrict: 'E'
   };
   return directive;

assets/css/app.css

@@ -217,16 +217,67 @@ input[type="radio"] {
 }
 
 .custom-header-ico {
-  max-width: 16px;
-  max-height: 16px;
+  max-width: 32px;
+  max-height: 32px;
+  margin-right: 2px;
+}
+
+.btn-responsive {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+@media screen and (min-width: 1107px) {
+  .btn-responsive {
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    border-radius: 4px;
+  }
+}
+
+/* Underline From Center */
+.hvr-underline-from-center {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  overflow: hidden;
+}
+.hvr-underline-from-center:before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 50%;
+  right: 50%;
+  bottom: 0;
+  background: #85898b;
+  height: 2px;
+  -webkit-transition-property: left, right;
+  transition-property: left, right;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
+  left: 0;
+  right: 0;
 }
 
 .container-template {
   font-size: 1em;
   width: 256px;
   height: 128px;
-  margin: 10px;
-  padding: 10px;
+  margin: 15px;
+  padding: 5px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -259,20 +310,5 @@ input[type="radio"] {
 .container-template .description {
   text-align: center;
   font-size: 0.8em;
-}
-
-.btn-responsive {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-
-@media screen and (min-width: 1107px) {
-  .btn-responsive {
-    padding: 6px 12px;
-    font-size: 14px;
-    line-height: 1.42857143;
-    border-radius: 4px;
-  }
+  margin-bottom: 5px;
 }

bower.json

@@ -35,7 +35,6 @@
     "bootstrap": "~3.3.6",
     "font-awesome": "~4.6.3",
     "filesize": "~3.3.0",
-    "Hover": "2.0.2",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",

gruntFile.js

@@ -88,8 +88,7 @@ module.exports = function (grunt) {
                 'bower_components/font-awesome/css/font-awesome.min.css',
                 'bower_components/rdash-ui/dist/css/rdash.min.css',
                 'bower_components/angular-ui-select/dist/select.min.css',
-                'bower_components/xterm.js/dist/xterm.css',
-                'bower_components/Hover/css/hover-min.css'
+                'bower_components/xterm.js/dist/xterm.css'
             ]
         },
         clean: {