From bd07c5ca9827ffb3c5e8d47f15b640bdd0fa74cf Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Mon, 11 Jul 2016 02:04:53 +0100
Subject: [PATCH] Sizing updates

---
 public/templates/directives/users-list.html        |  2 +-
 public/templates/playlists/index.html              |  2 +-
 public/templates/tracks/index.html                 | 10 +++++-----
 resources/assets/styles/components/components.less | 11 ++++++++---
 resources/assets/styles/content.less               |  4 ++--
 resources/assets/styles/layout.less                |  1 +
 resources/assets/styles/mobile.less                | 14 +++++++++++++-
 7 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/public/templates/directives/users-list.html b/public/templates/directives/users-list.html
index 10335144..70252f22 100644
--- a/public/templates/directives/users-list.html
+++ b/public/templates/directives/users-list.html
@@ -1,7 +1,7 @@
 <ul class="users-listing">
     <li class="artist" ng-class="{'x-archived': user.is_archived}" ng-repeat="user in users track by user.id">
         <a ng-href="{{::user.url}}">
-            <img class="image" pfm-src-loader="user.avatars.small" pfm-src-size="small" />
+            <img class="image" pfm-src-loader="user.avatars.normal" pfm-src-size="normal" />
             <span class="info">
                 <span class="title">{{::user.name}}</span>
                 <span ng-hide="user.is_archived" class="published">
diff --git a/public/templates/playlists/index.html b/public/templates/playlists/index.html
index 7b634af3..7b60e1bc 100644
--- a/public/templates/playlists/index.html
+++ b/public/templates/playlists/index.html
@@ -1,5 +1,5 @@
 <ul class="dropdowns">
-    <li class="dropdown" ng-class="{'has-filter': !query.filters.sort.isDefault}">
+    <li class="dropdown filterable" ng-class="{'has-filter': !query.filters.sort.isDefault}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Order: <strong>{{query.filters.sort.title}}</strong>
         </a>
diff --git a/public/templates/tracks/index.html b/public/templates/tracks/index.html
index f14e53ec..7777f2b2 100644
--- a/public/templates/tracks/index.html
+++ b/public/templates/tracks/index.html
@@ -1,5 +1,5 @@
 <ul class="dropdowns">
-    <li class="dropdown" ng-class="{'has-filter': query.filters.trackTypes.selectedArray.length}">
+    <li class="dropdown filterable" ng-class="{'has-filter': query.filters.trackTypes.selectedArray.length}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Type: <strong>{{query.filters.trackTypes.title}}</strong>
         </a>
@@ -13,7 +13,7 @@
             </li>
         </ul>
     </li>
-    <li class="dropdown" ng-class="{'has-filter': query.filters.showSongs.selectedArray.length}">
+    <li class="dropdown filterable" ng-class="{'has-filter': query.filters.showSongs.selectedArray.length}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Show Songs: <strong>{{query.filters.showSongs.title}}</strong>
         </a>
@@ -27,7 +27,7 @@
             </li>
         </ul>
     </li>
-    <li class="dropdown" ng-class="{'has-filter': query.filters.genres.selectedArray.length}">
+    <li class="dropdown filterable" ng-class="{'has-filter': query.filters.genres.selectedArray.length}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Genre: <strong>{{query.filters.genres.title}}</strong>
         </a>
@@ -39,7 +39,7 @@
             </li>
         </ul>
     </li>
-    <li class="dropdown" ng-class="{'has-filter': !query.filters.isVocal.isDefault}">
+    <li class="dropdown filterable" ng-class="{'has-filter': !query.filters.isVocal.isDefault}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Is Vocal: <strong>{{query.filters.isVocal.title}}</strong>
         </a>
@@ -52,7 +52,7 @@
             </li>
         </ul>
     </li>
-    <li class="dropdown" ng-class="{'has-filter': !query.filters.sort.isDefault}">
+    <li class="dropdown filterable" ng-class="{'has-filter': !query.filters.sort.isDefault}">
         <a class="dropdown-toggle btn btn-default" bs-dropdown>
             Order: <strong>{{query.filters.sort.title}}</strong>
         </a>
diff --git a/resources/assets/styles/components/components.less b/resources/assets/styles/components/components.less
index 6fe8a426..72e34a57 100644
--- a/resources/assets/styles/components/components.less
+++ b/resources/assets/styles/components/components.less
@@ -76,11 +76,16 @@
       > .btn {
         background: @pfm-purple;
         color: #fff;
-        border-radius: 0 15px 15px 0;
       }
 
-      > .dropdown-toggle {
-        border-radius: 15px 0 0 15px;
+      &.filterable {
+        > .btn {
+          border-radius: 0 15px 15px 0;
+        }
+
+        > .dropdown-toggle {
+          border-radius: 15px 0 0 15px;
+        }
       }
 
       .dropdown-menu {
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index 9c38692c..903c2497 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -67,8 +67,8 @@
   li {
     .box-sizing(border-box);
     float: left;
-    width: 25%;
-    padding: 0px;
+    width: 12.5%;
+    margin: 10px;
     line-height: normal;
     .material-shadow(1);
     border-radius: 2px;
diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less
index 657349ca..0744b385 100644
--- a/resources/assets/styles/layout.less
+++ b/resources/assets/styles/layout.less
@@ -203,6 +203,7 @@ header {
       padding: 12px 0 12px 22px;
       overflow: hidden;
       color: fadeout(#fff, 20%);
+      font-size: 14px;
 
       &:hover {
         color: #fff;
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 4901a124..ec78e866 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -414,8 +414,20 @@
     left: 16px;
   }
 
-  .albums-listing {
+  .albums-listing, .playlists-listing, .users-listing {
     width: 100% !important;
+
+    li {
+      a img {
+        width: 60px;
+        float: left;
+      }
+
+      .info {
+        margin-left: 60px;
+        padding: 2px 5px;
+      }
+    }
   }
 }