More design work

Updated Angular to latest RC

app/views/shared/_app_layout.blade.php

@@ -15,7 +15,7 @@
 			@else
 				<li ng-class="{selected: $state.includes('home')}"><a href="/">Home <i class="icon-home"></i></a></li>
 			@endif
-			<li ng-class="{selected: $state.includes('tracks') || $state.includes('track') || $state.includes('albums') || $state.includes('album') || $state.includes('artists') || $state.includes('artist')}">
+			<li ng-class="{selected: $state.includes('content')}">
 				<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('playlist') && $state.params.id == playlist.id}">
+				<li class="dropdown" ng-repeat="playlist in playlists" ng-cloak ng-class="{selected: $state.is('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/app.coffee

@@ -1,10 +1,10 @@
 window.pfm.preloaders = {}
 
-angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'], [
-	'$routeProvider', '$locationProvider', '$stateProvider', '$dialogProvider', '$injector'
-	(route, location, state, $dialogProvider, $injector) ->
+module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable']
 
-		service = (name) -> angular.element(document.body).injector().get name
+module.config [
+	'$locationProvider', '$stateProvider', '$dialogProvider'
+	(location, state, $dialogProvider) ->
 
 		# Account
 
@@ -67,73 +67,64 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 
 		# Tracks
 
-		state.state 'track',
+		state.state 'content',
+			abstract: true
+			templateUrl: '/templates/content/_layout.html'
+
+		state.state 'content.tracks',
+			templateUrl: '/templates/tracks/search.html'
+			controller: 'tracks'
+			url: '/tracks'
+			abstract: true
+
+		state.state 'content.tracks.list',
+			url: '^/tracks?filter&page'
+			templateUrl: '/templates/tracks/search-list.html'
+			controller: 'tracks-list'
+
+		state.state 'content.track',
 			url: '/tracks/{id:[^\-]+}-{slug}'
 			templateUrl: '/templates/tracks/show.html'
 			controller: 'track'
 
-		state.state 'tracks',
-			url: '/tracks'
-			templateUrl: '/templates/tracks/_layout.html'
-			abstract: true
-
-		state.state 'tracks.search',
-			templateUrl: '/templates/tracks/search.html'
-			controller: 'tracks'
-
-		state.state 'tracks.search.list',
-			url: '?filter&page'
-			templateUrl: '/templates/tracks/search-list.html'
-			controller: 'tracks-list'
-
-		state.state 'tracks.popular',
-			url: '/popular'
-			templateUrl: '/templates/tracks/search.html'
-			controller: 'tracks'
-
-		state.state 'tracks.random',
-			url: '/random'
-			templateUrl: '/templates/tracks/search.html'
-			controller: 'tracks'
-
 		# Albums
 
-		state.state 'albums',
+		state.state 'content.albums',
 			url: '/albums'
 			templateUrl: '/templates/albums/index.html'
 			controller: 'albums'
 			abstract: true
 
-		state.state 'albums.list',
+		state.state 'content.albums.list',
 			url: '?page'
 			templateUrl: '/templates/albums/list.html'
 			controller: 'albums-list'
 
-		state.state 'album',
+		state.state 'content.album',
 			url: '/albums/{id:[^\-]+}-{slug}'
 			templateUrl: '/templates/albums/show.html'
 			controller: 'album'
 
 		# Playlists
 
-		state.state 'playlists',
+		state.state 'content.playlists',
 			url: '/playlists'
 			templateUrl: '/templates/playlists/index.html'
 
-		state.state 'playlist',
+		state.state 'content.playlist',
 			url: '/playlist/{id:[^\-]+}-{slug}'
 			templateUrl: '/templates/playlists/show.html'
 			controller: 'playlist'
 
 		# Artists
 
-		state.state 'artists',
+		state.state 'content.artists',
 			url: '/artists'
 			templateUrl: '/templates/artists/index.html'
 			controller: 'artists'
 			abstract: true
 
-		state.state 'artists.list',
+		state.state 'content.artists.list',
 			url: '?page'
 			templateUrl: '/templates/artists/list.html'
 			controller: 'artists-list'
@@ -172,29 +163,27 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'],
 				templateUrl: '/templates/home/index.html'
 
 		# Final catch-all for aritsts
-		state.state 'artist',
-			url: '^/:slug'
+		state.state 'content.artist',
+			url: '^/{slug}'
 			templateUrl: '/templates/artists/_show_layout.html'
 			abstract: true
 			controller: 'artist'
 
-		state.state 'artist.profile',
+		state.state 'content.artist.profile',
 			url: ''
 			templateUrl: '/templates/artists/profile.html'
 			controller: 'artist-profile'
 
-		state.state 'artist.content',
+		state.state 'content.artist.content',
 			url: '/content'
 			templateUrl: '/templates/artists/content.html'
 			controller: 'artist-content'
 
-		state.state 'artist.favourites',
+		state.state 'content.artist.favourites',
 			url: '/favourites'
 			templateUrl: '/templates/artists/favourites.html'
 			controller: 'artist-favourites'
 
-		route.otherwise '/'
-
 		location.html5Mode(true);
 		$dialogProvider.options
 			dialogFade: true

public/scripts/app/controllers/albums.coffee

@@ -17,5 +17,5 @@ angular.module('ponyfm').controller "albums", [
 		$scope.$on 'albums-feteched', (e, list) -> refreshPages(list)
 
 		$scope.gotoPage = (page) ->
-			$state.transitionTo 'albums.list', {page: page}
+			$state.transitionTo 'content.albums.list', {page: page}
 ]

public/scripts/app/controllers/application.coffee

@@ -19,7 +19,7 @@ angular.module('ponyfm').controller "application", [
 
 		$scope.isActive = (loc) -> $location.path() == loc
 		$scope.$on '$viewContentLoaded', () ->
-			window.handleResize()
+			window.setTimeout (-> window.handleResize()), 0
 
 			if $loadingElement
 				$loadingElement.removeClass 'loading'

public/scripts/app/controllers/artists.coffee

@@ -17,5 +17,5 @@ angular.module('ponyfm').controller "artists", [
 		$scope.$on 'artists-feteched', (e, list) -> refreshPages(list)
 
 		$scope.gotoPage = (page) ->
-			$state.transitionTo 'artists.list', {page: page}
+			$state.transitionTo 'content.artists.list', {page: page}
 ]

public/scripts/app/controllers/tracks.coffee

@@ -13,15 +13,15 @@ angular.module('ponyfm').controller "tracks", [
 
 		$scope.toggleListFilter = (filter, id) ->
 			$scope.query.toggleListFilter filter, id
-			$state.transitionTo 'tracks.search.list', {filter: $scope.query.toFilterString()}
+			$state.transitionTo 'content.tracks.list', {filter: $scope.query.toFilterString()}
 
 		$scope.setFilter = (filter, value) ->
 			$scope.query.setFilter filter, value
-			$state.transitionTo 'tracks.search.list', {filter: $scope.query.toFilterString()}
+			$state.transitionTo 'content.tracks.list', {filter: $scope.query.toFilterString()}
 
 		$scope.setListFilter = (filter, id) ->
 			$scope.query.setListFilter filter, id
-			$state.transitionTo 'tracks.search.list', {filter: $scope.query.toFilterString()}
+			$state.transitionTo 'content.tracks.list', {filter: $scope.query.toFilterString()}
 
 		tracks.mainQuery.listen (searchResults) ->
 			$scope.tracks = searchResults.tracks
@@ -35,7 +35,7 @@ angular.module('ponyfm').controller "tracks", [
 			$scope.pages = [1..$scope.totalPages]
 
 		$scope.gotoPage = (page) ->
-			$state.transitionTo 'tracks.search.list', {filter: $state.params.filter, page: page}
+			$state.transitionTo 'content.tracks.list', {filter: $state.params.filter, page: page}
 
 		$scope.$on '$destroy', -> tracks.mainQuery = tracks.createQuery()
 ]

public/templates/albums/index.html

@@ -1,15 +1,11 @@
-<div>
-	<h1>Albums</h1>
-
-	<div class="pagination" ng-show="totalPages > 1">
-		<ul>
-			<li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
-			<li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
-				<a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
-			</li>
-			<li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
-		</ul>
-	</div>
-
-	<ui-view></ui-view>
+<div class="pagination" ng-show="totalPages > 1">
+	<ul>
+		<li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
+		<li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
+			<a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
+		</li>
+		<li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
+	</ul>
 </div>
+
+<ui-view></ui-view>

public/templates/artists/index.html

@@ -1,15 +1,11 @@
-<div>
-	<h1>Artist Directory</h1>
-
-	<div class="pagination" ng-show="totalPages > 1">
-		<ul>
-			<li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
-			<li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
-				<a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
-			</li>
-			<li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
-		</ul>
-	</div>
-
-	<ui-view></ui-view>
+<div class="pagination" ng-show="totalPages > 1">
+	<ul>
+		<li ng-class="{disabled: !prevPage}"><a href="#" ng-click="gotoPage(prevPage);" pfm-eat-click>Prev</a></li>
+		<li ng-repeat="page in pages" ng-class="{active: page == currentPage}">
+			<a href="#" ng-click="gotoPage(page);" pfm-eat-click>{{page}}</a>
+		</li>
+		<li ng-class="{disabled: !nextPage}"><a href="#" ng-click="gotoPage(nextPage);" pfm-eat-click>Next</a></li>
+	</ul>
 </div>
+
+<ui-view></ui-view>

public/templates/content/_layout.html

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

public/templates/playlists/index.html

@@ -1,3 +0,0 @@
-<div>
-	<h1>Playlists</h1>
-</div>

public/templates/tracks/_layout.html

@@ -1,8 +0,0 @@
-<ul class="tabs">
-	<li ng-class="{active: $state.includes('tracks.search')}"><a href="/tracks">Tracks</a></li>
-	<li ng-class="{active: $state.includes('tracks.popular')}"><a href="/artists">Artists</a></li>
-	<li ng-class="{active: $state.includes('tracks.random')}"><a href="/albums">Albums</a></li>
-	<li ng-class="{active: $state.includes('tracks.random')}"><a href="/playlists">Playlists</a></li>
-</ul>
-
-<ui-view></ui-view>

public/templates/tracks/search.html

@@ -1,7 +1,7 @@
 <ul class="dropdowns">
 	<li class="dropdown">
 		<a class="dropdown-toggle btn" ng-class="{'btn-info': query.filters.trackTypes.selectedArray.length}">
-			Type: <strong>{{query.filters.trackTypes.title}}</strong>
+			Type: <strong class="ng-cloak">{{query.filters.trackTypes.title}}</strong>
 		</a>
 		<ul class="dropdown-menu">
 			<li ng-repeat="type in filters.trackTypes.values" ng-class="{selected: query.isIdSelected('trackTypes', type.id)}">