From e6e71a71280a13fa1ebda8a3ec831d98ec59ebde Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Wed, 3 Oct 2018 18:21:17 +0530
Subject: [PATCH] responsive fixes

---
 packages/Webkul/Shop/src/Http/routes.php      |  5 --
 .../src/Resources/assets/images/icon-cart.svg |  0
 .../Shop/src/Resources/assets/sass/app.scss   | 14 +--
 .../src/Resources/assets/sass/components.scss | 10 +++
 .../Shop/src/Resources/assets/sass/icons.scss | 12 +++
 .../Resources/views/products/add-to.blade.php |  2 +-
 .../Resources/views/products/index.blade.php  | 88 +------------------
 .../views/products/product-add.blade.php      |  2 +-
 .../Resources/views/products/view.blade.php   | 40 ---------
 .../Ui/src/Resources/assets/sass/icons.scss   |  6 --
 public/themes/default/assets/css/shop.css     | 46 ++++++++--
 .../default/assets/images/icon-cart.svg       | 18 ++++
 12 files changed, 87 insertions(+), 156 deletions(-)
 rename packages/Webkul/{Ui => Shop}/src/Resources/assets/images/icon-cart.svg (100%)
 create mode 100644 public/themes/default/assets/images/icon-cart.svg

diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index d4f7abe6f..63ed12ee4 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -35,11 +35,6 @@ Route::group(['middleware' => ['web']], function () {
         'view' => 'shop::products.view'
     ])->name('shop.products.index');
 
-    // //Routes for product cart
-    // Route::get('/checkout/cart', 'Webkul\Shop\Http\Controllers\CartController@index')->defaults('_config', [
-    //     'view' => 'shop::checkout.cart.index'
-    // ])->name('shop.checkout.cart.index');
-
     Route::post('product/cart/add/{id}', 'Webkul\Shop\Http\Controllers\CartController@add')->name('cart.add');
 
     Route::get('product/cart/remove/{id}', 'Webkul\Shop\Http\Controllers\CartController@remove')->name('cart.remove');
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/icon-cart.svg b/packages/Webkul/Shop/src/Resources/assets/images/icon-cart.svg
similarity index 100%
rename from packages/Webkul/Ui/src/Resources/assets/images/icon-cart.svg
rename to packages/Webkul/Shop/src/Resources/assets/images/icon-cart.svg
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index f58c79e05..97c9c4bd1 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -944,7 +944,7 @@ section.product-detail {
             width: 100%;
 
             div.product-image-group {
-                margin-right: 36px;
+                margin-right: 30px;
 
                 div {
                     display: flex;
@@ -955,7 +955,7 @@ section.product-detail {
                         flex-direction: column;
                         margin-right: 4px;
                         height: 480px;
-                        width: 120px;
+                        min-width: 120px;
                         overflow: hidden;
                         position: relative;
                         justify-content: flex-start;
@@ -963,8 +963,7 @@ section.product-detail {
                         .thumb-frame {
                             border: 2px solid transparent;
                             background: #F2F2F2;
-                            max-width: 120px;
-                            width: auto;
+                            width: 120px;
                             height: 120px;
 
                             &.active {
@@ -972,8 +971,8 @@ section.product-detail {
                             }
 
                             img {
-                                width: 100%;
                                 height: 100%;
+                                width: 100%;
                             }
                         }
 
@@ -1047,8 +1046,9 @@ section.product-detail {
                     }
                 }
 
-                .cart-fav-seg {
-                    display: block;
+                .add-to-buttons {
+                    display: flex;
+                    flex-direction: row;
                     margin-top: 10px;
 
                     .addtocart {
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
index e66d1273d..fd4d71a3d 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
@@ -84,15 +84,25 @@
 
     .cart-fav-seg {
         display: inline-flex;
+        align-items: center;
 
         .addtocart {
             margin-right: 10px;
             text-transform: uppercase;
             white-space: nowrap;
         }
+
+        .product-card.wishlist-icon {
+            cursor: pointer;
+        }
     }
 }
 
+//wishlist-icon-hover
+.product-card.wishlist-icon:hover {
+    background-image: url('../images/wishadd.svg');
+}
+
 //product page price styles
 .product-price {
     margin-bottom: 14px;
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
index df3227acc..2a2c03b04 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -65,4 +65,16 @@
     background-image: url('../images/payment.svg');
     width: 32px;
     height: 32px;
+}
+
+.cart-icon {
+    background-image: url("../images/icon-cart.svg");
+    width: 24px;
+    height: 24px;
+}
+
+.wishlist-icon {
+    background-image: url('../images/wishlist.svg');
+    width: 32px;
+    height: 32px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php b/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
index 1ebdd16b1..8af90c782 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
@@ -2,6 +2,6 @@
 
     @include ('shop::products.add-to-cart', ['product' => $product])
 
-    <span class="wishlist"><img src="{{ bagisto_asset('images/wishlist.svg') }}" /></span>
+    <span class="product-card wishlist-icon"></span>
 
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
index 1c7993190..7ce67a402 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php
@@ -52,90 +52,4 @@
         </div>
     </div>
 
-@stop
-
-
-@push('scripts')
-
-<script>
-
-    window.onload = function() {
-
-        var sort = document.getElementById("sort");
-        var filter = document.getElementById("filter");
-
-        sort.addEventListener("click", myFunction);
-        filter.addEventListener("click", myFunction);
-
-        function myFunction(){
-
-            let className = document.getElementById(this.id).className;
-            var productGrid = document.getElementsByClassName('product-grid max-3-col');
-            var filterLayered = document.getElementsByClassName('layered-filter-wrapper');
-            var sortLimiter = document.getElementsByClassName('reponsive-sorter-limiter');
-
-            if(className === 'icon filter-icon'){
-
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="block";
-                    filterLayered[i].style.padding="20px";
-                    filterLayered[i].style.width="100%";
-                    filterLayered[i].style.marginTop = "-100px";
-                }
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "none";
-                }
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "none";
-                }
-
-                filter.classList.remove('icon', 'filter-icon');
-                filter.classList.add('icon', 'cross-icon');
-                sort.classList.remove('icon', 'cross-icon');
-                sort.classList.remove('icon', 'sort-icon');
-                sort.classList.add('icon', 'sort-icon');
-
-            }else if(className === 'icon sort-icon'){
-
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="none";
-                }
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "none";
-                }
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "flex";
-                    sortLimiter[i].style.justifyContent = "space-between";
-                }
-
-                sort.classList.remove('icon', 'sort-icon');
-                sort.classList.add('icon', 'cross-icon');
-                filter.classList.remove('icon', 'cross-icon');
-                filter.classList.remove('icon', 'filter-icon');
-                filter.classList.add('icon', 'filter-icon');
-
-            }else {
-
-                for(let i=0 ; i < productGrid.length ; i++){
-                    productGrid[i].style.display = "grid";
-                }
-                for(let i=0 ; i < filterLayered.length ; i++){
-                    filterLayered[i].style.display="none";
-                }
-                for(let i=0 ; i < sortLimiter.length ; i++){
-                    sortLimiter[i].style.display = "none";
-                }
-
-                sort.classList.remove('icon', 'cross-icon');
-                filter.classList.remove('icon', 'cross-icon');
-                sort.classList.remove('icon', 'sort-icon');
-                filter.classList.remove('icon', 'filter-icon');
-                sort.classList.add('icon', 'sort-icon');
-                filter.classList.add('icon', 'filter-icon');
-            }
-        }
-    }
-
-</script>
-
-@endpush
\ No newline at end of file
+@stop
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php b/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
index 584070fbf..3ad702efd 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
@@ -1,4 +1,4 @@
-<div class="cart-fav-seg">
+<div class="add-to-buttons">
 
     @include ('shop::products.add-to-cart', ['product' => $product])
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 521d467c0..82338f73c 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -78,43 +78,3 @@
 
 @endsection
 
-
-<style>
-
-    .header {
-        position: sticky;
-        top: 16px;
-    }
-
-</style>
-
-
-@push('scripts')
-
-    <script>
-
-        window.onscroll = function() {scrollFunction()};
-
-        function scrollFunction() {
-
-            var scrollTop = window.pageYOffset
-
-            var elems = document.getElementById("header-bottom");
-
-            if(scrollTop > 200){
-
-                elems.style.display = "none";
-
-            }else {
-                elems.style.display = "block";
-            }
-
-            console.log(scrollTop);
-        }
-
-    </script>
-
-@endpush
-
-
-
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
index 610a5c338..4619c3f45 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/icons.scss
@@ -132,12 +132,6 @@
     height: 24px;
 }
 
-.cart-icon {
-    background-image: url("../images/icon-cart.svg");
-    width: 24px;
-    height: 24px;
-}
-
 .expand-icon {
     background-image: url("../images/Expand-Light.svg");
     width: 18px;
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 0d83a069e..076b948dc 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -67,6 +67,18 @@
   height: 32px;
 }
 
+.cart-icon {
+  background-image: url("../images/icon-cart.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.wishlist-icon {
+  background-image: url("../images/wishlist.svg");
+  width: 32px;
+  height: 32px;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -271,6 +283,9 @@ body {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .product-card .cart-fav-seg .addtocart {
@@ -279,6 +294,14 @@ body {
   white-space: nowrap;
 }
 
+.product-card .cart-fav-seg .product-card.wishlist-icon {
+  cursor: pointer;
+}
+
+.product-card.wishlist-icon:hover {
+  background-image: url("../images/wishadd.svg");
+}
+
 .product-price {
   margin-bottom: 14px;
   width: 100%;
@@ -1424,7 +1447,7 @@ section.product-detail div.layouter form {
 }
 
 section.product-detail div.layouter form div.product-image-group {
-  margin-right: 36px;
+  margin-right: 30px;
 }
 
 section.product-detail div.layouter form div.product-image-group div {
@@ -1447,7 +1470,7 @@ section.product-detail div.layouter form div.product-image-group div .thumb-list
           flex-direction: column;
   margin-right: 4px;
   height: 480px;
-  width: 120px;
+  min-width: 120px;
   overflow: hidden;
   position: relative;
   -webkit-box-pack: start;
@@ -1458,8 +1481,7 @@ section.product-detail div.layouter form div.product-image-group div .thumb-list
 section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
   border: 2px solid transparent;
   background: #F2F2F2;
-  max-width: 120px;
-  width: auto;
+  width: 120px;
   height: 120px;
 }
 
@@ -1468,8 +1490,8 @@ section.product-detail div.layouter form div.product-image-group div .thumb-list
 }
 
 section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 
 section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
@@ -1540,18 +1562,24 @@ section.product-detail div.layouter form div.product-image-group div .product-he
   right: 45px;
 }
 
-section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
-  display: block;
+section.product-detail div.layouter form div.product-image-group .add-to-buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
   margin-top: 10px;
 }
 
-section.product-detail div.layouter form div.product-image-group .cart-fav-seg .addtocart {
+section.product-detail div.layouter form div.product-image-group .add-to-buttons .addtocart {
   border-radius: 0px;
   width: 49%;
   background: black;
 }
 
-section.product-detail div.layouter form div.product-image-group .cart-fav-seg .buynow {
+section.product-detail div.layouter form div.product-image-group .add-to-buttons .buynow {
   border-radius: 0px;
   width: 49%;
   float: right;
diff --git a/public/themes/default/assets/images/icon-cart.svg b/public/themes/default/assets/images/icon-cart.svg
new file mode 100644
index 000000000..652cb1094
--- /dev/null
+++ b/public/themes/default/assets/images/icon-cart.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-cart</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-cart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(2.000000, 2.000000)">
+            <path d="M3.5,1.5 L8.5,13.5" id="Line-2" stroke="#242424" stroke-width="3" stroke-linecap="round"></path>
+            <path d="M15.5,5.5 L19.5,13.5" id="Line-2" stroke="#242424" stroke-width="3" stroke-linecap="round" transform="translate(17.500000, 9.500000) scale(-1, 1) translate(-17.500000, -9.500000) "></path>
+            <path d="M5.5,5.5 L19.5,5.5" id="Line-2" stroke="#242424" stroke-width="3" stroke-linecap="round"></path>
+            <path d="M0.5,1.5 L3.5,1.5" id="Line-2" stroke="#242424" stroke-width="3" stroke-linecap="round"></path>
+            <path d="M8.5,13.5 L15.5,13.5" id="Line-2" stroke="#242424" stroke-width="3" stroke-linecap="round"></path>
+            <circle id="Oval" fill="#242424" cx="9" cy="18" r="2"></circle>
+            <circle id="Oval" fill="#242424" cx="15" cy="18" r="2"></circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file