From 4c5207461a746cc23a012acfb646a6ad0717ad9b Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Fri, 12 Feb 2016 15:45:35 +0100
Subject: [PATCH] Adds a basic modal for <album> directive

---
 webapp/css/satbd.sateliite.bar.css   | 27 +++++++++++++++++++++++++++
 webapp/html/albumModal.html          | 10 ++++++++++
 webapp/js/directives.js              | 28 ++++++++++++++++++++++++++--
 webapp/js/directives/album.html      | 19 +++++++++++++------
 webapp/js/views/recents/recents.html |  4 ++--
 5 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 webapp/html/albumModal.html

diff --git a/webapp/css/satbd.sateliite.bar.css b/webapp/css/satbd.sateliite.bar.css
index b32e0ef..7a19422 100644
--- a/webapp/css/satbd.sateliite.bar.css
+++ b/webapp/css/satbd.sateliite.bar.css
@@ -31,6 +31,10 @@ body > .container-fluid {
 	}
 }
 
+.album a {
+	color: #333;
+}
+
 .cover-container {
     width:100%;
 	display: inline-block;
@@ -53,7 +57,30 @@ body > .container-fluid {
 	overflow:hidden;
 }
 
+.cover-container .cover .rating {
+	position: absolute;
+	bottom:0px;
+	right:0px;
+	width:100%;
+	background-color: rgba(255,255,255,0.4);
+	text-align:right;
+	padding:5px;
+}
 
+.album-ellipsis {
+}
+
+.album .album-ellipsis p{
+	width:100%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow:ellipsis;
+	margin-bottom: 0px;
+}
+
+.album .album-ellipsis p:last-child{
+	margin-bottom: 15px;
+}
 /* @media (max-width: 767px) { */
 /*     .album { */
 /*         height: 50vw; */
diff --git a/webapp/html/albumModal.html b/webapp/html/albumModal.html
new file mode 100644
index 0000000..48fc14a
--- /dev/null
+++ b/webapp/html/albumModal.html
@@ -0,0 +1,10 @@
+<div class="modal-header">
+  <h3 class="modal-title" ng-if="album.serieDisplay.length > 0">{{album.serieDisplay}}: {{album.titleDisplay}}</h3>
+  <h3 class="modal-title" ng-if="album.serieDisplay.length == 0">{{album.titleDisplay}}</h3>
+</div>
+<div class="modal-body">
+  Mais bite quoi
+</div>
+<div class="modal-footer">
+  <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
+</div>
diff --git a/webapp/js/directives.js b/webapp/js/directives.js
index 3f18b3f..8269324 100644
--- a/webapp/js/directives.js
+++ b/webapp/js/directives.js
@@ -1,4 +1,7 @@
-var directives = angular.module('satbd.satellite.bar.directives',[])
+var directives = angular.module('satbd.satellite.bar.directives',[
+	'ui.bootstrap',
+	'ngAnimate'
+])
 
 directives.directive('album', function() {
 	return {
@@ -11,11 +14,32 @@ directives.directive('album', function() {
 	};
 });
 
-directives.controller('AlbumCtrl', function($scope,$http,$log,albumService) {
+directives.controller('AlbumCtrl', function($scope,$http,$log,$uibModal,albumService) {
+	$scope.album = { Note:-1};
 	albumService.get($scope.id)
 		.then(function(data) {
 			$scope.album = data;
 		}, function(err) {
 			$log.error('Could not fetch album' + $scope.id +  ' :' + err);
 		});
+	$scope.openAlbumModal = function() {
+		var albumModalInstance = $uibModal.open({
+			templateUrl: 'html/albumModal.html',
+			controller: 'AlbumModalInstanceCtrl',
+			size: 'lg',
+			keyboard: true,
+			resolve: {
+				album: function() {
+					return $scope.album;
+				}
+			}
+		});
+	};
+});
+
+directives.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstance,album) {
+	$scope.album = album;
+	$scope.ok = function() {
+		$uibModalInstance.close('');
+	};
 });
diff --git a/webapp/js/directives/album.html b/webapp/js/directives/album.html
index b5e15f1..85ecbb2 100644
--- a/webapp/js/directives/album.html
+++ b/webapp/js/directives/album.html
@@ -1,7 +1,14 @@
-<div class="cover-container">
-  <div class="cover">
-    <img class="img-responsive img-album-cover" alt="{{album.titre}}" ng-src="{{album.CoverURL}}"/>
+<a href="" ng-click="openAlbumModal()">
+  <div class="cover-container">
+	<div class="cover">
+      <img class="img-responsive img-rounded" alt="{{album.titre}}" ng-src="{{album.CoverURL}}"/>
+	  <div class="rating">
+		<uib-rating  ng-model="album.Note" readonly="true"></uib-rating>
+	  </div>
+	</div>
   </div>
-</div>
-<p>{{album.serie}}</p>
-  
+  <div class="album-ellipsis">
+	<p>{{album.serieDisplay || '-'}}</p>
+	<p>{{album.titleDisplay}}</p>
+  </div>
+</a>
diff --git a/webapp/js/views/recents/recents.html b/webapp/js/views/recents/recents.html
index eb185eb..042509b 100644
--- a/webapp/js/views/recents/recents.html
+++ b/webapp/js/views/recents/recents.html
@@ -1,5 +1,5 @@
 <h1> Albums Récents </h1>
 
-<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" ng-repeat="id in albumIDs">
-  <album album-id="id"></album>
+<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 album" ng-repeat="id in albumIDs">
+  <album album-id="id"> </album>
 </div>