From b586c31a77f533f0e1d79a25d60a4dc98c77e327 Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Sun, 7 Aug 2016 15:22:49 +0100
Subject: [PATCH] Updated album and playlist pages

---
 public/templates/albums/show.html             | 70 +++++++++++--------
 public/templates/directives/comments.html     | 16 ++---
 .../partials/album-share-dialog.html          | 28 ++++----
 .../partials/playlist-share-dialog.html       | 11 ++-
 public/templates/playlists/show.html          | 64 +++++++++--------
 public/templates/tracks/frame.html            |  4 +-
 .../scripts/app/controllers/album.coffee      | 17 +++--
 .../scripts/app/controllers/playlist.coffee   | 21 ++++--
 .../scripts/app/controllers/track.coffee      |  4 +-
 resources/assets/styles/body.less             |  4 ++
 resources/assets/styles/mobile.less           |  2 +-
 11 files changed, 136 insertions(+), 105 deletions(-)

diff --git a/public/templates/albums/show.html b/public/templates/albums/show.html
index f8c68d9f..63d08e42 100644
--- a/public/templates/albums/show.html
+++ b/public/templates/albums/show.html
@@ -1,34 +1,46 @@
 <div class="resource-details album-details">
-    <ul class="dropdowns">
-        <li class="dropdown">
-            <a href="#" class="btn btn-sm btn-primary dropdown-toggle" bs-dropdown ng-disabled="album.is_downloadable == 0" auto-close="outsideClick">
-                Downloads
-            </a>
-            <ul class="dropdown-menu" ng-show="::album.is_downloadable == 1">
-                <li ng-repeat="format in ::album.formats" ng-hide="isInProgress">
-                    <a target="_blank" ng-if="::!format.isCacheable" ng-click="checkMixedLosslessness(format);" ng-href="{{::format.url}}">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                    <a ng-if="::format.isCacheable" ng-click="getCachedAlbum(album.id, format);" href="">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                </li>
-                <li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li>
-                <li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This may take a few minutes.</small></li>
-            </ul>
-        </li>
-        <li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share</a></li>
-        <li><pfm-favourite-button resource="::album" type="album"></pfm-favourite-button></li>
-        <li ng-if="::album.permissions.edit"><a class="btn btn-default btn-sm" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">Edit</a></li>
-    </ul>
+    <header layout="row" layout-xs="column">
+        <div class="blurred-background" style="background-image: url('{{album.covers.normal}}');"></div>
+        <div layout="row" layout-xs="column" flex>
+            <div flex="50" flex-xs="100" class="info">
+                <h1>{{::album.title}}</h1>
+                <h2>
+                    by: <a ng-href="{{::album.user.url}}">{{::album.user.name}}</a>
+                </h2>
+            </div>
 
-    <header>
-        <h1>{{::album.title}}</h1>
-        <h2>
-            by: <a ng-href="{{::album.user.url}}">{{::album.user.name}}</a>
-        </h2>
+            <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
+                <md-menu>
+                    <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)" ng-hide="album.is_downloadable == 0">
+                        <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
+                        <md-icon>file_download</md-icon>
+                    </md-button>
+
+                    <md-menu-content>
+                        <md-menu-item ng-repeat="format in ::album.formats" ng-hide="isInProgress">
+                            <md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
+                                {{::format.name}} ({{::format.size}})
+                            </md-button>
+                            <md-button ng-if="format.isCacheable" ng-click="getCachedAlbum(album.id, format);" href="">
+                                {{::format.name}} ({{::format.size}})
+                            </md-button>
+                        </md-menu-item>
+                    </md-menu-content>
+                </md-menu>
+
+                <pfm-favourite-button resource="::album" type="album"></pfm-favourite-button>
+
+                <md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
+                    <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
+                    <md-icon>share</md-icon>
+                </md-button>
+
+                <md-button class="md-icon-button" aria-label="Edit" ng-show="::album.permissions.edit" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">
+                    <md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
+                    <md-icon>edit</md-icon>
+                </md-button>
+            </div>
+        </div>
     </header>
 
     <div class="stretch-to-bottom details-columns">
diff --git a/public/templates/directives/comments.html b/public/templates/directives/comments.html
index d2b728e7..5ec2de5d 100644
--- a/public/templates/directives/comments.html
+++ b/public/templates/directives/comments.html
@@ -5,17 +5,17 @@
             <input type="text" ng-model="content" placeholder="Write a comment&hellip;" />
         </div>
     </form>
-    <ul>
+    <md-list>
         <li ng-show="resource.comments.length == 0" class="empty">
             There are no comments yet!
         </li>
-        <li ng-repeat="comment in resource.comments track by comment.id">
-            <img pfm-src-loader="::comment.user.avatars.thumbnail" pfm-src-size="thumbnail" />
-            <div class="content">
+        <md-list-item ng-repeat="comment in resource.comments track by comment.id" class="md-3-line">
+            <img pfm-src-loader="::comment.user.avatars.thumbnail" class="md-avatar" alt="::comment.user.name" pfm-src-size="thumbnail" />
+            <div class="md-list-item-text">
                 <a ng-href="{{::comment.user.url}}">{{::comment.user.name}}</a>
-                <span marked="comment.content"></span>
-                <div class="meta">{{::comment.created_at.date | momentFromNow}}</div>
+                <h4>{{::comment.content}}</h4>
+                <p>{{::comment.created_at.date | momentFromNow}}</p>
             </div>
-        </li>
-    </ul>
+        </md-list-item>
+    </md-list>
 </div>
diff --git a/public/templates/partials/album-share-dialog.html b/public/templates/partials/album-share-dialog.html
index abba2023..e5c589a0 100644
--- a/public/templates/partials/album-share-dialog.html
+++ b/public/templates/partials/album-share-dialog.html
@@ -1,17 +1,13 @@
-<div class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" ng-click="$hide()">&times;</button>
-                <h4 class="modal-title">{{ album.title }}</h4>
-            </div>
-            <div class="modal-body">
-                <h4>Shortlink</h4>
-                <input type="text" ng-model="album.share.url" />
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-flat btn-primary" ng-click="$hide()">Close</button>
-            </div>
+<md-dialog ng-cloak class="modal-dialog">
+    <md-dialog-content>
+        <div class="modal-body">
+            <h2>Share '{{album.title}}'</h2>
+
+            <h5>Shortlink</h5>
+            <input type="text" ng-model="album.share.url" />
         </div>
-    </div>
-</div>
+    </md-dialog-content>
+    <md-dialog-actions layout="row">
+        <md-button ng-click="closeDialog()" class="md-primary">Close</md-button>
+    </md-dialog-actions>
+</md-dialog>
diff --git a/public/templates/partials/playlist-share-dialog.html b/public/templates/partials/playlist-share-dialog.html
index 12ed5fac..606690c8 100644
--- a/public/templates/partials/playlist-share-dialog.html
+++ b/public/templates/partials/playlist-share-dialog.html
@@ -1,12 +1,9 @@
-<md-dialog ng-cloak>
+<md-dialog ng-cloak class="modal-dialog">
     <md-dialog-content>
-        <div class="modal-header">
-            <h4>
-                {{playlist.title}}
-            </h4>
-        </div>
         <div class="modal-body">
-            <h2>Shortlink</h2>
+            <h2>{{playlist.title}}</h2>
+
+            <h5>Shortlink</h5>
             <input type="text" ng-model="playlist.share.url" />
         </div>
     </md-dialog-content>
diff --git a/public/templates/playlists/show.html b/public/templates/playlists/show.html
index a73b0f64..b9684094 100644
--- a/public/templates/playlists/show.html
+++ b/public/templates/playlists/show.html
@@ -1,33 +1,41 @@
 <div class="resource-details playlist-details">
-    <ul class="dropdowns">
-        <li class="dropdown">
-            <a href="#" class="btn btn-sm btn-primary dropdown-toggle" bs-dropdown auto-close="outsideClick">
-                Downloads
-            </a>
-            <ul class="dropdown-menu">
-                <li ng-repeat="format in ::playlist.formats" ng-hide="isInProgress">
-                    <a target="_blank" ng-if="::!format.isCacheable" ng-click="checkMixedLosslessness(format);" ng-href="{{::format.url}}">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                    <a ng-if="::format.isCacheable" ng-click="getCachedPlaylist(playlist.id, format);" href="">
-                        <span>{{::format.name}}</span>
-                        <small>({{::format.size}})</small>
-                    </a>
-                </li>
-                <li ng-show="isInProgress" class="cache-loading"><img src="/images/loading.gif" /></li>
-                <li ng-show="isInProgress" class="cache-loading"><small>We&#39;re getting your download ready! This may take a few minutes.</small></li>
-            </ul>
-        </li>
-        <li><a href="#" class="btn btn-default" pfm-eat-click ng-click="share()">Share</a></li>
-        <li><pfm-favourite-button resource="::playlist" type="playlist"></pfm-favourite-button></li>
-    </ul>
+    <header layout="row" layout-xs="column">
+        <div class="blurred-background" style="background-image: url('{{playlist.covers.normal}}');"></div>
+        <div layout="row" layout-xs="column" flex>
+            <div flex="50" flex-xs="100" class="info">
+                <h1>{{::playlist.title}}</h1>
+                <h2>
+                    curated by: <a ng-href="{{::playlist.user.url}}">{{::playlist.user.name}}</a>
+                </h2>
+            </div>
 
-    <header>
-        <h1>{{::playlist.title}}</h1>
-        <h2>
-            curated by: <a ng-href="{{::playlist.user.url}}">{{::playlist.user.name}}</a>
-        </h2>
+            <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
+                <md-menu>
+                    <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
+                        <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
+                        <md-icon>file_download</md-icon>
+                    </md-button>
+
+                    <md-menu-content>
+                        <md-menu-item ng-repeat="format in ::playlist.formats" ng-hide="isInProgress">
+                            <md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
+                                {{::format.name}} ({{::format.size}})
+                            </md-button>
+                            <md-button ng-if="format.isCacheable" ng-click="getCachedPlaylist(playlist.id, format);" href="">
+                                {{::format.name}} ({{::format.size}})
+                            </md-button>
+                        </md-menu-item>
+                    </md-menu-content>
+                </md-menu>
+
+                <pfm-favourite-button resource="::playlist" type="playlist"></pfm-favourite-button>
+
+                <md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
+                    <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
+                    <md-icon>share</md-icon>
+                </md-button>
+            </div>
+        </div>
     </header>
 
     <div class="stretch-to-bottom details-columns">
diff --git a/public/templates/tracks/frame.html b/public/templates/tracks/frame.html
index d09abefc..c0240ba3 100644
--- a/public/templates/tracks/frame.html
+++ b/public/templates/tracks/frame.html
@@ -1,5 +1,5 @@
 <div class="resource-details track-details">
-    <pfm-track-player track="::track"></pfm-track-player>    
+    <pfm-track-player track="::track"></pfm-track-player>
     <header layout="row" layout-xs="column">
         <div class="blurred-background" style="background-image: url('{{track.covers.normal}}');"></div>
         <img class="cover" pfm-src-loader="track.covers.normal" pfm-src-size="normal" />
@@ -11,7 +11,7 @@
             </div>
             <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
                 <md-menu>
-                    <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)">
+                    <md-button class="md-icon-button" aria-label="Download" ng-hide="track.is_downloadable == 0" ng-click="$mdOpenMenu($event)">
                         <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
                         <md-icon>file_download</md-icon>
                     </md-button>
diff --git a/resources/assets/scripts/app/controllers/album.coffee b/resources/assets/scripts/app/controllers/album.coffee
index fd979cc3..95b11891 100644
--- a/resources/assets/scripts/app/controllers/album.coffee
+++ b/resources/assets/scripts/app/controllers/album.coffee
@@ -21,8 +21,8 @@ window.pfm.preloaders['album'] = [
 ]
 
 module.exports = angular.module('ponyfm').controller "album", [
-    '$scope', 'meta', 'albums', '$state', 'playlists', 'auth', '$modal', 'download-cached', '$window', '$timeout'
-    ($scope, meta, albums, $state, playlists, auth, $modal, cachedAlbum, $window, $timeout) ->
+    '$scope', 'meta', 'albums', '$state', 'playlists', 'auth', '$mdDialog', 'download-cached', '$window', '$timeout'
+    ($scope, meta, albums, $state, playlists, auth, $mdDialog, cachedAlbum, $window, $timeout) ->
         album = null
 
         albums.fetch($state.params.id).done (albumResponse) ->
@@ -33,11 +33,18 @@ module.exports = angular.module('ponyfm').controller "album", [
 
         $scope.playlists = []
 
-        $scope.share = () ->
-            dialog = $modal
+        $scope.share = (ev) ->
+            $mdDialog.show(
                 templateUrl: '/templates/partials/album-share-dialog.html',
                 scope: $scope,
-                show: true
+                clickOutsideToClose: true,
+                controller: ($scope, $mdDialog) ->
+                    $scope.closeDialog = ->
+                        $mdDialog.cancel()
+            ).then (() ->
+                return
+            ), ->
+                $scope.$apply()
 
         if auth.data.isLogged
             playlists.refreshOwned().done (lists) ->
diff --git a/resources/assets/scripts/app/controllers/playlist.coffee b/resources/assets/scripts/app/controllers/playlist.coffee
index da2fb71f..52a07b47 100644
--- a/resources/assets/scripts/app/controllers/playlist.coffee
+++ b/resources/assets/scripts/app/controllers/playlist.coffee
@@ -21,8 +21,8 @@ window.pfm.preloaders['playlist'] = [
 ]
 
 module.exports = angular.module('ponyfm').controller 'playlist', [
-    '$scope', 'meta', '$state', 'playlists', '$modal', 'download-cached', '$window', '$timeout'
-    ($scope, meta, $state, playlists, $modal, cachedPlaylist, $window, $timeout) ->
+    '$scope', 'meta', '$state', 'playlists', '$mdDialog', 'download-cached', '$window', '$timeout'
+    ($scope, meta, $state, playlists, $mdDialog, cachedPlaylist, $window, $timeout) ->
         playlist = null
 
         playlists.fetch($state.params.id).done (playlistResponse) ->
@@ -31,18 +31,25 @@ module.exports = angular.module('ponyfm').controller 'playlist', [
             meta.setTitle("#{playlist.title} | #{playlist.user.name}")
             meta.setDescription("Listen to \"#{playlist.title}\", a playlist by #{playlist.user.name}, on the largest pony music site.")
 
-        $scope.share = () ->
-            dialog = $modal
+        $scope.share = (ev) ->
+            $mdDialog.show(
                 templateUrl: '/templates/partials/playlist-share-dialog.html',
-                controller: ['$scope', ($scope) -> $scope.playlist = playlist; $scope.close = () -> dialog.close()],
-                show: true
+                scope: $scope,
+                clickOutsideToClose: true,
+                controller: ($scope, $mdDialog) ->
+                    $scope.closeDialog = ->
+                        $mdDialog.cancel()
+            ).then (() ->
+                return
+            ), ->
+                $scope.$apply()
 
         $scope.checkMixedLosslessness = (format) ->
             if format.isMixedLosslessness == true
                 $scope.format = format
                 $modal({scope: $scope, templateUrl: 'templates/partials/collection-mixed-losslessness-dialog.html', show: true})
 
-            
+
         $scope.getCachedPlaylist = (id, format) ->
             $scope.isInProgress = true
 
diff --git a/resources/assets/scripts/app/controllers/track.coffee b/resources/assets/scripts/app/controllers/track.coffee
index cf7ef57e..2a6bf054 100644
--- a/resources/assets/scripts/app/controllers/track.coffee
+++ b/resources/assets/scripts/app/controllers/track.coffee
@@ -15,8 +15,8 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 module.exports = angular.module('ponyfm').controller "track", [
-    '$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$modal', 'download-cached', '$window', '$timeout', '$mdDialog'
-    ($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) ->
+    '$scope', 'meta', 'tracks', '$state', 'playlists', 'auth', 'favourites', 'download-cached', '$window', '$timeout', '$mdDialog'
+    ($scope, meta, tracks, $state, playlists, auth, favourites, cachedTrack, $window, $timeout, $mdDialog) ->
         $scope.track
         $scope.trackId = parseInt($state.params.id)
         updateTrackData = (forceUpdate = false) ->
diff --git a/resources/assets/styles/body.less b/resources/assets/styles/body.less
index 80694174..0423621e 100644
--- a/resources/assets/styles/body.less
+++ b/resources/assets/styles/body.less
@@ -136,6 +136,10 @@ a {
 }
 
 .details-columns {
+  .flex-50 {
+    margin: 0 10px;
+  }
+
   .left {
     margin-right: 310px;
     margin-left: 5px;
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index 027e0e57..4c66e8dc 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -76,7 +76,7 @@
     z-index: 1011;
     height: ~"calc(100% - 64px)";
     box-shadow: 0 8px 8px rgba(0,0,0,0.5);
-    overflow-y: scroll;
+    overflow-y: auto;
 
     > a {
       display: none;