mirrors/not-gwent-online
1
0
Fork 0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00
Code Releases Activity

change deck view

Browse Source
This commit is contained in:
devfake 2015-06-25 10:19:43 +02:00
parent 04ea6d3db5
commit 15cb2e28a1
2 changed files with 100 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
site/client/app/modules/deck-builder/views/deck-builder.html
View File

@ -31,17 +31,48 @@
<div class="clear-space"></div>
<div class="my-card" v-repeat="deck">
<div class="images">
<div
v-repeat="$value"
class="img-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/medic.png)'"></div>
<div class="my-card-container">
<span>LEADER</span>
<div class="card-wrap-small">
<div class="bla ani"></div>
<div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/medic.png)'"></div>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
<div class="sep">{{ $value }}x Blue Stripes Commando<br>
<span>
Power: 5 (Close Combat)
</span>
<em class="delete" v-on="click: removeCard($key)">Delete</em>
</div>
<div class="my-card-container">
<span>CLOSE COMBAT</span>
<div class="card-wrap-small" v-repeat="5">
<div class="bla ani"></div>
<div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/imlerith.png)'"></div>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="my-card-container">
<span>RANGE</span>
<div class="card-wrap-small" v-repeat="11">
<div class="bla ani"></div>
<div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/siege_tech.png)'"></div>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
<div class="my-card-container">
<span>WEATHER</span>
<div class="card-wrap-small" v-repeat="3">
<div class="bla ani"></div>
<div class="card-img-small card-small-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/frost.png)'"></div>
<div class="shadow"></div>
<div class="overlay-card"></div>
</div>
</div>
@ -52,6 +83,21 @@
<style>
.my-card-container {
float: left;
width: 100%;
margin: 0 0 50px 0;
}
.my-card-container span {
color: #435365;
font-size: 16px !important;
font-weight: bold;
width: 100%;
float: left;
margin: 0 0 10px 0;
}
.delete {
float: left;
clear: both;
@ -60,16 +106,16 @@
.images {
position: relative;
width: 50px;
height: 94px;
width: 70px;
height: 132px;
float: left;
}
.img-small {
float: left;
background-size: 50px 94px;
width: 50px;
height: 94px;
background-size: 70px 132px;
width: 70px;
height: 132px;
position: absolute;
z-index: 100;
}
@ -91,7 +137,6 @@
.my-card {
color: #c3cdd8;
float: left;
width: 50%;
margin: 0 0 20px 0;
}
@ -120,15 +165,15 @@
overflow: hidden;
float: right;
height: calc(100% + 40px);
padding: 0 20px;
margin: -80px 0 0 0;
}
.all-deck {
float: left;
width: calc(100% + 50px);
width: calc(100% + 40px);
height: 100%;
overflow-y: auto;
padding: 0 50px 0 30px;
}
.shadow-all-cards {

43
site/client/assets/sass/_shame_cards.scss
View File

@ -4,7 +4,14 @@
height: 227px;
}
.card {
.card-img-small {
background-size: 70px 132px;
width: 70px;
height: 132px;
}
.card,
.card-small-small {
float: left;
border-radius: 12px;
position: relative;
@ -13,6 +20,12 @@
left: 3px;
}
.card-small-small {
top: 2px;
left: 2px;
border-radius: 8px;
}
.bla {
border-radius: 14px;
width: 100%;
@ -21,7 +34,12 @@
opacity: 0;
}
.card-wrap:hover .bla {
.card-wrap-small .bla {
border-radius: 8px;
}
.card-wrap:hover .bla,
.card-wrap-small:hover .bla {
box-shadow: 0 0 2px 0 orange;
opacity: 1;
}
@ -40,7 +58,8 @@
opacity: 0;
}
.card-wrap:hover .shadow {
.card-wrap:hover .shadow,
.card-wrap-small:hover .shadow {
-webkit-animation: Shadow 4s ease-in-out infinite;
-moz-animation: Shadow 4s ease-in-out infinite;
animation: Shadow 4s ease-in-out infinite;
@ -51,7 +70,8 @@
transition: all .05s ease-in-out 0s;
}
.card-wrap .ani {
.card-wrap .ani,
.card-wrap-small .ani {
background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500);
background-size: 800% 800%;
@ -125,7 +145,8 @@
cursor: pointer;
}
.card-wrap:hover .overlay-card {
.card-wrap:hover .overlay-card,
.card-wrap-small:hover .overlay-card {
opacity: 1;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
@ -159,7 +180,16 @@
}
.card-wrap:hover {
.card-wrap-small {
float: left;
width: 74px;
height: 136px;
position: relative;
padding: 4px;
}
.card-wrap:hover,
.card-wrap-small:hover {
z-index: 100;
//transform: scale(1.01,1.01) !important;
}
@ -227,6 +257,7 @@
.heading-my-deck {
float: left;
width: 47%;
padding: 0 0 0 10px;
}
span {