From d804061c310f563cc7c14c8860d8b8601df0c60a Mon Sep 17 00:00:00 2001
From: Wlad <wlad.meixner@protonmail.com>
Date: Thu, 7 Sep 2017 01:23:28 +0200
Subject: [PATCH] added small style changes to category selection

---
 .../UIComponents/OxyCategorySlider.vue        | 58 ++++++++++++++-----
 1 file changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/UIComponents/OxyCategorySlider.vue b/src/components/UIComponents/OxyCategorySlider.vue
index f8a2206..d62aff4 100644
--- a/src/components/UIComponents/OxyCategorySlider.vue
+++ b/src/components/UIComponents/OxyCategorySlider.vue
@@ -1,31 +1,34 @@
 <template>
   <div class="category-slider-wrapper">
     <div class="category-slider-scroll">
-      <div class="category-slider-card" v-for="category in categories" :style="{backgroundImage : 'url(' + category.src + ')'}">{{category.title}}</div>
+      <div class="category-slider-card" v-for="category in categories" :style="{background : 'url(' + category.img + ') no-repeat center center'}">
+        <div class="category-background-overlay"></div>
+        <h5 class="category-title">{{category.title}}</h5>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 const CategoryMockupData = [{
-  title: 'Books',
-  img: 'https://unsplash.it/200/160',
-  url: 'category/books'
+  title: 'Electronics',
+  img: 'https://unsplash.it/200/160/?random',
+  url: 'category/electronics'
 },
 {
   title: 'Books',
-  img: 'https://unsplash.it/200/160',
+  img: 'https://unsplash.it/200/160/?random',
   url: 'category/books'
 },
 {
-  title: 'Books',
-  img: 'https://unsplash.it/200/160',
-  url: 'category/books'
+  title: 'Health',
+  img: 'https://unsplash.it/200/160/?random',
+  url: 'category/health'
 },
 {
-  title: 'Books',
-  img: 'https://unsplash.it/200/160',
-  url: 'category/books'
+  title: 'Software',
+  img: 'https://unsplash.it/200/160/?random',
+  url: 'category/software'
 }]
 export default {
   props: {
@@ -49,21 +52,48 @@ $category-slider-height: 180px;
     overflow-y: hidden;
     overflow-x: scroll;
     margin-bottom: 40px;
+    border-radius: 5px;
+    background-color: #EEE;
 
     .category-slider-scroll {
       position: relative;
       white-space: nowrap;
       // background-color: #EEE;
       // width: 1000px;
-      height: $category-slider-height - 20;
+      height: $category-slider-height - 10;
 
       .category-slider-card {
         display: inline-block;
+        position: relative;
         height: 90%;
-        width: 300px;
-        margin: 2%;
+        width: 270px;
+        margin: 12px;
         background-color: #EEE;
+        background-size: cover !important;
         border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+
+        .category-background-overlay {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          transition: .2s all ease-in;
+        }
+
+        &:hover .category-background-overlay {
+          background-color: rgba(0, 0, 0, 0.8);
+        }
+
+        .category-title {
+          color: #FFF;
+          position: absolute;
+          bottom: 0;
+          right: 15px;
+        }
       }
     }
   }