From 5dc23d916de06ee3930142422932f40ecf8d5c08 Mon Sep 17 00:00:00 2001 From: Josef Citrine Date: Sun, 7 Aug 2016 14:35:34 +0100 Subject: [PATCH] New track page, fixed lyric bug --- gulpfile.js | 2 +- package.json | 3 +- public/templates/directives/albums-list.html | 4 +- public/templates/directives/track-player.html | 11 +- public/templates/tracks/frame.html | 112 +++++++++--------- public/templates/tracks/show.html | 44 ++++--- .../scripts/app/controllers/track.coffee | 5 +- resources/assets/scripts/shared/layout.coffee | 10 +- resources/assets/styles/body.less | 9 +- .../assets/styles/components/components.less | 1 + resources/assets/styles/content.less | 68 +++++++++-- resources/assets/styles/layout.less | 11 +- resources/assets/styles/mobile.less | 22 +++- 13 files changed, 201 insertions(+), 101 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index f71621a9..0643a81e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -98,7 +98,7 @@ gulp.task("styles-app", function () { if (!styleCache.hasOwnProperty(file)) continue; - if (!endsWith(file, "app.less")) + if (!endsWith(file, "app.less") && !endsWith(file, "angular-material.css")) continue; delete styleCache[file]; diff --git a/package.json b/package.json index 4b378f9b..f6ff291d 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "gulp-autoprefixer": "3.1.0", "gulp-cached": "1.1.0", "gulp-clean-css": "2.0.10", - "gulp-concat": "2.6.0", + "gulp-concat": "^2.6.0", "gulp-header": "1.8.2", "gulp-if": "2.0.1", "gulp-less": "3.1.0", @@ -36,6 +36,7 @@ "gulp-util": "3.0.7", "jquery": "2.2.0", "jquery-ui": "1.10.5", + "merge-stream": "^1.0.0", "script-loader": "0.7.0", "underscore": "1.8.3", "webpack": "1.13.1", diff --git a/public/templates/directives/albums-list.html b/public/templates/directives/albums-list.html index 4eb43183..619d9352 100644 --- a/public/templates/directives/albums-list.html +++ b/public/templates/directives/albums-list.html @@ -1,5 +1,5 @@ -
- +
+ diff --git a/public/templates/directives/track-player.html b/public/templates/directives/track-player.html index 2c952e5b..a3e41880 100644 --- a/public/templates/directives/track-player.html +++ b/public/templates/directives/track-player.html @@ -1,9 +1,6 @@
- -
- play_arrow - pause -
- - + + play_arrow + pause +
diff --git a/public/templates/tracks/frame.html b/public/templates/tracks/frame.html index 56c4912b..d09abefc 100644 --- a/public/templates/tracks/frame.html +++ b/public/templates/tracks/frame.html @@ -1,67 +1,65 @@
-
- - - Download - file_download - - - - - - {{::format.name}} ({{::format.size}}) + +
+
+ +
+
+

{{track.title}}

+

From: {{::track.album.title}}

+

By: {{::track.user.name}}

+
+
+ + + Download + file_download - - {{::format.name}} ({{::format.size}}) + + + + + {{::format.name}} ({{::format.size}}) + + + {{::format.name}} ({{::format.size}}) + + + + + + + + + + Add to playlist + playlist_add - - - - + + + + {{::playlist.title}} + {{playlist.message}} + + + + - - - Add to playlist - playlist_add - + + Share or embed + share + - - - - {{::playlist.title}} - {{playlist.message}} - - - - - - - Share or embed - share - - - - Edit - edit - -
- -
- -

{{track.title}}

-

- - from: {{::track.album.title}} - - - by: {{::track.user.name}} -

+ + Edit + edit + +
+
- -
diff --git a/public/templates/tracks/show.html b/public/templates/tracks/show.html index e5602193..93253552 100644 --- a/public/templates/tracks/show.html +++ b/public/templates/tracks/show.html @@ -1,17 +1,31 @@ -
-
- +
+
+
+

Released on {{::track.readableDate}}

+

+ + | + + | + + | + + +

+
-
    -
  • Published: {{::track.published_at}}
    • -
  • Views: {{::track.stats.views}}
    • -
  • Plays: {{::track.stats.plays}}
    • -
  • Downloads: {{::track.stats.downloads}}
    • -
  • Favourites: {{::track.stats.favourites}}
    • -
  • View more stats
    • -
-
-

Description

@@ -20,13 +34,15 @@

Lyrics

-
+
Click to reveal full lyrics…

+
+
diff --git a/resources/assets/scripts/app/controllers/track.coffee b/resources/assets/scripts/app/controllers/track.coffee index 56a1b53c..cf7ef57e 100644 --- a/resources/assets/scripts/app/controllers/track.coffee +++ b/resources/assets/scripts/app/controllers/track.coffee @@ -19,10 +19,12 @@ module.exports = angular.module('ponyfm').controller "track", [ ($scope, meta, tracks, $state, playlists, auth, favourites, $modal, cachedTrack, $window, $timeout, $mdDialog) -> $scope.track $scope.trackId = parseInt($state.params.id) - updateTrackData = (forceUpdate = false) -> tracks.fetch($scope.trackId, forceUpdate).done (trackResponse) -> $scope.track = trackResponse.track + console.log(moment($scope.track.published_at)) + $scope.track.readableDate = moment($scope.track.published_at).format("Do MMM YYYY") + meta.setTitle("#{$scope.track.title} | #{$scope.track.user.name}") meta.setDescription("Listen to \"#{$scope.track.title}\" by #{$scope.track.user.name} on the largest pony music site.") @@ -63,7 +65,6 @@ module.exports = angular.module('ponyfm').controller "track", [ ).then (() -> return ), -> - console.log $state.current $scope.$apply() $scope.addToNewPlaylist = () -> diff --git a/resources/assets/scripts/shared/layout.coffee b/resources/assets/scripts/shared/layout.coffee index 4b706617..08a06633 100644 --- a/resources/assets/scripts/shared/layout.coffee +++ b/resources/assets/scripts/shared/layout.coffee @@ -33,7 +33,7 @@ window.handleResize = () -> $this.css 'max-height': newMaxHeight - $('ui-view').each () -> + $('.site-content').each () -> $this = $ this newHeight = windowHeight - $this.offset().top if isMobile @@ -55,6 +55,14 @@ window.handleResize = () -> $this.css {height: 'auto'} $(this).fadeOut 200 + $('.blurred-background').each () -> + $this = $ this + $this.height $('.resource-details header').height() + 55 + + $('.resource-details .single-player button').each () -> + $this = $ this + $this.css 'top', $('.resource-details header').height() + 5 + window.alignVertically = (element) -> $element = $(element) $parent = $element.parent() diff --git a/resources/assets/styles/body.less b/resources/assets/styles/body.less index 66e3fb6a..80694174 100644 --- a/resources/assets/styles/body.less +++ b/resources/assets/styles/body.less @@ -36,6 +36,12 @@ a { .site-content{ .box-sizing(border-box); padding: 10px; + overflow-y: auto; + overflow-x: hidden; + + > ui-view { + margin-bottom: 20px; + } h1, h2 { margin: 1px 1px 5px; @@ -105,7 +111,7 @@ a { left: -1px; width: 100%; height: 100%; - z-index: 400; + z-index: 10; border: 2px solid #fff; cursor: pointer; @@ -178,6 +184,7 @@ a { input[type=text] { margin: 0px; padding: 5px; + width: 100%; } } diff --git a/resources/assets/styles/components/components.less b/resources/assets/styles/components/components.less index a2b943dd..e9ec4c1a 100644 --- a/resources/assets/styles/components/components.less +++ b/resources/assets/styles/components/components.less @@ -22,6 +22,7 @@ .stretch-to-bottom { overflow-y: auto; + overflow-x: hidden; } .dropdowns { diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less index 9cd7d7f7..68c4c67a 100644 --- a/resources/assets/styles/content.less +++ b/resources/assets/styles/content.less @@ -150,10 +150,52 @@ } .resource-details { - &.track-details { + .info { + margin-left: 15px; + } + + &.track-details, &.album-details, &.playlist-details { > header { - h2, h1 { - margin-left: 47px; + margin: -10px -10px 20px; + padding: 20px; + background: transparent; + box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,0.3); + position: relative; + + .blurred-background { + width: 100%; + height: 250px; + -webkit-filter: blur(30px) brightness(0.8); + filter: blur(15px) brightness(0.75); + z-index: -1; + top: 0; + left: 0; + overflow: hidden; + background-color: #a2a2a2; + background-position: left center; + background-size: 50%; + position: absolute; + } + + h1, h2, .buttons md-icon, a { + color: #fff; + text-shadow: 0 1px 5px black; + } + + img { + width: 200px; + height: 200px; + background: #fff; + .material-shadow(2); + } + + h1 { + font-size: 28px; + } + + h2 { + margin-top: 2px; + font-size: 16px; } } } @@ -227,7 +269,6 @@ > header { padding: 5px; - background: #eee; overflow: hidden; margin-bottom: 10px; @@ -349,12 +390,23 @@ html .single-player .play-button { display: block; } -.single-player, .tracks-listing li .image { - float: left; - width: @icon-size; - height: @icon-size; +.single-player { position: relative; + button { + position: absolute; + top: 270px; + right: 0; + } +} +.tracks-listing li .image { + float: left; + position: relative; + width: 43px; + height: 43px; +} + +.single-player, .tracks-listing li .image { .button-container { display: table; width: 100%; diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less index f9984e47..ece06d74 100644 --- a/resources/assets/styles/layout.less +++ b/resources/assets/styles/layout.less @@ -20,12 +20,13 @@ @import 'mixins'; @import 'variables'; -html body { +html, body { height: 100%; - background: #fff; + background: transparent; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 0px !important; overflow: hidden; + overflow-y: hidden !important; position: initial !important; } @@ -117,7 +118,7 @@ header { padding-left: 6px; width: 100%; max-width: 94%; - padding-top: 13px; + padding-top: 16px; } } @@ -247,7 +248,7 @@ header { .site-content { overflow: hidden; margin-left: @pfm-sidebar-size; - background: #fff; + background: transparent; height: 100%; z-index: 100; } @@ -376,8 +377,6 @@ md-backdrop { } .buttons { - margin-bottom: 10px; - .md-menu { padding: 0; } diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less index f89758b9..027e0e57 100644 --- a/resources/assets/styles/mobile.less +++ b/resources/assets/styles/mobile.less @@ -13,7 +13,6 @@ .site-content { margin-left: 0px; - overflow: scroll; padding: 5px; } @@ -437,6 +436,27 @@ .modal-dialog { width: 95%; } + + .resource-details { + &.track-details, &.album-details, &.playlist-details { + > header { + img { + margin-left: auto; + margin-right: auto; + } + } + } + + .info { + margin-left: 0; + margin-top: 15px; + text-align: center; + } + + .buttons { + margin-top: 15px; + } + } } // Super small phones like the iPhone 5