Adds a responsive-ratio directive

To fix the ratio of any element

webapp/js/directives/responsive-ratio.html

@@ -0,0 +1,5 @@
+<div style="position:relative;padding-bottom:{{paddingRatio()}}%;">
+  <div style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;">
+    <ng-transclude></ng-transclude>
+  </div>
+</div>

webapp/js/directives/responsive-ratio.js

@@ -0,0 +1,22 @@
+var responsiveRatio = angular.module('satbd.satellite.bar.directives.responsive-ratio',[]);
+
+
+responsiveRatio.directive('responsiveRatio', function() {
+    return {
+        scope: {
+            responsiveRatio: '<responsiveRatio'
+        },
+        templateUrl: 'js/directives/responsive-ratio.html',
+        restrict: 'A',
+        transclude:  true,
+        controller: 'ResponsiveRatioCtrl'
+    };
+});
+
+
+responsiveRatio.controller('ResponsiveRatioCtrl', function($scope) {
+    $scope.responsiveRatio = 1;
+    $scope.paddingRatio = function() {
+        return 1 / $scope.responsiveRatio * 100;
+    };
+});

webapp/js/views/series/series.js

@@ -1,7 +1,8 @@
 'use strict';
 
 angular.module('satbd.satellite.bar.views.series',[
-	'ngRoute'
+	'ngRoute',
+    'satbd.satellite.bar.directives.responsive-ratio'
 ]).config(function($routeProvider) {
 	$routeProvider.when('/series', {
 		templateUrl: 'js/views/series/series.html'