Update to user profiles

public/templates/account/album.html

@@ -44,7 +44,7 @@
                 <li ng-repeat="track in tracks track by track.id">
                     <div>
                         <span class="btn btn-sm pull-left handle"><i class="material-icons">swap_vert</i></span>
-                        <a href="#" class="btn btn-sm pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="material-icons">reorder</i></a>
+                        <a href="#" class="btn btn-sm pull-right btn-danger" ng-click="toggleTrack(track)" pfm-eat-click><i class="material-icons">delete</i></a>
                         <span>{{::track.title}}</span>
                     </div>
                 </li>

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()

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]

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

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;
 

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;