From 4b552a83585794590d1b19d127fa5fd751272e21 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Mon, 11 Jul 2016 00:59:20 +0100
Subject: [PATCH] Cards in album list

---
 public/templates/directives/albums-list.html |  2 +-
 resources/assets/styles/content.less         | 11 +++++++----
 resources/assets/styles/mobile.less          | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/public/templates/directives/albums-list.html b/public/templates/directives/albums-list.html
index 081080c4..5e0cc639 100644
--- a/public/templates/directives/albums-list.html
+++ b/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">
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index cd3e7bbb..d7d2d92e 100644
--- a/resources/assets/styles/content.less
+++ b/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;
       }
 
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 74c0908e..4901a124 100644
--- a/resources/assets/styles/mobile.less
+++ b/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) {