Cards in album list

public/templates/directives/albums-list.html

@@ -1,7 +1,7 @@
 <ul class="albums-listing {{::class}}">
     <li ng-repeat="album in albums track by album.id">
         <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="title">{{::album.title}}</span>
             <span class="published">

resources/assets/styles/content.less

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

resources/assets/styles/mobile.less

@@ -370,6 +370,10 @@
   .secondary-content {
     margin-top: 5px;
   }
+
+  .albums-listing {
+    width: 50% !important;
+  }
 }
 
 // Super small phones like the iPhone 5
@@ -400,6 +404,19 @@
     width: 122px;
     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) {