merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive fixes

This commit is contained in:
prashant-webkul 2018-10-03 18:21:17 +05:30
parent a5123fb3b6
commit e6e71a7128
12 changed files with 87 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/Webkul/Shop/src/Http/routes.php
View File

@ -35,11 +35,6 @@ Route::group(['middleware' => ['web']], function () {
'view' => 'shop::products.view' 'view' => 'shop::products.view'
])->name('shop.products.index'); ])->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::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'); Route::get('product/cart/remove/{id}', 'Webkul\Shop\Http\Controllers\CartController@remove')->name('cart.remove');

0
packages/Webkul/Ui/src/Resources/assets/images/icon-cart.svg → packages/Webkul/Shop/src/Resources/assets/images/icon-cart.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

14
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -944,7 +944,7 @@ section.product-detail {
width: 100%; width: 100%;
div.product-image-group { div.product-image-group {
margin-right: 36px; margin-right: 30px;
div { div {
display: flex; display: flex;
@ -955,7 +955,7 @@ section.product-detail {
flex-direction: column; flex-direction: column;
margin-right: 4px; margin-right: 4px;
height: 480px; height: 480px;
width: 120px; min-width: 120px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
justify-content: flex-start; justify-content: flex-start;
@ -963,8 +963,7 @@ section.product-detail {
.thumb-frame { .thumb-frame {
border: 2px solid transparent; border: 2px solid transparent;
background: #F2F2F2; background: #F2F2F2;
max-width: 120px; width: 120px;
width: auto;
height: 120px; height: 120px;
&.active { &.active {
@ -972,8 +971,8 @@ section.product-detail {
} }
img { img {
width: 100%;
height: 100%; height: 100%;
width: 100%;
} }
} }
@ -1047,8 +1046,9 @@ section.product-detail {
} }
} }
.cart-fav-seg { .add-to-buttons {
display: block; display: flex;
flex-direction: row;
margin-top: 10px; margin-top: 10px;
.addtocart { .addtocart {

10
packages/Webkul/Shop/src/Resources/assets/sass/components.scss vendored
View File

@ -84,15 +84,25 @@
.cart-fav-seg { .cart-fav-seg {
display: inline-flex; display: inline-flex;
align-items: center;
.addtocart { .addtocart {
margin-right: 10px; margin-right: 10px;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; 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 page price styles
.product-price { .product-price {
margin-bottom: 14px; margin-bottom: 14px;

12
packages/Webkul/Shop/src/Resources/assets/sass/icons.scss vendored
View File

@ -65,4 +65,16 @@
background-image: url('../images/payment.svg'); background-image: url('../images/payment.svg');
width: 32px; width: 32px;
height: 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;
} }

2
packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
View File

@ -2,6 +2,6 @@
@include ('shop::products.add-to-cart', ['product' => $product]) @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> </div>

88
packages/Webkul/Shop/src/Resources/views/products/index.blade.php
View File

@ -52,90 +52,4 @@
</div> </div>
</div> </div>
@stop @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

2
packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
View File

@ -1,4 +1,4 @@
<div class="cart-fav-seg"> <div class="add-to-buttons">
@include ('shop::products.add-to-cart', ['product' => $product]) @include ('shop::products.add-to-cart', ['product' => $product])

40
packages/Webkul/Shop/src/Resources/views/products/view.blade.php
View File

@ -78,43 +78,3 @@
@endsection @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

6
packages/Webkul/Ui/src/Resources/assets/sass/icons.scss vendored
View File

@ -132,12 +132,6 @@
height: 24px; height: 24px;
} }
.cart-icon {
background-image: url("../images/icon-cart.svg");
width: 24px;
height: 24px;
}
.expand-icon { .expand-icon {
background-image: url("../images/Expand-Light.svg"); background-image: url("../images/Expand-Light.svg");
width: 18px; width: 18px;

46
public/themes/default/assets/css/shop.css vendored
View File

@ -67,6 +67,18 @@
height: 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;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -271,6 +283,9 @@ body {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
display: inline-flex; display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
.product-card .cart-fav-seg .addtocart { .product-card .cart-fav-seg .addtocart {
@ -279,6 +294,14 @@ body {
white-space: nowrap; 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 { .product-price {
margin-bottom: 14px; margin-bottom: 14px;
width: 100%; width: 100%;
@ -1424,7 +1447,7 @@ section.product-detail div.layouter form {
} }
section.product-detail div.layouter form div.product-image-group { 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 { 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; flex-direction: column;
margin-right: 4px; margin-right: 4px;
height: 480px; height: 480px;
width: 120px; min-width: 120px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
-webkit-box-pack: start; -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 { section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
border: 2px solid transparent; border: 2px solid transparent;
background: #F2F2F2; background: #F2F2F2;
max-width: 120px; width: 120px;
width: auto;
height: 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 { section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
width: 100%;
height: 100%; height: 100%;
width: 100%;
} }
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control { 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; right: 45px;
} }
section.product-detail div.layouter form div.product-image-group .cart-fav-seg { section.product-detail div.layouter form div.product-image-group .add-to-buttons {
display: block; 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; 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; border-radius: 0px;
width: 49%; width: 49%;
background: black; 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; border-radius: 0px;
width: 49%; width: 49%;
float: right; float: right;

18
public/themes/default/assets/images/icon-cart.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB