Sizing updates

public/templates/directives/player.html

@@ -25,7 +25,7 @@
     <div class="image">
         <div class="loader" ng-class="{showing: player.currentTrack.loadingProgress == 0}"><i class="fa fa-spin fa-rotate-right"></i></div>
         <a colorbox ng-href="{{player.currentTrack.covers.original}}" pfm-eat-click>
-            <img pfm-src-loader="player.currentTrack.covers.thumbnail" pfm-src-size="thumbnail" />
+            <img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
         </a>
     </div>
     <div class="inner">

public/templates/directives/playlists-list.html

@@ -1,7 +1,7 @@
 <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.small" pfm-src-size="small" />
+            <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">

resources/assets/styles/content.less

@@ -29,7 +29,7 @@
       }
 
       li {
-        width: 33.33333%;
+        width: 30%;
       }
     }
   }
@@ -44,8 +44,7 @@
       }
 
       li {
-        width: auto;
-        float: none;
+        width: 44%;
       }
     }
   }
@@ -133,6 +132,10 @@
         background: #ddd;
       }
     }
+
+    &.empty {
+      box-shadow: 0 0 0 transparent;
+    }
   }
 }
 
@@ -187,6 +190,10 @@
     &.x-archived {
       background: #eee;
     }
+
+    .albums-listing li {
+      width: 22%;
+    }
   }
 
   .share-buttons {

resources/assets/styles/mobile.less

@@ -293,9 +293,10 @@
 
   .notification-pullout {
     left: 0;
+    top: 108px;
     width: 100%;
-    height: ~"calc(100% - 128px)";
-    transform: translateY(-105%) translateZ(0);
+    height: ~"calc(100% - 172px)";
+    transform: translateY(-120%) translateZ(0);
 
     &.active {
       transform: translateY(0) translateZ(0);
@@ -387,10 +388,6 @@
   .secondary-content {
     margin-top: 5px;
   }
-
-  .albums-listing {
-    width: 50% !important;
-  }
 }
 
 // Super small phones like the iPhone 5
@@ -435,6 +432,9 @@
     width: 100% !important;
 
     li {
+      width: 97% !important;
+      margin: 5px;
+
       a img {
         width: 60px;
         float: left;