Reimplements the recents feature

webapp/css/satbd.sateliite.bar.css

@@ -31,37 +31,54 @@ body > .container-fluid {
 	}
 }
 
-.album {
-    padding-top:15px;
-    padding-bottom:15px;
-    overflow:hidden;
+.album-container {
+	display: inline-block;
+	position: relative;
+	overflow:hidden;
 }
 
-@media (max-width: 767px) {
-    .album {
-        height: 70vw;
-    }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-    .album {
-        height: 46vw;
-    }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-    .album {
-        height: 35vw;
-    }
+.album-container:after {
+	padding-top:130%;
+	display: block;
+	content: '';
 }
 
-@media (min-width: 1200px)  {
-    .album {
-        height: 23vw;
-    }
+.album-container .album {
+	position: absolute;
+	top: 15px;
+	bottom: 0;
+	right: 0;
+	left: 15px;
+	overflow:hidden;
 }
 
-img.cover {
-    width:100%;
+.album-container .album .img-album-cover {
+
 }
 
 
+/* @media (max-width: 767px) { */
+/*     .album { */
+/*         height: 50vw; */
+/*     } */
+/* } */
+/* @media (min-width: 768px) and (max-width: 991px) { */
+/*     .album { */
+/*         height: 33vw; */
+/*     } */
+/* } */
+/* @media (min-width: 992px) and (max-width: 1199px) { */
+/*     .album { */
+/*         height: 25vw; */
+/*     } */
+/* } */
 
+/* @media (min-width: 1200px)  { */
+/*     .album { */
+/*         height: 16vw; */
+/*     } */
+/* } */
+
+/* img.cover { */
+/*     width:100%; */
+/* } */

webapp/directives.js

@@ -1,20 +0,0 @@
-var directives = angular.module('satbd.satellite.bar.directives')
-
-directives.directive('album', function() {
-	return {
-		scope: {
-			id: '@album-id'
-		}
-		templateUrl: 'js/directives/album.html',
-		restrict: 'E',
-	};
-});
-
-directives.controller('albumCtrl', function($scope,$html) {
-	$scope.init = function() {
-		$http.get('/api/albums/'+ $scope.id)
-			.success(function(data) {
-				$scope.album = data;
-			});
-	};
-});

webapp/js/directives.js

@@ -0,0 +1,22 @@
+var directives = angular.module('satbd.satellite.bar.directives',[])
+
+directives.directive('album', function() {
+	return {
+		scope: {
+			id: '=albumId'
+		},
+		templateUrl: 'js/directives/album.html',
+		restrict: 'A',
+		controller: 'AlbumCtrl'
+	};
+});
+
+directives.controller('AlbumCtrl', function($scope,$http,$log,albumService) {
+	albumService.get($scope.id)
+		.then(function(data) {
+			$scope.album = data;
+			$log.info('Got : ' + data.ID);
+		}, function(err) {
+			$log.error('Got error :' + err);
+		});
+});

webapp/js/directives/album.html

@@ -0,0 +1,3 @@
+<div class="album">
+  <img class="img-responsive img-album-cover" alt="{{album.titre}}" ng-src="{{album.CoverURL}}"/>
+</div>

webapp/js/satbd.satellite.bar.js

@@ -3,6 +3,8 @@
 angular.module('satbd.satellite.bar',[
 	'ngRoute',
 	'satbd.satellite.bar.controllers',
+	'satbd.satellite.bar.directives',
+	'satbd.satellite.bar.services',
 	'satbd.satellite.bar.views.recents',
 	'satbd.satellite.bar.views.series',
 	'satbd.satellite.bar.views.authors',

webapp/js/services.js

@@ -0,0 +1,20 @@
+var services = angular.module('satbd.satellite.bar.services',[])
+
+services.factory('albumService',['$http','$log','$q', function($http,$log,$q) {
+	function get(id) {
+		return $http.get('/api/albums/'+ id).then(function (response) {
+			return response.data;
+		});
+	}
+
+	function search(terms) {
+		var defer = $q.defer();
+		defer.reject('Search is not implemented');
+		return defer.promise;
+	}
+
+	return {
+		get: get,
+		search: search
+	};
+}]);

webapp/js/views/recents/recents.html

@@ -1 +1,3 @@
 <h1> Albums Récents </h1>
+
+<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album-container" album ng-repeat="id in albumIDs" album-id="id"></div>