Added alternate sizes for albums and playlists

public/templates/albums/list.html

@@ -1,3 +1,3 @@
 <div class="stretch-to-bottom">
-    <pfm-albums-list albums="albums"></pfm-albums-list>
+    <pfm-albums-list albums="albums" size="large"></pfm-albums-list>
 </div>

public/templates/directives/albums-list.html

@@ -7,9 +7,12 @@
         <md-card class="album">
             <img class="md-card-image" pfm-src-loader="::album.covers.normal" pfm-src-size="normal">
 
-            <md-card-content>
+            <md-card-title>
-                <span>{{::album.title}}</span>
+                <md-card-title-text>
-            </md-card-content>
+                    <span class="md-headline">{{::album.title}}</span>
+                    <span class="md-subhead">{{::album.user.name}}</span>
+                </md-card-title-text>
+            </md-card-title>
 
             <md-card-actions layout="row" layout-align="end center" class="album-stats">
                 <span><md-icon>favorite</md-icon> {{::album.stats.favourites}}</span>

public/templates/directives/playlists-list.html

@@ -1,21 +1,23 @@
-<ul class="playlists-listing {{::class}}">
+<div layout="row" layout-wrap>
-    <li ng-repeat="playlist in playlists track by playlist.id">
+    <div ng-if="!playlists.length" class="empty ng-scope">
-        <a ng-href="{{::playlist.url}}">
+        No playlists found…
-            <img class="image" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
+    </div>
-            <span class="info">
+
-                <span class="title">{{::playlist.title}}</span>
+    <a ng-repeat="playlist in playlists track by playlist.id" ng-href="{{::playlist.url}}" class="clickable" flex-xs="{{xsSize}}" flex-sm="50" flex-gt-sm="{{smSize}}" flex-gt-md="{{mdSize}}" flex-gt-lg="{{lgSize}}">
-                <span class="published">
+        <md-card class="album">
-                    by {{::playlist.user.name}}
+            <img class="md-card-image" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal">
-                </span>
+
-                <span class="stats">
+            <md-card-title>
-                    <strong>{{::playlist.stats.favourites}}</strong> <i class="material-icons">favorite</i>
+                <md-card-title-text>
-                    <strong>{{::playlist.stats.comments}}</strong> <i class="material-icons">comment</i>
+                    <span class="md-headline">{{::playlist.title}}</span>
-                    <strong>{{::playlist.stats.downloads}}</strong> <i class="material-icons">file_download</i>
+                    <span class="md-subhead">{{::playlist.user.name}}</span>
-                </span>
+                </md-card-title-text>
-            </span>
+            </md-card-title>
-        </a>
+            <md-card-actions layout="row" layout-align="end center" class="album-stats">
-    </li>
+                <span><md-icon>favorite</md-icon> {{::playlist.stats.favourites}}</span>
-    <li ng-if="!playlists.length" class="empty">
+                <span><md-icon>comment</md-icon> {{::playlist.stats.comments}}</span>
-        No playlists found&hellip;
+                <span><md-icon>file_download</md-icon> {{::playlist.stats.downloads}}</span>
-    </li>
+            </md-card-actions>
-</ul>
+        </md-card>
+    </a>
+</div>

public/templates/playlists/list.html

@@ -1,3 +1,3 @@
 <div class="stretch-to-bottom">
-    <pfm-playlists-list playlists="playlists"></pfm-playlists-list>
+    <pfm-playlists-list playlists="playlists" size="large"></pfm-playlists-list>
 </div>

resources/assets/scripts/app/directives/albums-list.coffee

@@ -40,6 +40,5 @@ module.exports = angular.module('ponyfm').directive 'pfmAlbumsList', () ->
                 $scope.smSize = '20'
                 $scope.xsSize = '50'
 
-            console.log $scope.size
             $scope.auth = auth.data
     ]

resources/assets/scripts/app/directives/playlists-list.coffee

@@ -20,10 +20,25 @@ module.exports = angular.module('ponyfm').directive 'pfmPlaylistsList', () ->
     templateUrl: '/templates/directives/playlists-list.html'
     scope:
         playlists: '=playlists',
-        class: '@class'
+        class: '@class',
+        size: '@size'
 
     controller: [
         '$scope', 'auth'
         ($scope, auth) ->
+            if typeof $scope.size == 'undefined'
+                $scope.size = 'large'
+
+            if $scope.size == 'small'
+                $scope.lgSize = '20'
+                $scope.mdSize = '33'
+                $scope.smSize = '50'
+                $scope.xsSize = '100'
+            else
+                $scope.lgSize = '15'
+                $scope.mdSize = ''
+                $scope.smSize = '20'
+                $scope.xsSize = '50'
+
             $scope.auth = auth.data
     ]

resources/assets/scripts/base/modernizr.js

@@ -0,0 +1,3 @@
+/*! modernizr 3.3.1 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-cssfilters-setclasses !*/
+!function(e,n,t){function r(e,n){return typeof e===n}function s(){var e,n,t,s,o,i,a;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],n=C[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=r(n.fn,"function")?n.fn():n.fn,o=0;o<e.length;o++)i=e[o],a=i.split("."),1===a.length?Modernizr[a[0]]=s:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=s),g.push((s?"":"no-")+a.join("-"))}}function o(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(_&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),_?w.className.baseVal=n:w.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):_?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(e,n){return!!~(""+e).indexOf(n)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function f(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var s;for(var o in e)if(e[o]in n)return t===!1?e[o]:(s=n[e[o]],r(s,"function")?f(s,t||n):s);return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=i(_?"svg":"body"),e.fake=!0),e}function c(e,t,r,s){var o,a,l,f,u="modernizr",p=i("div"),c=d();if(parseInt(r,10))for(;r--;)l=i("div"),l.id=s?s[r]:u+(r+1),p.appendChild(l);return o=i("style"),o.type="text/css",o.id="s"+u,(c.fake?c:p).appendChild(o),c.appendChild(p),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",f=w.style.overflow,w.style.overflow="hidden",w.appendChild(c)),a=t(p,e),c.fake?(c.parentNode.removeChild(c),w.style.overflow=f,w.offsetHeight):p.parentNode.removeChild(p),!!a}function m(n,r){var s=n.length;if("CSS"in e&&"supports"in e.CSS){for(;s--;)if(e.CSS.supports(p(n[s]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var o=[];s--;)o.push("("+p(n[s])+":"+r+")");return o=o.join(" or "),c("@supports ("+o+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function h(e,n,s,o){function f(){p&&(delete j.style,delete j.modElem)}if(o=r(o,"undefined")?!1:o,!r(s,"undefined")){var u=m(e,s);if(!r(u,"undefined"))return u}for(var p,d,c,h,v,y=["modernizr","tspan","samp"];!j.style&&y.length;)p=!0,j.modElem=i(y.shift()),j.style=j.modElem.style;for(c=e.length,d=0;c>d;d++)if(h=e[d],v=j.style[h],a(h,"-")&&(h=l(h)),j.style[h]!==t){if(o||r(s,"undefined"))return f(),"pfx"==n?h:!0;try{j.style[h]=s}catch(g){}if(j.style[h]!=v)return f(),"pfx"==n?h:!0}return f(),!1}function v(e,n,t,s,o){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+E.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?h(a,n,s,o):(a=(e+" "+T.join(i+" ")+i).split(" "),u(a,n,t))}function y(e,n,r){return v(e,t,t,n,r)}var g=[],C=[],S={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var w=n.documentElement,_="svg"===w.nodeName.toLowerCase(),x=S._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];S._prefixes=x;var b="CSS"in e&&"supports"in e.CSS,P="supportsCSS"in e;Modernizr.addTest("supports",b||P);var z="Moz O ms Webkit",E=S._config.usePrefixes?z.split(" "):[];S._cssomPrefixes=E;var T=S._config.usePrefixes?z.toLowerCase().split(" "):[];S._domPrefixes=T;var N={elem:i("modernizr")};Modernizr._q.push(function(){delete N.elem});var j={style:N.elem.style};Modernizr._q.unshift(function(){delete j.style}),S.testAllProps=v,S.testAllProps=y,Modernizr.addTest("cssfilters",function(){if(Modernizr.supports)return y("filter","blur(2px)");var e=i("a");return e.style.cssText=x.join("filter:blur(2px); "),!!e.style.length&&(n.documentMode===t||n.documentMode>9)}),s(),o(g),delete S.addTest,delete S.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);

resources/assets/styles/layout.less

@@ -385,3 +385,11 @@ md-backdrop {
     padding: 0;
   }
 }
+
+.md-subhead {
+  padding-top: 0 !important;
+}
+
+md-card-title {
+  padding: 8px 16px 0 !important;
+}