style album directive when in sidebar search

thisissoon · Jul 27, 2015 · b9f2706 · b9f2706
1 parent 4e35085
commit b9f2706
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 13 deletions.
diff --git a/app/less/default/modules/albums.less b/app/less/default/modules/albums.less
@@ -0,0 +1,41 @@
+//
+// Albums
+// --------------------------------------------------
+
+.album {
+
+    .text-artists {
+        display: none;
+    }
+
+    .sidebar & {
+        .clearfix();
+        height: 62px;
+
+        .img,
+        .caption {
+            display: inline-block;
+            float: left;
+        }
+
+        .img {
+            .square(62px);
+        }
+
+        .caption {
+            height: 100%;
+            width: 203px;
+
+            .h5 {
+                font-family: @font-family-base;
+                line-height: 1.4;
+                margin-bottom: 5px;
+                margin-top: 0;
+            }
+
+            .text-artists {
+                display: block;
+            }
+        }
+    }
+}
diff --git a/app/less/main.less b/app/less/main.less
@@ -70,6 +70,7 @@
 @import "default/modules/stats.less";
 @import "default/modules/media.less";
 @import "default/modules/artists.less";
+@import "default/modules/albums.less";
 
 
 // Import less files for large screen devices here
@@ -106,4 +107,5 @@
     @import "mobile/modules/stats.less";
     @import "mobile/modules/media.less";
     @import "mobile/modules/artists.less";
+    @import "mobile/modules/albums.less";
 }
diff --git a/app/less/mobile/modules/albums.less b/app/less/mobile/modules/albums.less
@@ -0,0 +1,12 @@
+//
+// Albums
+// --------------------------------------------------
+
+.album {
+    .sidebar & {
+        .caption {
+            width: 160px;
+            line-height: 1.4;
+        }
+    }
+}
diff --git a/app/partials/search-result.html b/app/partials/search-result.html
@@ -17,19 +17,7 @@
 </a>
 
 <!-- album -->
-<a class="media" ng-if="match.label.uri.indexOf('spotify:album') === 0" href="albums/{{ match.label.id }}" title="{{ match.label.name }}">
-    <div class="media-left">
-        <img ng-src="{{ match.label.images[1].url || 'img/icons/artist.svg' }}" alt="{{ match.label.name }}" class="media-object" width="62">
-    </div>
-    <div class="media-body media-middle">
-        <p class="media-heading text-overflow">{{ match.label.name }}</p>
-        <p class="text-muted text-overflow">
-            <span class="text-muted" ng-repeat-start="artist in match.label.artists">
-                {{ artist.name }}
-            </span><span ng-repeat-end ng-if="!$last">, </span>
-        </p>
-    </div>
-</a>
+<fm-album ng-if="match.label.uri.indexOf('spotify:album') === 0" data-album="match.label"></fm-album>
 
 
 <!-- artist -->

diff --git a/app/partials/search/album.html b/app/partials/search/album.html
@@ -11,5 +11,10 @@
     </div>
     <div class="caption">
         <h3 class="h5 text-overflow">{{ album.name }}</h3>
+        <p class="text-muted text-artists text-overflow">
+            <span class="text-muted" ng-repeat-start="artist in album.artists">
+                {{ artist.name }}
+            </span><span ng-repeat-end ng-if="!$last">, </span>
+        </p>
     </div>
 </a>