mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 21:18:00 +01:00
Added alternate sizes for albums and playlists
This commit is contained in:
Josef Citrine
parent
514d5a3c2d
commit
cac2ff74fe
8 changed files with 58 additions and 28 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<span>{{::album.title}}</span>
|
||||
</md-card-content>
|
||||
<md-card-title>
|
||||
<md-card-title-text>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
<ul class="playlists-listing {{::class}}">
|
||||
<li ng-repeat="playlist in playlists track by playlist.id">
|
||||
<a ng-href="{{::playlist.url}}">
|
||||
<img class="image" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
|
||||
<span class="info">
|
||||
<span class="title">{{::playlist.title}}</span>
|
||||
<span class="published">
|
||||
by {{::playlist.user.name}}
|
||||
</span>
|
||||
<span class="stats">
|
||||
<strong>{{::playlist.stats.favourites}}</strong> <i class="material-icons">favorite</i>
|
||||
<strong>{{::playlist.stats.comments}}</strong> <i class="material-icons">comment</i>
|
||||
<strong>{{::playlist.stats.downloads}}</strong> <i class="material-icons">file_download</i>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-if="!playlists.length" class="empty">
|
||||
No playlists found…
|
||||
</li>
|
||||
</ul>
|
||||
<div layout="row" layout-wrap>
|
||||
<div ng-if="!playlists.length" class="empty ng-scope">
|
||||
No playlists found…
|
||||
</div>
|
||||
|
||||
<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}}">
|
||||
<md-card class="album">
|
||||
<img class="md-card-image" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal">
|
||||
|
||||
<md-card-title>
|
||||
<md-card-title-text>
|
||||
<span class="md-headline">{{::playlist.title}}</span>
|
||||
<span class="md-subhead">{{::playlist.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> {{::playlist.stats.favourites}}</span>
|
||||
<span><md-icon>comment</md-icon> {{::playlist.stats.comments}}</span>
|
||||
<span><md-icon>file_download</md-icon> {{::playlist.stats.downloads}}</span>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
]
|
||||
|
|
|
|||
3
resources/assets/scripts/base/modernizr.js
Normal file
3
resources/assets/scripts/base/modernizr.js
Normal file
|
|
@ -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);
|
||||
8
resources/assets/styles/layout.less
vendored
8
resources/assets/styles/layout.less
vendored
|
|
@ -385,3 +385,11 @@ md-backdrop {
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md-subhead {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
md-card-title {
|
||||
padding: 8px 16px 0 !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue