Things

app/views/shared/_app_layout.blade.php

@@ -15,7 +15,7 @@
 			@else
 				<li ng-class="{selected: stateIncludes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
 			@endif
-			<li ng-class="{selected: stateIncludes('content')}">
+			<li ng-class="{selected: (stateIncludes('content') && !isPinnedPlaylistSelected)}">
 				<a href="/tracks">Discover <i class="icon-music"></i></a>
 			</li>
 
@@ -34,7 +34,7 @@
 					</h3>
 				</li>
 				<li class="none" ng-show="!playlists.length"><span>no pinned playlists</span></li>
-				<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('content.playlist') && $state.params.id == playlist.id}">
+				<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: stateIncludes('content.playlist') && $state.params.id == playlist.id}">
 					<a class="menu dropdown-toggle" pfm-eat-click href="#"><i class="icon-ellipsis-vertical"></i></a>
 					<a href="{{Helpers::angular('playlist.url')}}" ng-bind="playlist.title"></a>
 

public/scripts/app/controllers/application.coffee

@@ -1,9 +1,10 @@
 angular.module('ponyfm').controller "application", [
-	'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope'
+	'$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists'
-	($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope) ->
+	($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists) ->
 		$scope.auth = auth.data
 		$scope.$state = $state
 		$scope.$stateParams = $stateParams
+		$scope.isPinnedPlaylistSelected = false
 		$loadingElement = null
 		loadingStateName = null
 
@@ -40,6 +41,11 @@ angular.module('ponyfm').controller "application", [
 
 		statesPreloaded = {}
 		$scope.$on '$stateChangeStart', (e, newState, newParams, oldState, oldParams) ->
+			$scope.isPinnedPlaylistSelected = false
+
+			if newState.name == 'content.playlist'
+				$scope.isPinnedPlaylistSelected = playlists.isPlaylistPinned newParams.id
+
 			return if !oldState || !newState.controller
 
 			preloader = window.pfm.preloaders[newState.controller]

public/scripts/app/services/playlists.coffee

@@ -16,6 +16,9 @@ angular.module('ponyfm').factory('playlists', [
 
 				playlists[id] = def.promise()
 
+			isPlaylistPinned: (id) ->
+				_.find(self.pinnedPlaylists, (p) -> `p.id == id`) != undefined
+
 			refreshOwned: (force) ->
 				force = force || false
 				return playlistDef if !force && playlistDef

public/styles/components.less

@@ -111,11 +111,13 @@
 
 	  &:hover {
 		text-decoration: none;
+		background: #eee;
 	  }
 	}
 
 	&.active {
 	  a {
+		cursor: default;
 		background: #eee;
 		color: #000;
 		border-bottom: 4px solid @pfm-purple;

public/styles/layout.less

@@ -65,7 +65,7 @@ header {
 	&.selected {
 	  background: #fff;
 
-	  > a {
+	  > a, > a:hover {
 		cursor: default;
 		color: #000;
 	  }
@@ -113,7 +113,11 @@ header {
 	  padding: 10px 25px;
 	  padding-right: 0px;
 	  overflow: hidden;
+	  color: fadeout(#fff, 20%);
+
+	  &:hover {
 		color: #fff;
+	  }
 
 	  > i {
 		display: block;

public/styles/tracks.less

@@ -85,9 +85,10 @@
 	}
 
 	line-height: normal;
-	margin: 5px 0px;
+	padding: 5px 0px;
-	padding: 0px;
+	margin: 0px;
 	padding-right: 10px;
+	position: relative;
 
 	.icons {
 	  float: right;
@@ -127,21 +128,26 @@
 	  margin-top: 5px;
 	}
 
-	.artist, .published-at, .genre {
+	.artist, .stats, .genre, .stats-expanded {
 	  color: #777;
 	  font-size: 80%;
 	}
 
-	.published-at {
+	.stats {
 	  float: right;
+	  padding: 3px;
+
+	  strong {
+		color: darken(@pfm-purple, 25%);
+	  }
 	}
 
-	.artist, .published-at {
+	.artist, .stats {
 	  margin-top: 2px;
 	}
 
 	&:hover {
-	  background: #eee;
+	  background: #dedede;
 
 	  .image {
 		.play-button {

public/templates/content/_layout.html

@@ -1,8 +1,8 @@
 <ul class="tabs">
 	<li ng-class="{active: stateIncludes('content.tracks') || stateIncludes('content.track')}"><a href="/tracks">Tracks</a></li>
-	<li ng-class="{active: stateIncludes('content.artists') || stateIncludes('content.artist')}"><a href="/artists">Artists</a></li>
 	<li ng-class="{active: stateIncludes('content.albums') || stateIncludes('content.album')}"><a href="/albums">Albums</a></li>
 	<li ng-class="{active: stateIncludes('content.playlists') || stateIncludes('content.playlist')}"><a href="/playlists">Playlists</a></li>
+	<li ng-class="{active: stateIncludes('content.artists') || stateIncludes('content.artist')}"><a href="/artists">Artists</a></li>
 </ul>
 
 <ui-view></ui-view>

public/templates/directives/tracks-list.html

@@ -13,7 +13,7 @@
 		</div>
 		<a class="info" href="{{track.url}}">
 			<span class="title">{{track.title}}</span>
-			<span class="published-at">{{track.published_at.date | momentFromNow}}</span>
+			<span class="stats" title="5 Favourites / 2 Comments / 10 Downloads"><strong>5</strong>f, <strong>2</strong>c, <strong>10</strong>d</span>
 			<span class="artist">{{track.user.name}} / {{track.genre.name}}</span>
 		</a>
 	</li>