1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-10-31 10:36:53 +00:00

rewrite structure and bit chat styling

This commit is contained in:
devfake 2015-06-21 21:20:17 +02:00
parent 22e65ccb96
commit 84b209da56
12 changed files with 96 additions and 38 deletions

View File

@ -16,9 +16,10 @@ var app = new Vue({
components: { components: {
lobby: require('./components/lobby'), lobby: require('./components/lobby'),
navigation: require('./components/navigation') navigation: require('./components/navigation'),
chat: require('./components/chat')
} }
}); });
router.init(app); //router.init(app);

View File

@ -0,0 +1,5 @@
module.exports = {
template: require('../views/chat.html')
};

View File

@ -1,5 +1,4 @@
var Router = require('director').Router; var router = require('./../routes');
var router = new Router();
module.exports = { module.exports = {
@ -7,7 +6,7 @@ module.exports = {
methods: { methods: {
changeView: function(view) { changeView: function(view) {
router.setRoute('test'); router.changeRoute(view);
} }
} }

View File

@ -1,24 +1,28 @@
var Router = require('director').Router; var routes = {
var router = new Router(); '/lobby': function() {
alert('lobby');
module.exports = {
init: function(app) {
router.on('/lobby', function() {
app.view = 'lobby';
app.section = 'inner';
});
router.on('/test', function() {
})
this.configure();
router.init();
}, },
configure: function() { '/deck-builder': function() {
router.configure({ alert('deck-builder');
html5history: true },
})
'/highscore': function() {
alert('highscore');
}
};
var options = {
html5history: true,
run_handler_in_init: false,
convert_hash_in_init: false
}
var Router = require('director').Router;
var router = new Router(routes).configure(options).init();
module.exports = {
changeRoute: function(route) {
router.setRoute(route);
} }
} }

View File

@ -0,0 +1,13 @@
<section class="container-chat">
<nav>
<ul>
<li><a class="active">Lobby Chat</a></li>
<li><a>Current Match</a></li>
</ul>
</nav>
<div class="chat">
</div>
</section>

View File

@ -1,11 +1,11 @@
<section class="container-inner">
<a href="./lobby"><img src="assets/img/logo-medium.png" width="160" height="50" alt="Gwent" class="logo-medium"></a> <a href="./lobby"><img src="assets/img/logo-medium.png" width="160" height="50" alt="Gwent" class="logo-medium"></a>
<main>
<navigation></navigation> <navigation></navigation>
<main> <section class="container-content">
blaa blaa
</main>
</section> </section>
</main>

View File

@ -1,7 +1,7 @@
<nav> <nav>
<ul> <ul>
<li><a class="active" v-on="click: changeView('lobby')">Lobby</a></li> <li><a class="active" v-on="click: changeView('lobby')">Lobby</a></li>
<li><a href="#" v-on="click: changeView('builder')">Deck Builder</a></li> <li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
<li><a href="#" v-on="click: changeView('highscore')">Highscore</a></li> <li><a v-on="click: changeView('highscore')">Highscore</a></li>
</ul> </ul>
</nav> </nav>

View File

@ -0,0 +1,22 @@
.container-chat {
float: right;
width: 29%;
a {
font-size: 14px;
padding: 15px 15px;
}
}
.chat {
float: left;
width: 100%;
padding: 20px;
height: calc(100vh - 300px);
min-height: 400px;
clear: both;
color: #fff;
@include contentGradient();
}

View File

@ -14,7 +14,13 @@ body.inner {
main { main {
float: left; float: left;
clear: both;
width: 70%; width: 70%;
}
.container-content {
float: left;
width: 100%;
padding: 20px; padding: 20px;
height: calc(100vh - 300px); height: calc(100vh - 300px);
min-height: 400px; min-height: 400px;

View File

@ -21,6 +21,7 @@ nav {
padding: 12px 25px; padding: 12px 25px;
float: left; float: left;
cursor: pointer; cursor: pointer;
height: 55px;
@include transition(color); @include transition(color);

View File

@ -10,4 +10,5 @@
'form', 'form',
'landing', 'landing',
'inner', 'inner',
'nav'; 'nav',
'chat';

View File

@ -2,10 +2,16 @@
@section('content') @section('content')
<section class="container-inner">
@if($type == 'server') @if($type == 'server')
<component is="lobby" v-transition transition-mode="out-in"></component> <component is="lobby" v-transition transition-mode="out-in"></component>
@else @else
<component is="@{{ view }}" v-transition transition-mode="out-in"></component> <component is="@{{ view }}" v-transition transition-mode="out-in"></component>
@endif @endif
<component is="chat"></component>
</section>
@stop @stop