diff --git a/site/client/app/components/deckBuilder.js b/site/client/app/components/deckBuilder.js new file mode 100644 index 0000000..48912bc --- /dev/null +++ b/site/client/app/components/deckBuilder.js @@ -0,0 +1,5 @@ +module.exports = { + + template: "<h2>deckbuilder hier</h2>" + +}; \ No newline at end of file diff --git a/site/client/app/components/inner.js b/site/client/app/components/inner.js index deea695..381f2f7 100644 --- a/site/client/app/components/inner.js +++ b/site/client/app/components/inner.js @@ -13,7 +13,8 @@ module.exports = { navigation: require('./navigation'), chat: require('./chat'), - lobby: require('./lobby') + lobby: require('./lobby'), + deckBuilder: require('./deckBuilder') } }; \ No newline at end of file diff --git a/site/client/app/components/lobby.js b/site/client/app/components/lobby.js index 1e87a1d..dce420d 100644 --- a/site/client/app/components/lobby.js +++ b/site/client/app/components/lobby.js @@ -1,5 +1,5 @@ module.exports = { - template: require('../views/lobby.html'), + template: "<h2>lobby hier</h2>" }; \ No newline at end of file diff --git a/site/client/app/components/navigation.js b/site/client/app/components/navigation.js index 9a0a48d..9d9f695 100644 --- a/site/client/app/components/navigation.js +++ b/site/client/app/components/navigation.js @@ -7,10 +7,6 @@ module.exports = { inherit: true, methods: { - changeView: function(view) { - router.changeRoute(view); - }, - searchMatch: function() { this.modal = true; // trigger match functions diff --git a/site/client/app/routes.js b/site/client/app/routes.js index 6d6646e..4661adc 100644 --- a/site/client/app/routes.js +++ b/site/client/app/routes.js @@ -1,26 +1,19 @@ -var routes = { - '/lobby': function() { - alert('lobby'); - }, - - '/deck-builder': function() { - alert('deck-builder'); - }, - - '/highscore': function() { - alert('highscore'); - } -}; - -var options = { - html5history: true -} - -var Router = require('director').Router; -var router = new Router(routes).configure(options).init(); +require('../../../public/Config.js'); module.exports = { - changeRoute: function(route) { - router.setRoute(route); + + maps: { + '/lobby': { + component: 'lobby' + }, + + '/deck-builder': { + component: 'deckBuilder' + } + }, + + options: { + history: true, + root: window.Config.Site.base } } \ No newline at end of file diff --git a/site/client/app/views/inner.html b/site/client/app/views/inner.html index fcf4779..397f9bc 100644 --- a/site/client/app/views/inner.html +++ b/site/client/app/views/inner.html @@ -4,10 +4,21 @@ <main> + <style> + .test { + transition: all .5s ease; + } + .test-enter, .test-leave { + opacity: 0; + } + </style> + <navigation></navigation> <section class="container-content"> - <component is="lobby"></component> + + <router-view class="test" v-transition="test" transition-mode="out-in"></router-view> + </section> </main> diff --git a/site/client/app/views/navigation.html b/site/client/app/views/navigation.html index e0346d1..209ff88 100644 --- a/site/client/app/views/navigation.html +++ b/site/client/app/views/navigation.html @@ -1,7 +1,7 @@ <nav> <ul> - <li><a class="active" v-on="click: changeView('lobby')">Lobby</a></li> - <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li> + <li><a class="active" v-link="/lobby">Lobby</a></li> + <li><a v-link="/deck-builder">Deck Builder</a></li> <li><a v-on="click: changeView('highscore')">Highscore</a></li> <li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li> diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss index 01a30fa..c945a22 100644 --- a/site/client/assets/sass/_modal.scss +++ b/site/client/assets/sass/_modal.scss @@ -21,11 +21,11 @@ opacity: 0; visibility: hidden; + @include transition(); + &.active { visibility: visible; opacity: 1; - - @include transition(); } } @@ -38,9 +38,9 @@ margin: 24vh 0 0 0; float: left; - .active & { - @include transition(); + @include transition(); + .active & { margin: 25vh 0 0 0; } } @@ -65,7 +65,6 @@ clear: both; width: 100%; text-align: center; - //margin: 3px 0 0 20px; } .btn-cancel { @@ -77,7 +76,9 @@ color: darken(#8798ac, 10%); cursor: pointer; + @include transition(); + &:hover { - color: #8798ac; + color: #fff; } } \ No newline at end of file