change deck view

site/client/app/modules/deck-builder/views/deck-builder.html

@@ -31,17 +31,48 @@
 
     <div class="clear-space"></div>
 
-    <div class="my-card" v-repeat="deck">
+    <div class="my-card-container">
-      <div class="images">
+      <span>LEADER</span>
-        <div
+
-          v-repeat="$value"
+      <div class="card-wrap-small">
-          class="img-small" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/medic.png)'"></div>
+        <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>
+    </div>
-          Power: 5 (Close Combat)
+
-        </span>
+    <div class="my-card-container">
-        <em class="delete" v-on="click: removeCard($key)">Delete</em>
+      <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;
+      width: 70px;
-      height: 94px;
+      height: 132px;
       float: left;
     }
 
     .img-small {
       float: left;
-      background-size: 50px 94px;
+      background-size: 70px 132px;
-      width: 50px;
+      width: 70px;
-      height: 94px;
+      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 {

site/client/assets/sass/_shame_cards.scss

@@ -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 {