Cards in album list

This commit is contained in:
Josef Citrine 2016-07-11 00:59:20 +01:00
parent 8acf5f92d4
commit 4b552a8358
3 changed files with 25 additions and 5 deletions

View file

@ -1,7 +1,7 @@
<ul class="albums-listing {{::class}}"> <ul class="albums-listing {{::class}}">
<li ng-repeat="album in albums track by album.id"> <li ng-repeat="album in albums track by album.id">
<a ng-href="{{::album.url}}"> <a ng-href="{{::album.url}}">
<img class="image" pfm-src-loader="::album.covers.small" pfm-src-size="small" /> <img class="image" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
<span class="info"> <span class="info">
<span class="title">{{::album.title}}</span> <span class="title">{{::album.title}}</span>
<span class="published"> <span class="published">

View file

@ -56,6 +56,7 @@
padding: 0px; padding: 0px;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
height: 100%;
&.two-columns { &.two-columns {
li { li {
@ -69,6 +70,8 @@
width: 25%; width: 25%;
padding: 5px; padding: 5px;
line-height: normal; line-height: normal;
.material-shadow(1);
border-radius: 2px;
a { a {
background: #eee; background: #eee;
@ -78,14 +81,14 @@
img { img {
display: block; display: block;
float: left; width: 100%;
width: 67px; height: auto;
height: 67px;
background: #ddd; background: #ddd;
border-radius: 2px 2px 0 0;
} }
.info { .info {
margin-left: 72px; padding: 5px;
display: block; display: block;
} }

View file

@ -370,6 +370,10 @@
.secondary-content { .secondary-content {
margin-top: 5px; margin-top: 5px;
} }
.albums-listing {
width: 50% !important;
}
} }
// Super small phones like the iPhone 5 // Super small phones like the iPhone 5
@ -400,6 +404,19 @@
width: 122px; width: 122px;
padding-top: 18px; padding-top: 18px;
} }
.search {
margin-top: 12px;
}
.top-bar .burger-wrapper {
top: 22px;
left: 16px;
}
.albums-listing {
width: 100% !important;
}
} }
@media only screen and (max-height: 500px) { @media only screen and (max-height: 500px) {