From 9b6babed31097d1ba8e64d48972a11d186a747a4 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Sun, 7 Aug 2016 15:41:58 +0100
Subject: [PATCH] Tweaked a few UI elements :/

---
 public/templates/pages/_layout.html           | 10 ++++-----
 public/templates/playlists/index.html         | 21 +++++++------------
 .../scripts/app/controllers/playlists.coffee  | 15 ++++++++++++-
 .../assets/styles/components/player.less      |  1 +
 resources/assets/styles/content.less          |  2 +-
 resources/assets/styles/layout.less           |  4 ++++
 resources/assets/styles/mobile.less           | 14 +++++++++----
 7 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/public/templates/pages/_layout.html b/public/templates/pages/_layout.html
index 6d7ea104..cdd1efd7 100644
--- a/public/templates/pages/_layout.html
+++ b/public/templates/pages/_layout.html
@@ -1,7 +1,7 @@
-<ul class="tabs fixed">
-    <li ui-sref-active="active"><a ui-sref=".about">About Pony.fm</a></li>
-    <li ui-sref-active="active"><a ui-sref=".faq">FAQ</a></li>
-    <li ui-sref-active="active"><a ui-sref=".mlpforums-advertising-program">MLP Forums Advertising Program</a></li>
-</ul>
+<md-tabs class="about-tabs" md-selected="selectedTab" md-border-bottom>
+    <md-tab ui-sref=".about" name="about">About Pony.fm</md-tab>
+    <md-tab ui-sref=".faq" name="faq">FAQ</md-tab>
+    <md-tab ui-sref=".mlpforums-advertising-program" name="advertising">MLP Forums Advertising Program</md-tab>
+</md-tabs>
 
 <ui-view class="static-page fixed-tabs"></ui-view>
diff --git a/public/templates/playlists/index.html b/public/templates/playlists/index.html
index 0f8a5655..d25607c5 100644
--- a/public/templates/playlists/index.html
+++ b/public/templates/playlists/index.html
@@ -1,16 +1,11 @@
-<ul class="dropdowns">
-    <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>
-        <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('sort')"><i class="material-icons">remove</i></a>
-        <ul class="dropdown-menu">
-            <li ng-repeat="filter in ::filters.sort.values track by $index" ng-class="{selected: filter == query.filters.sort}">
-                <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{::filter.title}}</a>
-            </li>
-        </ul>
-    </li>
-</ul>
+<div layout="row">
+    <md-input-container flex="100" flex-sm="50" flex-gt-sm="25">
+        <label>Order by</label>
+        <md-select ng-model="filter" md-on-close="handleSingularDropdown('sort', filter)">
+            <md-option ng-repeat="filter in ::filters.sort.values track by $index" value="{{filter}}">{{::filter.title}}</md-option>
+        </md-select>
+    </md-input-container>
+</div>
 
 <div class="pagination" ng-if="totalPages > 1">
     <ul>
diff --git a/resources/assets/scripts/app/controllers/playlists.coffee b/resources/assets/scripts/app/controllers/playlists.coffee
index bba00a2f..e044fcf5 100644
--- a/resources/assets/scripts/app/controllers/playlists.coffee
+++ b/resources/assets/scripts/app/controllers/playlists.coffee
@@ -27,10 +27,23 @@ module.exports = angular.module('ponyfm').controller "playlists", [
         $scope.query = playlists.mainQuery
         $scope.filters = playlists.filters
 
+        filterDropdown = (newVar, oldVar) ->
+            if newVar instanceof Array && oldVar instanceof Array
+                if 'any' in newVar
+                    if !('any' in oldVar)
+                        newVar = ['any']
+                    else if newVar.length > oldVar.length
+                        anyIndex = newVar.indexOf('any')
+                        newVar.splice(anyIndex, 1)
+
+        $scope.handleSingularDropdown = (filter, value) ->
+            $scope.clearFilter filter
+            $scope.setFilter filter, JSON.parse(value)
+
         $scope.setFilter = (filter, value) ->
             $scope.query.setFilter filter, value
             $state.transitionTo 'content.playlists.list', {filter: $scope.query.toFilterString()}
-            
+
         $scope.clearFilter = (filter) ->
             $scope.query.clearFilter filter
             $state.transitionTo 'content.playlists.list', {filter: $scope.query.toFilterString()}
diff --git a/resources/assets/styles/components/player.less b/resources/assets/styles/components/player.less
index d08253e2..538d838f 100644
--- a/resources/assets/styles/components/player.less
+++ b/resources/assets/styles/components/player.less
@@ -100,6 +100,7 @@
     left: 64px;
     width: 100%;
     width: ~"calc(100% - 64px)";
+    outline: 0;
 
     .bar {
       z-index: 500;
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index 68c4c67a..2274c263 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -643,7 +643,7 @@ html {
   .counter {
     position: absolute;
     bottom: 8px;
-    right: 90px;
+    right: 5px;
     font-size: 8pt;
     color: #fff;
     background: #b885bd;
diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less
index ece06d74..c4eed3a9 100644
--- a/resources/assets/styles/layout.less
+++ b/resources/assets/styles/layout.less
@@ -359,6 +359,10 @@ header {
   }
 }
 
+.about-tabs {
+  margin-bottom: 20px;
+}
+
 .checkboxes md-input-container {
   margin-top: 8px;
   margin-bottom: 0;
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 4c66e8dc..75c5548f 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -444,13 +444,19 @@
           margin-left: auto;
           margin-right: auto;
         }
+
+        .info {
+          margin-left: 0;
+          margin-top: 15px;
+          text-align: center;
+        }
       }
     }
 
-    .info {
-      margin-left: 0;
-      margin-top: 15px;
-      text-align: center;
+    .cover {
+      display: block !important;
+      margin-left: auto;
+      margin-right: auto;
     }
 
     .buttons {