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:
parent
b03d9dcbb1
commit
9b4dbe39e2
@ -16,7 +16,6 @@ var app = new Vue({
|
||||
|
||||
components: {
|
||||
lobby: require('./components/lobby'),
|
||||
navigation: require('./components/navigation'),
|
||||
chat: require('./components/chat')
|
||||
}
|
||||
|
||||
|
@ -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')
|
||||
}
|
||||
|
||||
};
|
7
site/client/app/components/modals/searchMatch.js
Normal file
7
site/client/app/components/modals/searchMatch.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../../views/modals/searchMatch.html'),
|
||||
|
||||
inherit: true
|
||||
|
||||
};
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -5,7 +5,7 @@
|
||||
<navigation></navigation>
|
||||
|
||||
<section class="container-content">
|
||||
blaa
|
||||
<searchmatch></searchmatch>
|
||||
</section>
|
||||
|
||||
</main>
|
10
site/client/app/views/modals/searchMatch.html
Normal file
10
site/client/app/views/modals/searchMatch.html
Normal 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>
|
@ -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>
|
||||
|
@ -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 |
BIN
site/public/assets/img/content-load.gif
Normal file
BIN
site/public/assets/img/content-load.gif
Normal file
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 |
Loading…
Reference in New Issue
Block a user