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:
parent
22e65ccb96
commit
84b209da56
@ -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);
|
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 = 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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
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>
|
<navigation></navigation>
|
||||||
|
|
||||||
<main>
|
<section class="container-content">
|
||||||
blaa
|
blaa
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
</section>
|
</main>
|
@ -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>
|
||||||
|
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 {
|
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;
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -10,4 +10,5 @@
|
|||||||
'form',
|
'form',
|
||||||
'landing',
|
'landing',
|
||||||
'inner',
|
'inner',
|
||||||
'nav';
|
'nav',
|
||||||
|
'chat';
|
@ -2,10 +2,16 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
@if($type == 'server')
|
<section class="container-inner">
|
||||||
<component is="lobby" v-transition transition-mode="out-in"></component>
|
|
||||||
@else
|
@if($type == 'server')
|
||||||
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
<component is="lobby" v-transition transition-mode="out-in"></component>
|
||||||
@endif
|
@else
|
||||||
|
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<component is="chat"></component>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
@stop
|
@stop
|
Loading…
Reference in New Issue
Block a user