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

start styling searchMatch and few changes

This commit is contained in:
devfake 2015-06-22 10:47:05 +02:00
parent b03d9dcbb1
commit 9b4dbe39e2
12 changed files with 62 additions and 7 deletions

View File

@ -16,7 +16,6 @@ var app = new Vue({
components: {
lobby: require('./components/lobby'),
navigation: require('./components/navigation'),
chat: require('./components/chat')
}

View File

@ -1,5 +1,16 @@
module.exports = {
template: require('../views/lobby.html')
template: require('../views/lobby.html'),
data: function() {
return {
modal: false
}
},
components: {
searchmatch: require('./modals/searchMatch'),
navigation: require('./navigation')
}
};

View File

@ -0,0 +1,7 @@
module.exports = {
template: require('../../views/modals/searchMatch.html'),
inherit: true
};

View File

@ -4,9 +4,16 @@ module.exports = {
template: require('../views/navigation.html'),
inherit: true,
methods: {
changeView: function(view) {
router.changeRoute(view);
},
searchMatch: function() {
this.modal = true;
// trigger match functions
}
}

View File

@ -13,9 +13,7 @@ var routes = {
};
var options = {
html5history: true,
run_handler_in_init: false,
convert_hash_in_init: false
html5history: true
}
var Router = require('director').Router;

View File

@ -5,7 +5,7 @@
<navigation></navigation>
<section class="container-content">
blaa
<searchmatch></searchmatch>
</section>
</main>

View File

@ -0,0 +1,10 @@
<div class="modal" v-class="active: modal">
<div class="modal-banner">
<div class="wrap-modal-search">
<i class="icon-content-load"></i>
<p class="modal-para">Search for Player</p>
</div>
</div>
</div>

View File

@ -4,6 +4,6 @@
<li><a v-on="click: changeView('deck-builder')">Deck Builder</a></li>
<li><a v-on="click: changeView('highscore')">Highscore</a></li>
<li class="sub-nav"><a>Quick Match</a></li>
<li class="sub-nav" v-on="click: searchMatch"><a>Quick Match</a></li>
</ul>
</nav>

View File

@ -3,6 +3,11 @@
margin: 0 auto;
}
.wrap-modal-search {
max-width: 250px;
margin: 0 auto;
}
.modal {
position: fixed;
width: 100%;
@ -31,4 +36,22 @@
padding: 50px 0;
margin: 15% 0 0 0;
float: left;
}
.icon-content-load {
background: url(../img/content-load.gif) no-repeat;
float: left;
width: 32px;
height: 32px;
opacity: .9;
}
.modal-para {
font-size: 17px;
text-transform: uppercase;
font-weight: 300;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
color: #8798ac;
float: left;
margin: 3px 0 0 20px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB