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 @@
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;