Implements a better modal for an album

webapp/css/satbd.sateliite.bar.css

@@ -57,7 +57,7 @@ body > .container-fluid {
 	overflow:hidden;
 }
 
-.cover-container .cover .rating {
+.over-img-rating {
 	position: absolute;
 	bottom:0px;
 	right:0px;
@@ -67,6 +67,33 @@ body > .container-fluid {
 	padding:5px;
 }
 
+.over-img-ref {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	padding: 5px;
+	text-align: left;
+	color: #000;
+}
+
+.album-modal-cover{
+	position: relative;
+}
+
+.modal-footer .row {
+	position: relative;
+	padding-right: 15px;
+}
+
+.reference{
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	padding-left:15px;
+}
+
+
+
 .album-ellipsis {
 }
 
@@ -81,28 +108,3 @@ body > .container-fluid {
 .album .album-ellipsis p:last-child{
 	margin-bottom: 15px;
 }
-/* @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/html/albumModal.html

@@ -3,8 +3,47 @@
   <h3 class="modal-title" ng-if="album.serieDisplay.length == 0">{{album.titleDisplay}}</h3>
 </div>
 <div class="modal-body">
-  Mais bite quoi
+  <div class="row">
+	<div class="col-xs-3">
+	  <div class="album-modal-cover">
+		<img class="img-responsive img-rounded" alt="Couverture - {{album.titleDisplay}}" ng-src="{{album.CoverURL}}" />
+		<div class="over-img-rating">
+		  <uib-rating  ng-model="album.Note" readonly="true"></uib-rating>
+		</div>
+	  </div>
+	</div>
+	<div class="col-xs-9">
+	  <div class="album-modal-description">
+		<p class="infos">
+		  <span ng-if="album.serieDisplay">Série: {{album.serie || '-'}}, </span>
+		  <span ng-if="album.Num > -1 || album.NumA">Tome: {{album.NumA || album.Num }}, </span>
+		  <span ng-if="album.dessins">Dessins:
+			<a ng-repeat="d in album.dessins" ng-href="{{album.Links[d]}}">{{d}}, </a>
+		  </span>
+		  <span ng-if="album.scenario">Scenario:
+			<a ng-repeat="s in album.scenario" ng-href="{{album.Links[s]}}">{{s}}, </a>
+		  </span>
+		  <span ng-if="album.couleurs">Couleurs:
+			<a ng-repeat="c in album.couleurs" ng-href="{{album.Links[c]}}">{{c}}, </a>
+		  </span>
+		  <span ng-if="album.Note>-1">Note: {{ album.Note }}/5,  </span>
+		  <span ng-if="album.editeur">Éditeur: {{album.editeur}}, </span>
+		  <span ng-if="album.collection">Collection: {{album.collection}}, </span>
+		  <span ng-if="album.ISBN">ISBN: {{album.ISBN}}</span>
+		  <span ng-if="album.PurchaseDate">Date d'acquisition: {{album.PurchaseDate | date:'dd/MM/yyyy' }}</span>
+		</p>
+
+		<hr />
+		<p ng-if="album.description.length > 0">{{album.description}}</p>
+
+		<p ng-if="album.description.length == 0">Album sans description</p>
+	  </div>
+	</div>
+  </div>
 </div>
 <div class="modal-footer">
-  <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
+  <div class="row">
+	<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
+	<h3 class="reference">Réf: {{album.ref}}</h3>
+  </div>
 </div>

webapp/js/directives.js

@@ -42,4 +42,7 @@ directives.controller('AlbumModalInstanceCtrl', function($scope,$uibModalInstanc
 	$scope.ok = function() {
 		$uibModalInstance.close('');
 	};
+	$scope.getLink = function(n) {
+		return $scope.album[n];
+	}
 });

webapp/js/directives/album.html

@@ -1,10 +1,11 @@
 <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">
+      <img class="img-responsive img-rounded" alt="{{album.titleDisplay}}" ng-src="{{album.CoverURL}}"/>
+	  <div class="over-img-rating">
 		<uib-rating  ng-model="album.Note" readonly="true"></uib-rating>
 	  </div>
+	  <div class="over-img-ref">{{album.ref}}</div>
 	</div>
   </div>
   <div class="album-ellipsis">