Hotfix: #103 for missed thumbnail upgrades

jaedb · Jul 3, 2016 · c09156f · c09156f
1 parent 431fcb7
commit c09156f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 61 deletions.
diff --git a/src/app/browse/album/controller.js b/src/app/browse/album/controller.js
@@ -130,7 +130,7 @@ angular.module('spotmop.browse.album', [])
 
 				$scope.album = response;
 				$scope.album.totalTracks = response.tracks.total;
-                $scope.album.images = $filter('sizedImages')(response.images);
+                $scope.album.images = response.images;
 				$scope.tracklist = response.tracks;
 				$scope.tracklist.type = 'track';
 				$scope.tracklist.tracks = response.tracks.items;

diff --git a/src/app/browse/album/template.html b/src/app/browse/album/template.html
@@ -3,24 +3,21 @@
 	<span class="menu-reveal-trigger" ng-click="showMenu()"><i class="fa fa-bars"></i></span>
 
 	<div class="asset-sidebar">
-
-        <div
-            class="thumbnail-wrapper album slim-intro-wrapper" 
-            draggable="false"
-            candrag
-            dragobj="album">
+
+		<div class="thumbnail-wrapper slim-intro-wrapper">
 
-                <div class="thumbnail album" ng-if="album.images.medium" style="background-image: url({{ album.images.medium }});"></div>
-
-                <div class="thumbnail album placeholder" ng-if="!album.images || !album.images.medium "></div>
+            <div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="album">
+                <thumbnail size="medium" images="album.images"></thumbnail>
+            </div>
 
-				<div class="slim-intro mobile-show" ng-if="mediumScreen()">
-                    <thumbnail size="medium" images="album.images"></thumbnail>				
-					<h1 ng-bind="album.name"></h1>
+			<div class="slim-intro mobile-show" ng-if="mediumScreen()">
+                <thumbnail size="medium" images="album.images"></thumbnail>			
+				<h1 ng-bind="album.name"></h1>
 					<h2 class="description">
 						<artistlist artists="album.artists" sentence></artistlist>
 					</h2>	
-				</div>
+			</div>
+
 		</div>
 
         <div class="clear-left"><!-- clear --></div>

diff --git a/src/app/browse/playlist/template.html b/src/app/browse/playlist/template.html
@@ -5,19 +5,13 @@
 	<div class="asset-sidebar">
 
 		<div class="thumbnail-wrapper slim-intro-wrapper">
-
-			<div class="thumbnail playlist"
-				ng-if="playlist.images.length > 0"
-				ng-repeat="image in playlist.images | limitTo:1"
-				style="background-image: url({{ image.url }});"
-				draggable="false"
-				candrag
-				dragobj="playlist"
-				></div>
-			<div class="thumbnail playlist placeholder" ng-if=" !playlist.images || playlist.images.length <= 0"></div>
+
+            <div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="playlist">
+                <thumbnail size="medium" images="playlist.images"></thumbnail>
+            </div>
 
 			<div class="slim-intro mobile-show" ng-if="mediumScreen()">
-                <thumbnail ng-if="playlist.images" size="medium" images="playlist.images"></thumbnail>			
+                <thumbnail size="medium" images="playlist.images"></thumbnail>			
 				<h1 ng-bind="playlist.name"></h1>
 				<h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.description">Loading</h2>	
 			</div>
@@ -82,7 +76,7 @@ <h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.de
 			</div>
 			<div class="info-item">
 				<a class="playlist-owner" ui-sref="browse.user({ uri: playlist.owner.uri })">
-                    <span class="thumbnail animate" ng-repeat="image in playlist.owner.images | limitTo: 1 : playlist.owner.images.length-1" style="background-image: url('{{ image.url }}');"><span class="border animate"></span></span>
+                    <thumbnail size="small" images="playlist.owner.images"></thumbnail>	
                     <span class="name" ng-bind="playlist.owner.display_name"></span>
                 </a>
 			</div>

diff --git a/src/app/common/directives.js b/src/app/common/directives.js
@@ -530,7 +530,7 @@ angular.module('spotmop.directives', [])
 			}
 
 		},
-		template: '<div class="image animate"></div>'
+		template: '<div class="thumbnail-image image animate"></div>'
 	};
 })
 

diff --git a/src/assets/css/core.css b/src/assets/css/core.css
@@ -1146,13 +1146,9 @@ h1 .flag {
 	width: 50px;
 	height: 50px;
 	border-radius: 100px;
+	padding: 0;
 	float: left;
 	margin-right: 14px;
-	background-image: url('../svg/no-image.svg');
-	background-color: #E9E9E9;
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-	background-size: cover;
 	border: 2px solid #f5f5f5;
 }
 
@@ -1519,6 +1515,23 @@ body.dragging .tracklist .track.dropping {
 		width: 40%;
 	}
 }
+
+
+/**
+ * Thumbnail images
+ * Just the default settings, which will be manipulated on a contextual basis
+ **/
+
+.thumbnail-image.image {
+	width: 100%;
+	padding-bottom: 100%;
+	margin: 0;
+	background-image: url('../svg/no-image.svg');
+	background-color: #E9E9E9;
+	background-position: 50% 50%;
+	background-size: cover;
+}
+
 
 
 /**
@@ -1776,15 +1789,11 @@ slider .item-container > .square-panel {
 	padding: 40px 20px 40px 20px;
 }
 
-.playlist-page .playlist.thumbnail,
-.album-page .album.thumbnail {
+.playlist-page .thumbnail-wrapper .image,
+.album-page .thumbnail-wrapper .image {
 	width: 100%;
 	padding-bottom: 100%;
 	margin: 0;
-	background-image: url('../svg/no-image.svg');
-	background-color: #E9E9E9;
-	background-position: 50% 50%;
-	background-size: cover;
 }
 
 .playlist-page h1,
@@ -1827,8 +1836,6 @@ slider .item-container > .square-panel {
 	border: 0 !important;
 }
 
-.playlist-owner:hover .thumbnail .border {		border-color: #08d58f; }
-
 .playlist-owner .name {
     display: block;
     font-size: 15px;
@@ -1837,7 +1844,19 @@ slider .item-container > .square-panel {
     padding-top: 5px;
 }
 
-.playlist-owner .thumbnail .border {
+.playlist-owner .image {
+	border-radius: 60px;
+	display: block;
+	float: left;
+	height: 30px;
+	margin-right: 8px;
+	width: 30px;
+	padding: 0;
+	position: relative;
+}
+
+.playlist-owner .image::after {
+    content: '';
 	display: block;
 	position: absolute;
 	top: -1px;
@@ -1849,19 +1868,8 @@ slider .item-container > .square-panel {
 	z-index: 2;
 }
 
-.playlist-owner .thumbnail {
-	background-color: #e9e9e9;
-	background-image: url("../svg/no-image.svg");
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	background-size: cover;
-	border-radius: 60px;
-	display: block;
-	float: left;
-	height: 30px;
-	margin-right: 8px;
-	width: 30px;
-	position: relative;
+.playlist-owner:hover .image::after {
+	border-color: #08d58f;
 }
 
 
@@ -1936,10 +1944,7 @@ slider .item-container > .square-panel {
 .artist-page .info-panel .thumbnail-wrapper .image {
 	width: 250px;
 	height: 250px;
-	background-image: url('../svg/no-image.svg');
-	background-color: #E9E9E9;
-	background-size: cover;
-	background-position: 50% 50%;
+	padding: 0;
 	position: absolute;
 	bottom: 0;
 	left: 0;

diff --git a/src/assets/css/responsive.css b/src/assets/css/responsive.css
@@ -454,7 +454,7 @@
 		position: relative;
 	}
 
-	.thumbnail-wrapper.slim-intro-wrapper > .thumbnail {
+	.thumbnail-wrapper.slim-intro-wrapper .primary-thumbnail > .image {
 		opacity: 0.25;
 		padding-bottom: 0;
 		width: auto;
@@ -476,7 +476,7 @@
 		padding: 60px 20px 40px;
 	}
 
-	.thumbnail-wrapper.slim-intro-wrapper .slim-intro .thumbnail {
+	.thumbnail-wrapper.slim-intro-wrapper .slim-intro .image {
 		display: block;
 		width: 180px;
 		height: 180px;
@@ -506,7 +506,7 @@
         margin-top: -20px;
 	}
 
-	.artist-page .info-panel .thumbnail {
+	.artist-page .info-panel .image {
 		display: none;
 	}