diff --git a/app/views/shared/_app_layout.blade.php b/app/views/shared/_app_layout.blade.php index 3bb24a27..ae3f76bc 100644 --- a/app/views/shared/_app_layout.blade.php +++ b/app/views/shared/_app_layout.blade.php @@ -88,7 +88,7 @@ -
+
@yield('app_content')
diff --git a/public/images/octavia.png b/public/images/octavia.png deleted file mode 100644 index a9fa4e26..00000000 Binary files a/public/images/octavia.png and /dev/null differ diff --git a/public/images/vinyl.png b/public/images/vinyl.png deleted file mode 100644 index dedd01f2..00000000 Binary files a/public/images/vinyl.png and /dev/null differ diff --git a/public/scripts/app/app.coffee b/public/scripts/app/app.coffee index e2e43ddb..444dff6d 100644 --- a/public/scripts/app/app.coffee +++ b/public/scripts/app/app.coffee @@ -8,56 +8,88 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'], url: '/account' templateUrl: '/templates/account/settings.html' controller: 'account-settings' + navigation: + index: 9 state.state 'account-content', url: '/account' abstract: true templateUrl: '/templates/account/content/_layout.html' + navigation: + index: 8 state.state 'account-content.tracks', url: '/tracks' templateUrl: '/templates/account/content/tracks.html' controller: 'account-tracks' + navigation: + index: 8 + subIndex: 1 state.state 'account-content.tracks.edit', url: '/edit/:track_id' + navigation: + index: 8 + subIndex: 1 state.state 'account-content.albums', url: '/albums' templateUrl: '/templates/account/content/albums.html' controller: 'account-albums' + navigation: + index: 8 + subIndex: 2 state.state 'account-content.albums.create', url: '/create' templateUrl: '/templates/account/content/album.html' controller: 'account-albums-edit' + navigation: + index: 8 + subIndex: 2 state.state 'account-content.albums.edit', url: '/edit/:album_id' templateUrl: '/templates/account/content/album.html' controller: 'account-albums-edit' + navigation: + index: 8 + subIndex: 2 state.state 'account-content-playlists', url: '/account/playlists' templateUrl: '/templates/account/content/playlists.html' controller: 'account-playlists' + navigation: + index: 6 state.state 'account-favourites', url: '/account/favourites' abstract: true templateUrl: '/templates/account/favourites/_layout.html' + navigation: + index: 7 state.state 'account-favourites.tracks', url: '' templateUrl: '/templates/account/favourites/tracks.html' + navigation: + index: 7 + subIndex: 1 state.state 'account-favourites.playlists', url: '/playlists' templateUrl: '/templates/account/favourites/playlists.html' + navigation: + index: 7 + subIndex: 3 state.state 'account-favourites.albums', url: '/albums' templateUrl: '/templates/account/favourites/albums.html' + navigation: + index: 7 + subIndex: 2 # Tracks @@ -65,39 +97,53 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'], url: '/tracks' templateUrl: '/templates/tracks/index.html' controller: 'tracks' + navigation: + index: 2 # Albums state.state 'albums', url: '/albums' templateUrl: '/templates/albums/index.html' + navigation: + index: 3 # Playlists state.state 'playlists', url: '/playlists' templateUrl: '/templates/playlists/index.html' + navigation: + index: 4 state.state 'playlist', url: '/playlist/:id/:slug' templateUrl: '/templates/playlists/show.html' controller: 'playlist' + navigation: + index: 4 # Artists state.state 'artists', url: '/artists' templateUrl: '/templates/artists/index.html' + navigation: + index: 5 # Pages state.state 'faq', url: '/faq' templateUrl: '/templates/pages/faq.html' + navigation: + index: 11 state.state 'about', url: '/about' templateUrl: '/templates/pages/about.html' + navigation: + index: 10 # Auth @@ -105,10 +151,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'], url: '/login' templateUrl: '/templates/auth/login.html' controller: 'login' + navigation: + index: 12 state.state 'register', url: '/register' templateUrl: '/templates/auth/register.html' + navigation: + index: 13 # Hompage @@ -117,10 +167,14 @@ angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable'], url: '/' templateUrl: '/templates/dashboard.html' controller: 'dashboard' + navigation: + index: 0 else state.state 'home', url: '/' templateUrl: '/templates/home/index.html' + navigation: + index: 0 route.otherwise '/' diff --git a/public/scripts/app/controllers/application.coffee b/public/scripts/app/controllers/application.coffee index 1277e6ad..4d01a80d 100644 --- a/public/scripts/app/controllers/application.coffee +++ b/public/scripts/app/controllers/application.coffee @@ -9,8 +9,44 @@ angular.module('ponyfm').controller "application", [ auth.logout().done -> location.reload() $scope.isActive = (loc) -> $location.path() == loc - $scope.$on '$viewContentLoaded', () -> window.handleResize() + $scope.$on '$viewContentLoaded', () -> + window.setTimeout window.handleResize, 500 # Show loading screen here? taxonomies.refresh() + + $scope.mainViewAnimation = 'slide-down'; + + $scope.$on '$stateChangeStart', (e, newState, newParams, oldState) -> + oldIndex = + if (oldState && oldState.navigation && oldState.navigation.index) + oldState.navigation.index + else + 0 + + newIndex = + if (newState && newState.navigation && newState.navigation.index) + newState.navigation.index + else + 0 + + oldSubIndex = + if (oldState && oldState.navigation && oldState.navigation.subIndex) + oldState.navigation.subIndex + else + 0 + + newSubIndex = + if (newState && newState.navigation && newState.navigation.subIndex) + newState.navigation.subIndex + else + 0 + + $scope.mainViewAnimation = 'slide-down' if oldIndex > newIndex + $scope.mainViewAnimation = 'slide-up' if oldIndex < newIndex + $scope.mainViewAnimation = 'slide-right' if oldIndex == newIndex + + $scope.subViewAnimation = 'slide-right' if oldSubIndex > newSubIndex + $scope.subViewAnimation = 'slide-left' if oldSubIndex < newSubIndex + $scope.subViewAnimation = 'slide-up' if oldSubIndex == newSubIndex ] \ No newline at end of file diff --git a/public/scripts/shared/layout.coffee b/public/scripts/shared/layout.coffee index 061c33f6..9a3893c0 100644 --- a/public/scripts/shared/layout.coffee +++ b/public/scripts/shared/layout.coffee @@ -2,16 +2,17 @@ window.handleResize = () -> windowHeight = $(window).height() $siteBody = $ '.site-body' $siteBody.height windowHeight - $('header').height() - 1 + redo = false $('.stretch-to-bottom').each () -> $this = $ this - $this.height windowHeight - $this.offset().top + newHeight = windowHeight - $this.offset().top + 1 + if newHeight <= 0 + redo = true + else + $this.height newHeight - backgroundOne = $ '.background-one' - backgroundTwo = $ '.background-two' - - backgroundOne.css 'left', $('.site-content ').offset().left - backgroundOne.width() - backgroundTwo.css 'left', $('.site-content').offset().left + $('.site-content').width() + window.setTimeout(window.handleResize, 0) if redo window.alignVertically = (element) -> $element = $(element) diff --git a/public/styles/animations.less b/public/styles/animations.less new file mode 100644 index 00000000..7fa43b82 --- /dev/null +++ b/public/styles/animations.less @@ -0,0 +1,94 @@ +@import 'base/bootstrap/bootstrap'; +@import 'mixins'; + +.slide-down-enter, .slide-down-leave, +.slide-up-enter, .slide-up-leave, +.slide-right-enter, .slide-right-leave { + position: absolute; +} + +// --------------------------------------- +// Down +// --------------------------------------- +.slide-down-enter { + .transition(all 400ms ease-out); + .transform(translate(0, -100%)); +} + +.slide-down-enter.slide-down-enter-active { + .transform(translate(0, 0)); +} + +.slide-down-leave { + .transition(all 400ms ease-out); + .transform(translate(0, 0)); +} + +.slide-down-leave.slide-down-leave-active { + .transform(translate(0, 100%)); +} + +// --------------------------------------- +// Up +// --------------------------------------- +.slide-up-enter { + .transition(all 400ms ease-out); + .transform(translate(0, 100%)); +} + +.slide-up-enter.slide-up-enter-active { + .transform(translate(0, 0)); +} + +.slide-up-leave { + .transition(all 400ms ease-out); + .transform(translate(0, 0)); +} + +.slide-up-leave.slide-up-leave-active { + .transform(translate(0, -100%)); +} + +// --------------------------------------- +// Right +// --------------------------------------- + +.slide-right-enter { + .transition(all 400ms ease-out); + .transform(translate(-100%, 0)); +} + +.slide-right-enter.slide-right-enter-active { + .transform(translate(0, 0)); +} + +.slide-right-leave { + .transition(all 400ms ease-out); + .transform(translate(0, 0)); +} + +.slide-right-leave.slide-right-leave-active { + .transform(translate(100%, 0)); +} + +// --------------------------------------- +// Left +// --------------------------------------- + +.slide-left-enter { + .transition(all 400ms ease-out); + .transform(translate(100%, 0)); +} + +.slide-left-enter.slide-left-enter-active { + .transform(translate(0, 0)); +} + +.slide-left-leave { + .transition(all 400ms ease-out); + .transform(translate(0, 0)); +} + +.slide-left-leave.slide-left-leave-active { + .transform(translate(-100%, 0)); +} \ No newline at end of file diff --git a/public/styles/app.less b/public/styles/app.less index 9aa4c23a..cca6478e 100644 --- a/public/styles/app.less +++ b/public/styles/app.less @@ -6,4 +6,5 @@ @import 'account-content'; @import 'components'; @import 'forms'; -@import 'tracks'; \ No newline at end of file +@import 'tracks'; +@import 'animations'; \ No newline at end of file diff --git a/public/styles/layout.less b/public/styles/layout.less index ab969772..e70592fd 100644 --- a/public/styles/layout.less +++ b/public/styles/layout.less @@ -21,60 +21,6 @@ html body { z-index: -5; } -.background-one, .background-two { - z-index: -4; - background-repeat: no-repeat; - background-position: bottom right; - height: 100%; - width: 350px; - position: fixed; - background-size: 35%; -} - -html .background-one { - background-image: url('/images/octavia.png'); - background-position: bottom right; - opacity: .1; -} - -html .background-two { - background-image: url('/images/vinyl.png'); - background-position: bottom left; - opacity: .1; - display: none; -} - -.site-content { - .perspective(); - position: relative; -} - -.site-content-animate-enter, .site-content-animate-leave { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; -} - -.site-content-animate-enter { - .transition(all 400ms ease-out); - .transform(translate(0, -100%)); -} - -.site-content-animate-enter.site-content-animate-enter-active { - .transform(translate(0, 0)); -} - -.site-content-animate-leave { - .transition(all 400ms ease-out); - .transform(translate(0, 0)); -} - -.site-content-animate-leave.site-content-animate-leave-active { - .transform(translate(0, 100%)); -} - header { .clearfix(); background: #222; @@ -392,17 +338,18 @@ header { } .site-content { + .perspective(); overflow: hidden; border: 5px solid #222; border-top: none; border-bottom: none; + position: relative; height: 100%; margin-left: 148px; > div { .box-sizing(border-box); - overflow: hidden; width: 100%; height: 100%; background: #fff; @@ -412,6 +359,17 @@ header { } } +.inner-view { + position: relative; + + > div { + width: 100%; + height: 100%; + background: #fff; + position: relative; + } +} + .site-content { h1 { border: none; diff --git a/public/templates/account/content/_layout.html b/public/templates/account/content/_layout.html index 2bc1a3d7..a17c8514 100644 --- a/public/templates/account/content/_layout.html +++ b/public/templates/account/content/_layout.html @@ -4,5 +4,5 @@
  • Albums
    • -
    +
    \ No newline at end of file diff --git a/public/templates/account/content/albums.html b/public/templates/account/content/albums.html index d2ae5642..d6e3480a 100644 --- a/public/templates/account/content/albums.html +++ b/public/templates/account/content/albums.html @@ -1,27 +1,29 @@ - +
    + -
    -
    - -
    +
    +
    + +
    -
    +
    +
    \ No newline at end of file diff --git a/public/templates/account/content/tracks.html b/public/templates/account/content/tracks.html index d40634a1..708e1fe5 100644 --- a/public/templates/account/content/tracks.html +++ b/public/templates/account/content/tracks.html @@ -1,176 +1,178 @@ - - -
    -
    - -
    - -
    -
    -