Tweaked a few UI elements :/

public/templates/pages/_layout.html

@@ -1,7 +1,7 @@
-<ul class="tabs fixed">
+<md-tabs class="about-tabs" md-selected="selectedTab" md-border-bottom>
-    <li ui-sref-active="active"><a ui-sref=".about">About Pony.fm</a></li>
+    <md-tab ui-sref=".about" name="about">About Pony.fm</md-tab>
-    <li ui-sref-active="active"><a ui-sref=".faq">FAQ</a></li>
+    <md-tab ui-sref=".faq" name="faq">FAQ</md-tab>
-    <li ui-sref-active="active"><a ui-sref=".mlpforums-advertising-program">MLP Forums Advertising Program</a></li>
+    <md-tab ui-sref=".mlpforums-advertising-program" name="advertising">MLP Forums Advertising Program</md-tab>
-</ul>
+</md-tabs>
 
 <ui-view class="static-page fixed-tabs"></ui-view>

public/templates/playlists/index.html

@@ -1,16 +1,11 @@
-<ul class="dropdowns">
+<div layout="row">
-    <li class="dropdown filterable" ng-class="{'has-filter': !query.filters.sort.isDefault}">
+    <md-input-container flex="100" flex-sm="50" flex-gt-sm="25">
-        <a class="dropdown-toggle btn btn-default" bs-dropdown>
+        <label>Order by</label>
-            Order: <strong>{{query.filters.sort.title}}</strong>
+        <md-select ng-model="filter" md-on-close="handleSingularDropdown('sort', filter)">
-        </a>
+            <md-option ng-repeat="filter in ::filters.sort.values track by $index" value="{{filter}}">{{::filter.title}}</md-option>
-        <a class="btn btn-default" pfm-eat-click ng-click="clearFilter('sort')"><i class="material-icons">remove</i></a>
+        </md-select>
-        <ul class="dropdown-menu">
+    </md-input-container>
-            <li ng-repeat="filter in ::filters.sort.values track by $index" ng-class="{selected: filter == query.filters.sort}">
+</div>
-                <a pfm-eat-click href="#" ng-click="setFilter('sort', filter)">{{::filter.title}}</a>
-            </li>
-        </ul>
-    </li>
-</ul>
 
 <div class="pagination" ng-if="totalPages > 1">
     <ul>

resources/assets/scripts/app/controllers/playlists.coffee

@@ -27,6 +27,19 @@ 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()}

resources/assets/styles/components/player.less

@@ -100,6 +100,7 @@
     left: 64px;
     width: 100%;
     width: ~"calc(100% - 64px)";
+    outline: 0;
 
     .bar {
       z-index: 500;

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;

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;

resources/assets/styles/mobile.less

@@ -444,14 +444,20 @@
           margin-left: auto;
           margin-right: auto;
         }
-      }
-    }
 
         .info {
           margin-left: 0;
           margin-top: 15px;
           text-align: center;
         }
+      }
+    }
+
+    .cover {
+      display: block !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
 
     .buttons {
       margin-top: 15px;