From b5fab0618884f10a43ea0be6a6217cb973783732 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Thu, 4 Aug 2016 20:32:01 +0100
Subject: [PATCH] Ripping out things and swapping in Angular

---
 gulpfile.js                                   |   1 -
 public/templates/account/_layout.html         |   2 +-
 public/templates/albums/show.html             |   4 +-
 public/templates/directives/player.html       |   4 +-
 public/templates/directives/users-list.html   |  31 +++--
 public/templates/partials/credits-dialog.html | 126 +++++++++---------
 public/templates/playlists/show.html          |   4 +-
 public/templates/tracks/frame.html            |  20 +++
 public/templates/tracks/show.html             |   4 +-
 resources/assets/scripts/app/app.coffee       |   1 -
 .../app/controllers/application.coffee        |  17 ++-
 .../scripts/app/controllers/sidebar.coffee    |  70 ++--------
 .../app/directives/share-buttons.coffee       |   8 +-
 .../assets/scripts/app/services/color.coffee  |  19 ++-
 resources/assets/styles/content.less          |  22 ++-
 resources/assets/styles/mobile.less           |   2 +-
 resources/views/shared/_app_layout.blade.php  |   5 +-
 17 files changed, 166 insertions(+), 174 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 89f56f82..6241af60 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -81,7 +81,6 @@ gulp.task("webpack-dev-server", function () {
 
 gulp.task("styles-app", function () {
     var includedStyles = [
-        "resources/assets/styles/base/jquery-ui.css",
         "resources/assets/styles/base/colorbox.css",
         "resources/assets/styles/app.less"
     ];
diff --git a/public/templates/account/_layout.html b/public/templates/account/_layout.html
index 3c8910c0..47fe8682 100644
--- a/public/templates/account/_layout.html
+++ b/public/templates/account/_layout.html
@@ -1,4 +1,4 @@
-<md-tabs class="account-tabs manage-account-tabs" md-selected="currentNavItem" md-border-bottom>
+<md-tabs class="account-tabs manage-account-tabs" md-selected="4" md-border-bottom>
     <md-tab ui-sref=".uploader" name="uploader">Upload music</md-tab>
     <md-tab ui-sref=".tracks" name="tracks">Tracks</md-tab>
     <md-tab ui-sref=".albums" name="albums">Albums</md-tab>
diff --git a/public/templates/albums/show.html b/public/templates/albums/show.html
index 710368ed..f8c68d9f 100644
--- a/public/templates/albums/show.html
+++ b/public/templates/albums/show.html
@@ -33,9 +33,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <a colorbox ng-href="{{::album.covers.original}}" pfm-eat-click>
-                <img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
-            </a>
+            <img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />
 
             <div class="share-buttons" pfm-share-buttons>
                 <a class="tumblr" ng-href="{{::album.share.tumblrUrl}}" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
diff --git a/public/templates/directives/player.html b/public/templates/directives/player.html
index 4ecefcd5..8c85e231 100644
--- a/public/templates/directives/player.html
+++ b/public/templates/directives/player.html
@@ -24,9 +24,7 @@
     </ul>
     <div class="image">
         <div class="loader" ng-class="{showing: player.currentTrack.loadingProgress == 0}"><i class="material-icons">autorenew</i></div>
-        <a colorbox ng-href="{{player.currentTrack.covers.original}}" pfm-eat-click>
-            <img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
-        </a>
+        <img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
     </div>
     <div class="inner">
         <div class="title">
diff --git a/public/templates/directives/users-list.html b/public/templates/directives/users-list.html
index 70252f22..21011e07 100644
--- a/public/templates/directives/users-list.html
+++ b/public/templates/directives/users-list.html
@@ -1,19 +1,24 @@
-<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.normal" pfm-src-size="normal" />
-            <span class="info">
-                <span class="title">{{::user.name}}</span>
+<div layout="row" layout-xs="column" layout-wrap>
+    <p ng-show="!users.length" class="empty">
+        No users found&hellip;
+    </p>
+
+    <a ng-repeat="user in users track by user.id" ng-href="{{::user.url}}" class="clickable" flex-gt-xs="50" flex-gt-sm="25" flex-gt-md="20">
+        <md-card class="user">
+            <img class="md-card-image" pfm-src-loader="::user.avatars.normal" pfm-src-size="normal">
+
+            <md-card-content>
+                <span><strong>{{::user.name}}</strong></span>
+            </md-card-content>
+
+            <md-card-actions layout="row" layout-align="start center" class="user-info">
                 <span ng-hide="user.is_archived" class="published">
                     joined {{::user.created_at.date | momentFromNow}}
                 </span>
                 <span ng-show="::user.is_archived" class="published">
                     archived artist
                 </span>
-            </span>
-        </a>
-    </li>
-    <li ng-show="!users.length" class="empty">
-        No users found&hellip;
-    </li>
-</ul>
+            </md-card-actions>
+        </md-card>
+    </a>
+</div>
diff --git a/public/templates/partials/credits-dialog.html b/public/templates/partials/credits-dialog.html
index ac407c8b..a8a860b1 100644
--- a/public/templates/partials/credits-dialog.html
+++ b/public/templates/partials/credits-dialog.html
@@ -1,64 +1,64 @@
-<div class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4>
-                    <button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
-                    Pony.fm source &amp; credits
-                </h4>
-            </div>
-            <div class="modal-body">
-              <p>Pony.fm was created to organize the <em>My Little Pony</em> community&#39;s fan music.
-              The project is maintained by <a href="https://poniverse.net/" target="_blank">Poniverse</a>, an
-                organization devoted to building and operating fan sites for the pony community.</p>
-
-              <h2>Are you a developer?</h2>
-              <p>Pony.fm is open-sourced under the GNU Affero General Public License (AGPL).
-              Join the project&#39;s development at <a href="https://github.com/Poniverse/Pony.fm" target="_blank">GitHub</a>!</p>
-
-              <h2>Open-source credits</h2>
-              <p>Pony.fm would not be possible without the efforts of the open-source community.
-              We thank the following projects, in no particular order, for providing the building
-              blocks for our own.</p>
-              <ul>
-                <li><a href="http://laravel.com/" target="_blank">Laravel</a> - our backend framework of choice</li>
-                <li><a href="https://angularjs.org/" target="_blank">Angular.js</a> - our front-end framework of choice</li>
-                <li><a href="https://secure.php.net/" target="_blank">PHP</a> - for providing a batteries-loaded language to build great web apps in</li>
-                <li><a href="https://getcomposer.org/" target="_blank">Composer</a> - for making the management of PHP dependencies sane</li>
-                <li><a href="https://ffmpeg.org/" target="_blank">FFmpeg</a> - for analyzing and dealing with every audio file we can throw at it</li>
-                <li><a href="http://guzzlephp.org/" target="_blank">Guzzle</a> - for adding sanity to the art of making HTTP requests</li>
-                <li><a href="https://github.com/CodeScaleInc/ffmpeg-php" target="_blank">FFmpegPHP</a> - for providing a sweet PHP interface to ffmpeg</li>
-                <li><a href="https://github.com/barryvdh/laravel-ide-helper" target="_blank">Laravel IDE Helper Generator</a> - for making our IDE useful</li>
-                <li><a href="https://github.com/In-Touch/laravel-newrelic" target="_blank">Laravel NewRelic Service Provider</a> - for making it easy to monitor Pony.fm&#39;'s performance</li>
-                <li><a href="https://github.com/filp/whoops">Whoops</a> - for providing an easy to understand error handler</li>
-                <li><a href="https://github.com/GrahamCampbell/Laravel-Exceptions">Laravel Exceptions</a> - for bringing Whoops to Laravel 5</li>
-                <li><a href="https://www.vagrantup.com/" target="_blank">Vagrant</a> - for making cross-platform dev environments possible</li>
-                <li><a href="http://atomicparsley.sourceforge.net/" target="_blank">AtomicParsley</a> - for making it easy to work with tags in M4A files</li>
-                <li><a href="https://xiph.org/flac/" target="_blank">FLAC</a> - FLAC is best audio codec /)</li>
-                <li><a href="http://www.vorbis.com/" target="_blank">OGG Vorbis</a> - A great open-source audio codec</li>
-                <li><a href="http://www.audiocoding.com/faac.html" target="_blank">FAAC</a> - for encoding our AAC files</li>
-                <li><a href="http://lame.sourceforge.net/" target="_blank">LAME</a> - for encoding our MP3 files</li>
-                <li><a href="http://gulpjs.com/" target="_blank">gulp</a> - for being our asset pipeline</li>
-                <li><a href="https://nodejs.org/" target="_blank">Node.js</a> - for making JavaScript useful outside the browser</li>
-                <li><a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank">SoundManager</a> - for smoothing out cross-browser audio playback</li>
-                <li><a href="http://momentjs.com/" target="_blank">Moment.js</a> - for making JavaScript dates sane</li>
-                <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - for its front-end components and making layouts easy</li>
-                <li><a href="http://lesscss.org/" target="_blank">LESS</a> - for (almost) making CSS awesome</li>
-                <li><a href="https://jquery.com/" target="_blank">jQuery</a> - for being useful all over the place</li>
-                <li><a href="https://github.com/mgonto/angularytics" target="_blank">Angularytics</a> - for making Google Analytics useful in a single-page app</li>
-                <li><a href="https://github.com/angular-ui/ui-router" target="_blank">UI-Router</a> - for making non-trivial Angular.js routes possible</li>
-                <li><a href="http://mgcrea.github.io/angular-strap/ target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
-                <li><a href="https://github.com/VentureCraft/revisionable" target="_blank">Revisionable</a> - for making audit logs easy</li>
-                <li><a href="https://github.com/jackmoore/colorbox" target="_blank">Colorbox</a> - for allowing us to have pretty lightboxes</li>
-            	<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a> - for the Markdown parser</li>
-            	<li><a href="https://github.com/Hypercubed/angular-marked" target="_blank">angular-marked</a> - for giving us an Angular way to use Marked</li>
-                <li><a href="http://www.chartjs.org/" target="_blank">chart.js</a> - for giving us beautiful, programmable charts</li>
-                <li><a href="http://jtblin.github.io/angular-chart.js/" target="_blank">angular-chart.js</a> - for making using chart.js with Angular easy</li>
-              </ul>
-            </div>
-            <div class="modal-footer">
-                <a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
-            </div>
+<md-dialog ng-cloak>
+    <md-dialog-content>
+        <div class="modal-header">
+            <h4>
+                <button type="button" class="close" ng-click="$hide()" ng-hide="isLoading">&times;</button>
+                Pony.fm source &amp; credits
+            </h4>
         </div>
-    </div>
-</div>
+        <div class="modal-body">
+          <p>Pony.fm was created to organize the <em>My Little Pony</em> community&#39;s fan music.
+          The project is maintained by <a href="https://poniverse.net/" target="_blank">Poniverse</a>, an
+            organization devoted to building and operating fan sites for the pony community.</p>
+
+          <h2>Are you a developer?</h2>
+          <p>Pony.fm is open-sourced under the GNU Affero General Public License (AGPL).
+          Join the project&#39;s development at <a href="https://github.com/Poniverse/Pony.fm" target="_blank">GitHub</a>!</p>
+
+          <h2>Open-source credits</h2>
+          <p>Pony.fm would not be possible without the efforts of the open-source community.
+          We thank the following projects, in no particular order, for providing the building
+          blocks for our own.</p>
+          <ul>
+            <li><a href="http://laravel.com/" target="_blank">Laravel</a> - our backend framework of choice</li>
+            <li><a href="https://angularjs.org/" target="_blank">Angular.js</a> - our front-end framework of choice</li>
+            <li><a href="https://secure.php.net/" target="_blank">PHP</a> - for providing a batteries-loaded language to build great web apps in</li>
+            <li><a href="https://getcomposer.org/" target="_blank">Composer</a> - for making the management of PHP dependencies sane</li>
+            <li><a href="https://ffmpeg.org/" target="_blank">FFmpeg</a> - for analyzing and dealing with every audio file we can throw at it</li>
+            <li><a href="http://guzzlephp.org/" target="_blank">Guzzle</a> - for adding sanity to the art of making HTTP requests</li>
+            <li><a href="https://github.com/CodeScaleInc/ffmpeg-php" target="_blank">FFmpegPHP</a> - for providing a sweet PHP interface to ffmpeg</li>
+            <li><a href="https://github.com/barryvdh/laravel-ide-helper" target="_blank">Laravel IDE Helper Generator</a> - for making our IDE useful</li>
+            <li><a href="https://github.com/In-Touch/laravel-newrelic" target="_blank">Laravel NewRelic Service Provider</a> - for making it easy to monitor Pony.fm&#39;'s performance</li>
+            <li><a href="https://github.com/filp/whoops">Whoops</a> - for providing an easy to understand error handler</li>
+            <li><a href="https://github.com/GrahamCampbell/Laravel-Exceptions">Laravel Exceptions</a> - for bringing Whoops to Laravel 5</li>
+            <li><a href="https://www.vagrantup.com/" target="_blank">Vagrant</a> - for making cross-platform dev environments possible</li>
+            <li><a href="http://atomicparsley.sourceforge.net/" target="_blank">AtomicParsley</a> - for making it easy to work with tags in M4A files</li>
+            <li><a href="https://xiph.org/flac/" target="_blank">FLAC</a> - FLAC is best audio codec /)</li>
+            <li><a href="http://www.vorbis.com/" target="_blank">OGG Vorbis</a> - A great open-source audio codec</li>
+            <li><a href="http://www.audiocoding.com/faac.html" target="_blank">FAAC</a> - for encoding our AAC files</li>
+            <li><a href="http://lame.sourceforge.net/" target="_blank">LAME</a> - for encoding our MP3 files</li>
+            <li><a href="http://gulpjs.com/" target="_blank">gulp</a> - for being our asset pipeline</li>
+            <li><a href="https://nodejs.org/" target="_blank">Node.js</a> - for making JavaScript useful outside the browser</li>
+            <li><a href="https://material.angularjs.org/" target="_blank">Angular Material</a> - for bringing material design to Angular.js apps</li>
+            <li><a href="http://www.schillmania.com/projects/soundmanager2/" target="_blank">SoundManager</a> - for smoothing out cross-browser audio playback</li>
+            <li><a href="http://momentjs.com/" target="_blank">Moment.js</a> - for making JavaScript dates sane</li>
+            <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - for its front-end components and making layouts easy</li>
+            <li><a href="http://lesscss.org/" target="_blank">LESS</a> - for (almost) making CSS awesome</li>
+            <li><a href="https://jquery.com/" target="_blank">jQuery</a> - for being useful all over the place</li>
+            <li><a href="https://github.com/mgonto/angularytics" target="_blank">Angularytics</a> - for making Google Analytics useful in a single-page app</li>
+            <li><a href="https://github.com/angular-ui/ui-router" target="_blank">UI-Router</a> - for making non-trivial Angular.js routes possible</li>
+            <li><a href="http://mgcrea.github.io/angular-strap/" target="_blank">AngularStrap</a> - for making Bootstrap and Angular.js get along</li>
+            <li><a href="https://github.com/VentureCraft/revisionable" target="_blank">Revisionable</a> - for making audit logs easy</li>
+        	<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a> - for the Markdown parser</li>
+        	<li><a href="https://github.com/Hypercubed/angular-marked" target="_blank">angular-marked</a> - for giving us an Angular way to use Marked</li>
+            <li><a href="http://www.chartjs.org/" target="_blank">chart.js</a> - for giving us beautiful, programmable charts</li>
+            <li><a href="http://jtblin.github.io/angular-chart.js/" target="_blank">angular-chart.js</a> - for making using chart.js with Angular easy</li>
+            <li><a href="https://github.com/lokesh/color-thief" target="_blank">Color Thief</a> - for making color palettes easy</li>
+            <li><a href="https://github.com/ksubileau/color-thief-php" target="_blank">Color Thief PHP</a> - for bringing color-thief server side</li>
+          </ul>
+        </div>
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+        <a class="btn btn-flat btn-primary" ng-click="$hide()" ng-disabled="isLoading">Close</a>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/public/templates/playlists/show.html b/public/templates/playlists/show.html
index b236d34e..a73b0f64 100644
--- a/public/templates/playlists/show.html
+++ b/public/templates/playlists/show.html
@@ -32,9 +32,7 @@
 
     <div class="stretch-to-bottom details-columns">
         <div class="right">
-            <a colorbox ng-href="{{::playlist.covers.original}}" pfm-eat-click>
-                <img class="cover" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
-            </a>
+            <img class="cover" pfm-src-loader="::playlist.covers.normal" pfm-src-size="normal" />
 
             <div class="share-buttons" pfm-share-buttons>
                 <a class="tumblr" ng-href="{{::playlist.share.tumblrUrl}}" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
diff --git a/public/templates/tracks/frame.html b/public/templates/tracks/frame.html
index e3d52ee1..440368a9 100644
--- a/public/templates/tracks/frame.html
+++ b/public/templates/tracks/frame.html
@@ -39,6 +39,26 @@
         <li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share or Embed</a></li>
         <li><pfm-favourite-button resource="::track" type="track"></pfm-favourite-button></li>
         <li ng-show="::track.permissions.edit"><a class="btn btn-default" ng-href="/tracks/{{::track.id}}-{{::track.slug}}/edit">Edit</a></li>
+
+        <md-button class="md-icon-button" aria-label="Download">
+            <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
+            <md-icon>file_download</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button" aria-label="Favourite">
+            <md-tooltip md-direction="bottom" md-delay="200">Favourite</md-tooltip>
+            <md-icon>favorite_border</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button" aria-label="Add to playlist">
+            <md-tooltip md-direction="bottom" md-delay="200">Add to playlist</md-tooltip>
+            <md-icon>playlist_add</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button" aria-label="Share or embed">
+            <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
+            <md-icon>share</md-icon>
+        </md-button>
     </ul>
 
     <header>
diff --git a/public/templates/tracks/show.html b/public/templates/tracks/show.html
index 7d70ac8d..e5602193 100644
--- a/public/templates/tracks/show.html
+++ b/public/templates/tracks/show.html
@@ -1,8 +1,6 @@
 <div class="stretch-to-bottom details-columns">
     <div class="right">
-        <a colorbox ng-href="{{track.covers.original}}" pfm-eat-click>
-            <img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal"/>
-        </a>
+        <img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal"/>
 
         <ul class="stats">
             <li>Published: <strong>{{::track.published_at}}</strong></li>
diff --git a/resources/assets/scripts/app/app.coffee b/resources/assets/scripts/app/app.coffee
index 4ad79da4..45c24b39 100644
--- a/resources/assets/scripts/app/app.coffee
+++ b/resources/assets/scripts/app/app.coffee
@@ -33,7 +33,6 @@ require 'angular-ui-router'
 require 'angular-material'
 require '../base/angular-ui-sortable'
 require '../base/angularytics'
-require '../base/jquery.colorbox'
 require '../base/jquery.cookie'
 require '../base/jquery.timeago'
 require 'script!../base/marked'
diff --git a/resources/assets/scripts/app/controllers/application.coffee b/resources/assets/scripts/app/controllers/application.coffee
index b6bcf593..abffba85 100644
--- a/resources/assets/scripts/app/controllers/application.coffee
+++ b/resources/assets/scripts/app/controllers/application.coffee
@@ -15,8 +15,8 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "application", [
-    '$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications'
-    ($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications) ->
+    '$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists', 'notifications', '$timeout'
+    ($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists, notifications, $timeout) ->
         $scope.auth = auth.data
         $scope.$state = $state
         $scope.$stateParams = $stateParams
@@ -25,6 +25,8 @@ module.exports = angular.module('ponyfm').controller "application", [
         $scope.nCount = 0
         $scope.nCountFormatted = '0'
         $scope.isPlaying = false
+        $scope.hideLoading = false
+        $scope.loading = true
         $loadingElement = null
         loadingStateName = null
 
@@ -84,6 +86,7 @@ module.exports = angular.module('ponyfm').controller "application", [
             window.setTimeout (-> window.handleResize()), 0
 
             $scope.loading = false
+            $scope.hideLoading = true
 
         $scope.stateIncludes = (state) ->
             if $loadingElement
@@ -128,7 +131,15 @@ module.exports = angular.module('ponyfm').controller "application", [
             oldParts = oldState.name.split '.'
             zipped = _.zip(newParts, oldParts)
 
-            $scope.loading = true;
+            $scope.loading = true
+
+            # Don't show the loading bar until 400ms has passed
+            # Avoids flickering on fast connections while still
+            # providing feedback to users on slow connections
+            $timeout(() ->
+                if $scope.loading
+                    $scope.hideLoading = false
+            , 400)
 
             stateToInject = angular.copy newState
             stateToInject.params = newParams
diff --git a/resources/assets/scripts/app/controllers/sidebar.coffee b/resources/assets/scripts/app/controllers/sidebar.coffee
index 11636f19..55a29793 100644
--- a/resources/assets/scripts/app/controllers/sidebar.coffee
+++ b/resources/assets/scripts/app/controllers/sidebar.coffee
@@ -15,8 +15,8 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "sidebar", [
-    '$scope', '$modal', 'playlists', '$rootScope', '$timeout'
-    ($scope, $modal, playlists, $rootScope, $timeout) ->
+    '$scope', '$modal', 'playlists', '$rootScope', '$timeout', '$mdDialog', '$mdMedia'
+    ($scope, $modal, playlists, $rootScope, $timeout, $mdDialog, $mdMedia) ->
         $scope.playlists = playlists.pinnedPlaylists
         $scope.menuVisible = false
         $scope.menuActive = false
@@ -36,10 +36,7 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
 
         $rootScope.$on('sidebarHide', () ->
             $timeout(() ->
-                $scope.navStyle.transform = ''
-                $scope.menuAnimated = true
-                $scope.menuVisible = false
-                $scope.menuActive = false
+                hideNav()
             )
         )
 
@@ -77,69 +74,18 @@ module.exports = angular.module('ponyfm').controller "sidebar", [
             playlists.deletePlaylist playlist
 
         $scope.showCredits = () ->
-            $modal
+            useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen
+            $mdDialog.show
                 templateUrl: '/templates/partials/credits-dialog.html'
                 controller: 'credits',
-                show: true
+                clickOutsideToClose: true,
+                fullscreen: useFullScreen
 
-        # Swipable side nav code
-        startX = 0
-        currentX = 0
-        touchingNav = false
-
-        onStart = (e) ->
-
-            if !$scope.menuVisible
-                return
-
-            startX = e.touches[0].pageX
-            currentX = startX
-            touchingNav = true
-            $scope.menuAnimated = false
-            requestAnimationFrame(update)
-
-        onMove = (e) ->
-            if !touchingNav
-                return
-
-            currentX = e.touches[0].pageX
-            translateX = Math.min(0, currentX - startX)
-
-            if translateX < 0
-                e.preventDefault()
-
-        onEnd = (e) ->
-            if !touchingNav
-                return
-
-            touchingNav = false
-            translateX = Math.min(0, currentX - startX)
-            $scope.menuAnimated = true
-
-            if translateX < 0
-                hideNav()
+            hideNav()
 
         hideNav = () ->
             $scope.navStyle.transform = ''
             $scope.menuAnimated = true
             $scope.menuVisible = false
             $scope.menuActive = false
-            $scope.$apply()
-
-        update = () ->
-            if !touchingNav
-                return
-
-            requestAnimationFrame(update)
-
-            translateX = 170 + Math.min(0, currentX - startX)
-            $scope.navStyle.transform = 'translateX(' + translateX + 'px)'
-            $scope.$apply()
-
-        addEventListeners = () ->
-            document.addEventListener('touchstart', onStart)
-            document.addEventListener('touchmove', onMove)
-            document.addEventListener('touchend', onEnd)
-
-        addEventListeners()
 ]
diff --git a/resources/assets/scripts/app/directives/share-buttons.coffee b/resources/assets/scripts/app/directives/share-buttons.coffee
index 6b40f4a2..830ef1fc 100644
--- a/resources/assets/scripts/app/directives/share-buttons.coffee
+++ b/resources/assets/scripts/app/directives/share-buttons.coffee
@@ -16,7 +16,7 @@
 
 module.exports = angular.module('ponyfm').directive 'pfmShareButtons', () ->
     (scope, element) ->
-        window.setTimeout((->
-            Tumblr.activate_share_on_tumblr_buttons()
-            FB.XFBML.parse(null, -> element.addClass('loaded'))
-        ), 0)
+        #window.setTimeout((->
+        #    Tumblr.activate_share_on_tumblr_buttons()
+        #    FB.XFBML.parse(null, -> element.addClass('loaded'))
+        #), 0)
diff --git a/resources/assets/scripts/app/services/color.coffee b/resources/assets/scripts/app/services/color.coffee
index 4473c788..f1076444 100644
--- a/resources/assets/scripts/app/services/color.coffee
+++ b/resources/assets/scripts/app/services/color.coffee
@@ -31,19 +31,30 @@ module.exports = angular.module('ponyfm').factory('color', [
                 b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6])
                 return [r,g,b]
 
-            dimColor: (colour) ->
+            dimColor: (colour, alt) ->
                 hsl = self.rgbToHsl(self.hexToRgb(colour))
+                altHsl = self.rgbToHsl(self.hexToRgb(alt))
 
                 if hsl[2] >= 50
                     hsl[2] = 50
                     if hsl[1] <= 20
                         hsl[1] = 30
                     return self.hslToRgb(hsl)
-                else
-                    return self.hexToRgb(colour)
+
+                if hsl[2] <= 20
+                    if altHsl[2] <= 50
+                        hsl = altHsl
+                        hsl[2] = 20
+                    else
+                        if hsl[1] <= 25
+                            hsl[0] = altHsl[0]
+                            hsl[1] = altHsl[1]
+                        hsl[2] = 20
+
+                return self.hslToRgb(hsl)
 
             createGradient: (vib, dark) ->
-                'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark)) + ' 95%)'
+                'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark, vib)) + ' 95%)'
 
             findHighestSaturation: (hsl1, hsl2) ->
                 if hsl1[1] > hsl2[1]
diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less
index d8f4924b..9cd7d7f7 100644
--- a/resources/assets/styles/content.less
+++ b/resources/assets/styles/content.less
@@ -566,6 +566,10 @@ html {
   }
 }
 
+.loading .notification-menu md-icon {
+  display: none;
+}
+
 .notification-menu {
   float: right;
   margin-top: 9px;
@@ -575,12 +579,9 @@ html {
   top: 0;
   right: 60px;
 
-  a {
+  .md-button .material-icons {
     color: #fff;
-
-    i {
-      font-size: 30px;
-    }
+    font-size: 30px;
 
     &:hover {
       color: #eee;
@@ -698,7 +699,7 @@ form.thin md-input-container {
   margin: 15px 0 0 0;
 }
 
-md-card.album {
+md-card.album, md-card.user {
   md-card-content {
     padding: 4px 12px;
     span {
@@ -718,6 +719,15 @@ md-card.album {
       min-height: 16px;
     }
   }
+
+  .user-info {
+    margin: 0 12px 8px;
+
+    span {
+      margin: 0;
+      font-size: 12px;
+    }
+  }
 }
 
 .button-bar {
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 24145671..4d8fa3be 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -344,7 +344,7 @@
     right: 60px !important;
     font-size: 22px;
     margin-right: 0 !important;
-    margin-top: 12px !important;
+    margin-top: 8px !important;
 
     a {
       padding: 13px 7px 22px;
diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php
index f40d32f8..0f70c955 100644
--- a/resources/views/shared/_app_layout.blade.php
+++ b/resources/views/shared/_app_layout.blade.php
@@ -63,12 +63,11 @@
                     </md-menu>
                 </div>
                 <div class="notification-menu">
-                    <a href="#" ng-click="notifPulloutToggle()"><i class="material-icons">notifications</i></a>
+                    <md-button ng-click="notifPulloutToggle()" class="md-icon-button"><md-icon>notifications</md-icon></md-button>
                     <div class="counter" ng-class="{'show': nCount > 0}">@{{ nCountFormatted }}</div>
                 </div>
             @endif
-            <a href="#" ng-click="toggleSearchBar()" class="search-button"><i class="material-icons">search</i></a>
-            <md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="!loading"></md-progress-linear>
+            <md-progress-linear md-mode="indeterminate" class="loader" ng-disabled="hideLoading"></md-progress-linear>
         </div>
         <div class="now-playing" ng-class="{'playing': isPlaying}">
             <pfm-player></pfm-player>