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:
parent
22e65ccb96
commit
84b209da56
@ -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);
|
5
site/client/app/components/chat.js
Normal file
5
site/client/app/components/chat.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../views/chat.html')
|
||||
|
||||
};
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
13
site/client/app/views/chat.html
Normal file
13
site/client/app/views/chat.html
Normal 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>
|
@ -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>
|
@ -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>
|
||||
|
22
site/client/assets/sass/_chat.scss
Normal file
22
site/client/assets/sass/_chat.scss
Normal 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();
|
||||
}
|
@ -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;
|
||||
|
@ -21,6 +21,7 @@ nav {
|
||||
padding: 12px 25px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
height: 55px;
|
||||
|
||||
@include transition(color);
|
||||
|
||||
|
@ -10,4 +10,5 @@
|
||||
'form',
|
||||
'landing',
|
||||
'inner',
|
||||
'nav';
|
||||
'nav',
|
||||
'chat';
|
@ -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
|
Loading…
Reference in New Issue
Block a user