1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19: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: {
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 = new Router();
var router = require('./../routes');
module.exports = {
@ -7,7 +6,7 @@ module.exports = {
methods: {
changeView: function(view) {
router.setRoute('test');
router.changeRoute(view);
}
}

View File

@ -1,24 +1,28 @@
var Router = require('director').Router;
var router = new Router();
module.exports = {
init: function(app) {
router.on('/lobby', function() {
app.view = 'lobby';
app.section = 'inner';
});
router.on('/test', function() {
})
this.configure();
router.init();
var routes = {
'/lobby': function() {
alert('lobby');
},
configure: function() {
router.configure({
html5history: true
})
'/deck-builder': function() {
alert('deck-builder');
},
'/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>
<main>
<section class="container-content">
blaa
</main>
</section>
</section>
</main>

View File

@ -1,7 +1,7 @@
<nav>
<ul>
<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 href="#" v-on="click: changeView('highscore')">Highscore</a></li>
<li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
<li><a v-on="click: changeView('highscore')">Highscore</a></li>
</ul>
</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 {
float: left;
clear: both;
width: 70%;
}
.container-content {
float: left;
width: 100%;
padding: 20px;
height: calc(100vh - 300px);
min-height: 400px;

View File

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

View File

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

View File

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