From 5972c72b673143599322ec4af77ad7ad61da2b3c Mon Sep 17 00:00:00 2001
From: devfake <devfakeplus@googlemail.com>
Date: Mon, 22 Jun 2015 11:10:43 +0200
Subject: [PATCH] styling searchMatch
---
.../app/components/modals/searchMatch.js | 9 ++++++-
site/client/app/views/modals/searchMatch.html | 2 ++
site/client/assets/sass/_modal.scss | 27 ++++++++++++++++---
3 files changed, 33 insertions(+), 5 deletions(-)
diff --git a/site/client/app/components/modals/searchMatch.js b/site/client/app/components/modals/searchMatch.js
index e2a7c0f..cb5aef0 100644
--- a/site/client/app/components/modals/searchMatch.js
+++ b/site/client/app/components/modals/searchMatch.js
@@ -2,6 +2,13 @@ module.exports = {
template: require('../../views/modals/searchMatch.html'),
- inherit: true
+ inherit: true,
+
+ methods: {
+ cancelMatch: function() {
+ this.modal = false;
+ // trigger match functions
+ }
+ }
};
\ No newline at end of file
diff --git a/site/client/app/views/modals/searchMatch.html b/site/client/app/views/modals/searchMatch.html
index d58b258..f529f5b 100644
--- a/site/client/app/views/modals/searchMatch.html
+++ b/site/client/app/views/modals/searchMatch.html
@@ -5,6 +5,8 @@
<i class="icon-content-load"></i>
<p class="modal-para">Search for Player</p>
+ <span class="btn-cancel" v-on="click: cancelMatch">Cancel</span>
+
</div>
</div>
</div>
\ No newline at end of file
diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss
index c33ae6d..0acdeee 100644
--- a/site/client/assets/sass/_modal.scss
+++ b/site/client/assets/sass/_modal.scss
@@ -16,7 +16,7 @@
top: 0;
right: 0;
bottom: 0;
- background: rgba(14,27,43,.8);
+ background: rgba(14,27,43,.5);
z-index: 10;
opacity: 0;
visibility: hidden;
@@ -34,16 +34,18 @@
width: 100%;
color: #fff;
padding: 50px 0;
- margin: 15% 0 0 0;
+ margin: 25vh 0 0 0;
float: left;
}
.icon-content-load {
background: url(../img/content-load.gif) no-repeat;
- float: left;
+ //float: left;
width: 32px;
height: 32px;
opacity: .9;
+ display: block;
+ margin: 0 auto;
}
.modal-para {
@@ -53,5 +55,22 @@
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
color: #8798ac;
float: left;
- margin: 3px 0 0 20px;
+ clear: both;
+ width: 100%;
+ text-align: center;
+ //margin: 3px 0 0 20px;
+}
+
+.btn-cancel {
+ float: left;
+ clear: both;
+ margin: 50px 0 0 0;
+ width: 100%;
+ text-align: center;
+ color: darken(#8798ac, 10%);
+ cursor: pointer;
+
+ &:hover {
+ color: #8798ac;
+ }
}
\ No newline at end of file