diff --git a/public/templates/account/album.html b/public/templates/account/album.html index a1758018..4e6606b6 100644 --- a/public/templates/account/album.html +++ b/public/templates/account/album.html @@ -44,7 +44,7 @@
  • swap_vert - reorder + delete {{::track.title}}
  • diff --git a/resources/assets/scripts/app/controllers/artist.coffee b/resources/assets/scripts/app/controllers/artist.coffee index 36586a2d..b7ce8221 100644 --- a/resources/assets/scripts/app/controllers/artist.coffee +++ b/resources/assets/scripts/app/controllers/artist.coffee @@ -26,11 +26,12 @@ module.exports = angular.module('ponyfm').controller "artist", [ updateArtist = (force = false) -> if force window.location.reload() - + artists.fetch($state.params.slug, force) .done (artistResponse) -> $scope.artist = artistResponse.artist - $scope.headerStyle = {'background-image': color.createGradient(artistResponse.artist.avatar_colors[0], artistResponse.artist.avatar_colors[1])} + if artistResponse.artist.avatar_colors.length > 2 + $scope.headerStyle = {'background-image': color.createGradient(artistResponse.artist.avatar_colors[0], artistResponse.artist.avatar_colors[1])} tempImg = document.createElement('img') tempImg.setAttribute 'src', artistResponse.artist.avatars.small + '?' + new Date().getTime() diff --git a/resources/assets/scripts/app/services/color.coffee b/resources/assets/scripts/app/services/color.coffee index 2a16b852..4473c788 100644 --- a/resources/assets/scripts/app/services/color.coffee +++ b/resources/assets/scripts/app/services/color.coffee @@ -43,10 +43,7 @@ module.exports = angular.module('ponyfm').factory('color', [ return self.hexToRgb(colour) createGradient: (vib, dark) -> - if $(window).width() <= 480 - 'linear-gradient(180deg, ' + vib + ' 5%, ' + self.rgbArrayToCss(self.dimColor(dark)) + ' 95%)' - else - 'linear-gradient(170deg, ' + vib + ' 15%, ' + dark + ' 110%)' + 'linear-gradient(180deg, ' + vib + ' 0%, ' + self.rgbArrayToCss(self.dimColor(dark)) + ' 95%)' findHighestSaturation: (hsl1, hsl2) -> if hsl1[1] > hsl2[1] diff --git a/resources/assets/styles/components/components.less b/resources/assets/styles/components/components.less index 6c81afb0..e72f5966 100644 --- a/resources/assets/styles/components/components.less +++ b/resources/assets/styles/components/components.less @@ -166,6 +166,31 @@ } } } + + &.header { + margin-top: -58px; + border-bottom: 0; + + li a { + color: #fff; + border-bottom: 4px solid transparent; + opacity: 0.5; + text-transform: uppercase; + text-decoration: none; + padding: 12px; + + &:hover { + background: rgba(255, 255, 255, 0.2) !important; + } + } + + li.active a { + border-bottom: 4px solid #fff; + background: transparent; + color: #fff; + opacity: 1; + } + } } ui-view { @@ -210,7 +235,7 @@ ui-view { float: left; a, button { - .border-radius(0px); + .border-radius(0px) !important; font-size: 9pt; } @@ -244,6 +269,14 @@ html body { } } + .btn-danger.btn-flat { + background: @brand-danger; + color: #fff; + &:hover { + background: lighten(@brand-danger, 15%); + } + } + .btn.btn-primary, .add-btn, .btn-success { background: @pfm-purple; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less index c16ca86d..50400782 100644 --- a/resources/assets/styles/content.less +++ b/resources/assets/styles/content.less @@ -160,9 +160,10 @@ &.artist-details { > header { + background: #aaa; background-size: cover; background-position: center; - padding: 25px; + padding: 25px 25px 60px; margin: -15px -15px 10px; > img { @@ -202,10 +203,6 @@ margin-top: -6px; } - &.x-archived { - background: #eee; - } - .albums-listing li { width: 22%; } @@ -230,7 +227,7 @@ > header { padding: 5px; - background: #ddd; + background: #eee; overflow: hidden; margin-bottom: 10px; diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less index c0aef4ae..8bc1981f 100644 --- a/resources/assets/styles/mobile.less +++ b/resources/assets/styles/mobile.less @@ -229,7 +229,7 @@ > header { margin: 0 !important; - padding: 20px 0 40px !important; + padding: 25px 25px 40px !important; > img { float: none !important; @@ -256,31 +256,6 @@ } } } - - .tabs.header { - width: 100vw; - margin-top: -44px; - margin-bottom: 10px; - - li a { - color: #fff; - border-bottom: 0; - opacity: 0.5; - text-transform: uppercase; - text-decoration: none; - - &:hover { - background: rgba(255, 255, 255, 0.2); - } - } - - li.active a { - border-bottom: 4px solid #fff; - background: transparent; - color: #fff; - opacity: 1; - } - } } .tabs li a { @@ -409,6 +384,11 @@ border-bottom: 0; height: 44px; + &.header { + height: 48px; + margin-top: -48px; + } + li { a { border-bottom: 4px solid #ddd;