From 489c1cdd1ba228f50ec0cb9a30468ee70eed6325 Mon Sep 17 00:00:00 2001 From: rahul shukla Date: Tue, 23 Oct 2018 17:21:04 +0530 Subject: [PATCH] customer group & responsive --- .../Webkul/Customer/src/Models/Customer.php | 4 +- ...stomersAddress.php => CustomerAddress.php} | 2 +- .../{CustomerGroups.php => CustomerGroup.php} | 2 +- .../CustomerAddressRepository.php | 2 +- .../Repositories/CustomerGroupRepository.php | 2 +- .../Repositories/ProductReviewRepository.php | 2 - .../Shop/src/Resources/assets/sass/app.scss | 329 +++++++++++--- .../src/Resources/assets/sass/components.scss | 15 - .../Shop/src/Resources/assets/sass/icons.scss | 6 + .../src/Resources/assets/sass/override.scss | 165 ------- .../Webkul/Shop/src/Resources/lang/en/app.php | 7 +- .../views/customers/account/index.blade.php | 26 -- .../customers/account/orders/view.blade.php | 10 +- .../account/partials/sidemenu.blade.php | 32 +- .../customers/account/reviews/index.blade.php | 7 +- .../account/reviews/reviews.blade.php | 5 + .../views/layouts/header/index.blade.php | 9 +- .../Resources/views/products/index.blade.php | 8 +- .../views/products/list/toolbar.blade.php | 48 +- public/themes/default/assets/css/shop.css | 420 +++++++++--------- 20 files changed, 570 insertions(+), 531 deletions(-) rename packages/Webkul/Customer/src/Models/{CustomersAddress.php => CustomerAddress.php} (86%) rename packages/Webkul/Customer/src/Models/{CustomerGroups.php => CustomerGroup.php} (84%) diff --git a/packages/Webkul/Customer/src/Models/Customer.php b/packages/Webkul/Customer/src/Models/Customer.php index c587195f4..9e31965d3 100644 --- a/packages/Webkul/Customer/src/Models/Customer.php +++ b/packages/Webkul/Customer/src/Models/Customer.php @@ -4,7 +4,7 @@ namespace Webkul\Customer\Models; use Illuminate\Notifications\Notifiable; use Illuminate\Foundation\Auth\User as Authenticatable; -use Webkul\Customer\Models\CustomersGroups; +use Webkul\Customer\Models\CustomerGroup; use Webkul\Sales\Models\Order; // use Webkul\User\Notifications\AdminResetPassword; @@ -36,6 +36,6 @@ class Customer extends Authenticatable */ public function customerGroup() { - return $this->belongsTo(CustomersGroups::class); + return $this->belongsTo(CustomerGroup::class); } } diff --git a/packages/Webkul/Customer/src/Models/CustomersAddress.php b/packages/Webkul/Customer/src/Models/CustomerAddress.php similarity index 86% rename from packages/Webkul/Customer/src/Models/CustomersAddress.php rename to packages/Webkul/Customer/src/Models/CustomerAddress.php index 2e9ffbd2e..927742082 100644 --- a/packages/Webkul/Customer/src/Models/CustomersAddress.php +++ b/packages/Webkul/Customer/src/Models/CustomerAddress.php @@ -3,7 +3,7 @@ namespace Webkul\Customer\Models; use Illuminate\Database\Eloquent\Model; -class CustomersAddress extends Model +class CustomerAddress extends Model { protected $table = 'customer_addresses'; diff --git a/packages/Webkul/Customer/src/Models/CustomerGroups.php b/packages/Webkul/Customer/src/Models/CustomerGroup.php similarity index 84% rename from packages/Webkul/Customer/src/Models/CustomerGroups.php rename to packages/Webkul/Customer/src/Models/CustomerGroup.php index 27ed1a786..47e77ff5b 100644 --- a/packages/Webkul/Customer/src/Models/CustomerGroups.php +++ b/packages/Webkul/Customer/src/Models/CustomerGroup.php @@ -3,7 +3,7 @@ namespace Webkul\Customer\Models; use Illuminate\Database\Eloquent\Model; -class CustomersGroups extends Model +class CustomerGroup extends Model { protected $table = 'customer_groups'; diff --git a/packages/Webkul/Customer/src/Repositories/CustomerAddressRepository.php b/packages/Webkul/Customer/src/Repositories/CustomerAddressRepository.php index 621c91bae..b172328e7 100644 --- a/packages/Webkul/Customer/src/Repositories/CustomerAddressRepository.php +++ b/packages/Webkul/Customer/src/Repositories/CustomerAddressRepository.php @@ -21,7 +21,7 @@ class CustomerAddressRepository extends Repository function model() { - return 'Webkul\Customer\Models\CustomersAddress'; + return 'Webkul\Customer\Models\CustomerAddress'; } /** diff --git a/packages/Webkul/Customer/src/Repositories/CustomerGroupRepository.php b/packages/Webkul/Customer/src/Repositories/CustomerGroupRepository.php index 2aa6489df..28746cb72 100644 --- a/packages/Webkul/Customer/src/Repositories/CustomerGroupRepository.php +++ b/packages/Webkul/Customer/src/Repositories/CustomerGroupRepository.php @@ -21,7 +21,7 @@ class CustomerGroupRepository extends Repository function model() { - return 'Webkul\Customer\Models\CustomersGroups'; + return 'Webkul\Customer\Models\CustomerGroup'; } /** diff --git a/packages/Webkul/Product/src/Repositories/ProductReviewRepository.php b/packages/Webkul/Product/src/Repositories/ProductReviewRepository.php index 71c19f9ce..1a4ec846c 100644 --- a/packages/Webkul/Product/src/Repositories/ProductReviewRepository.php +++ b/packages/Webkul/Product/src/Repositories/ProductReviewRepository.php @@ -57,8 +57,6 @@ class ProductReviewRepository extends Repository $reviews = $this->model->where(['customer_id'=> $customerId, 'status' => 'approved'])->with('product')->get(); - // dd($reviews); - return $reviews; } } \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index c0cf15bd0..6e34f1eb0 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -33,6 +33,13 @@ grid-auto-rows: auto; } + @media only screen and (max-width: 551px) { + .product-grid-3 { + grid-template-columns: 48.5% 48.5%; + grid-column-gap: 20px; + } + } + @media only screen and (max-width: 854px) { .product-grid-4 { grid-template-columns: 29.5% 29.5% 29.5%; @@ -121,6 +128,21 @@ } } + @media only screen and (max-width: 425px) { + .product-card { + font-size: 90%; + + .btn.btn-md { + padding: 5px; + } + } + + .product-grid-4 { + grid-template-columns: 48.5% 48.5%; + grid-column-gap: 10px; + } + } + .product-list { min-height: 200px; @@ -724,8 +746,43 @@ section.slider-block { @media all and (max-width: 720px) { - .header-bottom { - display: none !important; + .header { + .header-bottom { + height: auto; + display: none; + + .nav a { + display:inline-block; + padding: 12px 4.8px 12px 8px; + } + + ul.nav , .nav li{ + height: auto; + } + + .nav > li { + float: none; + } + + .nav li ul { + padding-left: 20px; + } + + .nav li > .icon{ + float: right; + display: block; + } + + .nav li a > .icon{ + display: none; + } + + .nav ul { + position: unset; + border: none; + box-shadow: none; + } + } } ul.search-container { @@ -743,51 +800,6 @@ section.slider-block { ul.right-responsive { display: flex !important; } - - .responsive-nav { - margin-top: 20px; - display: none; - - .nav a { - display:inline-block; - color: $font-color; - text-decoration: none; - padding: 12px 4.8px 12px 8px; - text-transform: uppercase; - letter-spacing: 2px; - } - - .nav li > .icon{ - float: right; - } - - .nav li a > .icon{ - display: none; - } - - .nav > li { - border-bottom: 1px solid $border-color; - } - - .nav li ul { - padding-left: 30px; - } - - .nav li:first-child { - border-top: 1px solid $border-color; - } - - .nav > li:last-child { - float:none; - height: 45px; - display: none; - border: none; - - img { - margin-right:6px; - } - } - } } //footer responsive with out media query. @@ -877,6 +889,100 @@ section.slider-block { flex-direction: row; width: 100%; + .layered-filter-wrapper { + width: 25%; + float: left; + padding-right: 20px; + min-height: 1px; + + .filter-title { + border-bottom: 1px solid $border-color; + color: $font-color; + padding: 10px 0; + } + + .filter-attributes { + .filter-attributes-item { + border-bottom: 1px solid $border-color; + padding-bottom: 10px; + + .filter-attributes-title { + padding: 10px 40px 0 10px; + color: #5E5E5E; + cursor: pointer; + position: relative; + + .remove-filter-link { + font-weight: 400; + color: $brand-color; + margin-right: 10px; + } + + .icon { + background-image: url('../images/arrow-down.svg') !important; + width: 10px; + height: 10px; + position: absolute; + right: 15px; + top: 14px; + } + } + + .filter-attributes-content { + padding: 10px; + display: none; + + ol.items { + padding: 0; + margin: 0; + list-style: none none; + + li.item { + padding: 8px 0; + color: #5E5E5E; + + .checkbox { + margin: 0; + + .checkbox-view { + height: 16px; + width: 16px; + background-image: url("../images/checkbox.svg"); + } + + input:checked + .checkbox-view { + background-image: url("../images/checkbox-checked.svg"); + } + } + } + } + + .price-range-wrapper { + margin-top: 21px; + } + } + + &.active { + .filter-attributes-content { + display: block; + } + + .filter-attributes-title .icon { + background-image: url('../images//arrow-up.svg') !important; + } + } + } + } + } + + .responsive-layred-filter { + display: none; + @extend .layered-filter-wrapper; + width: 100%; + float: none; + padding-right: 0px; + } + .category-block { width: 80%; display: block; @@ -904,12 +1010,12 @@ section.slider-block { color: $font-color; line-height: 45px; - span:first-child { - display: inline; - } - - span:last-child { + span { display: none; + + &:first-child { + display: inline; + } } } @@ -957,14 +1063,6 @@ section.slider-block { } } - .reponsive-sorter-limiter { - display: none; - } - - .responsive-layred-filter{ - display: none; - } - .bottom-toolbar { display: block; margin-top: 40px; @@ -973,6 +1071,55 @@ section.slider-block { } } +//category page responsivs css +@media only screen and (max-width: 840px) { + .main { + .layered-filter-wrapper{ + display: none; + } + + .category-block { + width: 100% !important; + + .top-toolbar { + display: flex; + flex-direction: column; + + .page-info { + border-bottom: 1px solid $border-color; + line-height: 15px; + + span { + display: inline; + + &:first-child{ + display: none; + } + } + + .sort-filter { + float: right; + cursor: pointer; + } + } + + .pager { + margin-top: 20px; + display: none; + + .view-mode { + display: none; + } + } + } + + .responsive-layred-filter { + display: block; + } + } + } +} + // product pages css starts here section.product-detail { color: $font-color; @@ -2158,6 +2305,67 @@ section.review { } } +@media only screen and (max-width: 770px) { + .sale-container { + .sale-section { + .section-content { + .row { + display: flex; + flex-direction: column; + + .title { + line-height: 20px; + } + } + + // .table { + // table { + // display: flex; + // border: none; + + // tr { + // display: grid; + // } + + // thead th , tbody td { + // font-weight: 700; + // padding: 12px 0px; + // background: none; + // color: $font-color; + // } + // } + // } + + .totals { + .sale-summary { + width: 100%; + + tr { + td { + &:nth-child(2) { + display: none; + } + + } + } + } + } + .order-box-container { + display: flex; + flex-direction: column; + + .box { + width: 100%; + margin: 10px auto; + } + } + } + } + } +} + + + @media only screen and (max-width: 770px) { .account-content { flex-direction: column; @@ -2235,7 +2443,6 @@ section.review { } } - // css for loader .cp-spinner { margin-left: 46%; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss index b5259a317..18ec3a43f 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss @@ -1,18 +1,3 @@ -@media only screen and (max-width: 425px) { - .product-card { - font-size: 90%; - - .btn.btn-md { - padding: 5px; - } - } - - .product-grid-4 { - grid-template-columns: 48.5% 48.5%; - grid-column-gap: 10px; - } -} - //wishlist icon hover properties .add-to-wishlist { diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss index e1757818f..0ad81d721 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss @@ -118,4 +118,10 @@ background-image: url("../images/Expand-Light-On.svg"); width: 18px; height: 18px; +} + +.icon-menu-close-adj { + background-image: url("../images/cross-icon-adj.svg"); + width: 32px; + height: 32px; } \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss index ad44108ae..898cc8495 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss @@ -126,168 +126,3 @@ body { .mt-90 { margin-top: 90px; } - -@media only screen and (max-width: 551px) { - .product-grid-3 { - grid-template-columns: 48.5% 48.5%; - grid-column-gap: 20px; - } -} - -@media only screen and (max-width: 840px) { - - .layered-filter-wrapper{ - display: none; - } - - .main { - - .category-block { - width: 100% !important; - - .top-toolbar { - border-bottom: 1px solid $border-color; - - .page-info { - - span:first-child { - display: none; - } - - span:last-child { - display: inline; - } - } - - .pager { - - .view-mode { - margin-right: 0px; - - .grid-view , .list-view { - display: none; - } - - .sort-filter { - cursor: pointer; - display: inline-block; - margin-top: 10px; - } - } - - .sorter , .limiter{ - display: none; - } - } - } - - .reponsive-sorter-limiter { - display: none; - - select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; - } - } - } - } - -} - -//layered filter wrapper styles -.layered-filter-wrapper { - width: 25%; - float: left; - padding-right: 20px; - min-height: 1px; - - .filter-title { - border-bottom: 1px solid $border-color; - color: $font-color; - padding: 10px 0; - } - - .filter-attributes { - .filter-attributes-item { - border-bottom: 1px solid $border-color; - padding-bottom: 10px; - - .filter-attributes-title { - padding: 10px 40px 0 10px; - color: #5E5E5E; - cursor: pointer; - position: relative; - - .remove-filter-link { - font-weight: 400; - color: $brand-color; - margin-right: 10px; - } - - .icon { - background-image: url('../images/arrow-down.svg') !important; - width: 10px; - height: 10px; - position: absolute; - right: 15px; - top: 14px; - } - } - - .filter-attributes-content { - padding: 10px; - display: none; - - ol.items { - padding: 0; - margin: 0; - list-style: none none; - - li.item { - padding: 8px 0; - color: #5E5E5E; - - .checkbox { - margin: 0; - - .checkbox-view { - height: 16px; - width: 16px; - background-image: url("../images/checkbox.svg"); - } - - input:checked + .checkbox-view { - background-image: url("../images/checkbox-checked.svg"); - } - } - } - } - - .price-range-wrapper { - margin-top: 21px; - } - } - - &.active { - .filter-attributes-content { - display: block; - } - - .filter-attributes-title .icon { - background-image: url('../images//arrow-up.svg') !important; - } - } - } - } -} - -.responsive-layred-filter { - @extend .layered-filter-wrapper; - width: 100%; - float: none; - padding-right: 0px; -} - diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php index 973b47420..bbed35b6b 100644 --- a/packages/Webkul/Shop/src/Resources/lang/en/app.php +++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php @@ -168,7 +168,12 @@ return [ 'review' => [ 'index' => [ - 'title' => 'Reviews' + 'title' => 'Reviews', + 'page-title' => 'Customer - Reviews' + ], + + 'view' => [ + 'page-tile' => 'Review #:id', ] ] ] diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/index.blade.php index 49ff25e8a..efd7966d1 100644 --- a/packages/Webkul/Shop/src/Resources/views/customers/account/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/customers/account/index.blade.php @@ -5,29 +5,3 @@

Account Index Page

@endsection -@push('scripts') - +@endpush \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/index.blade.php index a81ab1a9a..d3c8bc759 100644 --- a/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/index.blade.php @@ -1,6 +1,11 @@ @inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage') @extends('shop::layouts.master') + +@section('page_title') + {{ __('shop::app.customer.account.review.index.page-title') }} +@endsection + @section('content-wrapper')
@include('shop::customers.account.partials.sidemenu') @@ -48,7 +53,7 @@ @endforeach @else
- {{-- {{ __('customer::app.wishlist.empty') }} --}} + {{ __('customer::app.reviews.empty') }}
@endif diff --git a/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/reviews.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/reviews.blade.php index 84f1ba4b5..388e916b3 100644 --- a/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/reviews.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/customers/account/reviews/reviews.blade.php @@ -1,6 +1,11 @@ @inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage') @extends('shop::layouts.master') + +@section('page_title') + {{ __('shop::app.customer.account.review.view.page-title') }} +@endsection + @section('content-wrapper') -
- -
@push('scripts') @@ -218,7 +215,7 @@ var searchResponsive = document.getElementsByClassName('search-responsive')[0]; var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0]; var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0]; - var navResponsive = document.getElementsByClassName('responsive-nav')[0]; + var navResponsive = document.getElementsByClassName('header-bottom')[0]; var thumbList = document.getElementsByClassName('thumb-list')[0]; search.addEventListener("click", header); 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 4681b375b..6a5fb2d81 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php @@ -69,9 +69,11 @@ $(document).ready(function() { var sort = document.getElementById("sort"); var filter = document.getElementById("filter"); - var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0]; + var sortLimit = document.getElementsByClassName('pager')[0]; var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0]; + layerFilter.style.display ="none"; + if(sort && filter) { sort.addEventListener("click", sortFilter); filter.addEventListener("click", sortFilter); @@ -84,7 +86,7 @@ sort.classList.remove("sort-icon"); sort.classList.add("icon-menu-close-adj"); - filter.classList.remove("icon-menu-close"); + filter.classList.remove("icon-menu-close-adj"); filter.classList.add("filter-icon"); sortLimit.style.display = "flex"; @@ -98,6 +100,8 @@ sort.classList.add("sort-icon"); layerFilter.style.display = "block"; + layerFilter.style.marginTop = "10px"; + sortLimit.style.display = "none"; } else { sort.classList.remove("icon-menu-close-adj"); diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php index b93e40f6c..a0a3ee1de 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php @@ -7,7 +7,12 @@ {{ __('shop::app.products.pager-info', ['showing' => $products->firstItem() . '-' . $products->lastItem(), 'total' => $products->total()]) }} - Men + Men + + + + +
@@ -32,12 +37,6 @@ @endif - -
- - -
-
@@ -76,41 +75,6 @@
-
- -
- - - -
- -
- - - -
- -
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index 3b03c9279..2df5b4df1 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -120,17 +120,10 @@ height: 18px; } -@media only screen and (max-width: 425px) { - .product-card { - font-size: 90%; - } - .product-card .btn.btn-md { - padding: 5px; - } - .product-grid-4 { - grid-template-columns: 48.5% 48.5%; - grid-column-gap: 10px; - } +.icon-menu-close-adj { + background-image: url("../images/cross-icon-adj.svg"); + width: 32px; + height: 32px; } .add-to-wishlist .wishlist-icon:hover { @@ -380,143 +373,6 @@ body { margin-top: 90px; } -@media only screen and (max-width: 551px) { - .product-grid-3 { - grid-template-columns: 48.5% 48.5%; - grid-column-gap: 20px; - } -} - -@media only screen and (max-width: 840px) { - .layered-filter-wrapper, .responsive-layred-filter { - display: none; - } - .main .category-block { - width: 100% !important; - } - .main .category-block .top-toolbar { - border-bottom: 1px solid #C7C7C7; - } - .main .category-block .top-toolbar .page-info span:first-child { - display: none; - } - .main .category-block .top-toolbar .page-info span:last-child { - display: inline; - } - .main .category-block .top-toolbar .pager .view-mode { - margin-right: 0px; - } - .main .category-block .top-toolbar .pager .view-mode .grid-view, .main .category-block .top-toolbar .pager .view-mode .list-view { - display: none; - } - .main .category-block .top-toolbar .pager .view-mode .sort-filter { - cursor: pointer; - display: inline-block; - margin-top: 10px; - } - .main .category-block .top-toolbar .pager .sorter, .main .category-block .top-toolbar .pager .limiter { - display: none; - } - .main .category-block .reponsive-sorter-limiter { - display: none; - } - .main .category-block .reponsive-sorter-limiter select { - background: #FFFFFF; - border: 1px solid #C7C7C7; - border-radius: 3px; - color: #242424; - padding: 10px; - } -} - -.layered-filter-wrapper, .responsive-layred-filter { - width: 25%; - float: left; - padding-right: 20px; - min-height: 1px; -} - -.layered-filter-wrapper .filter-title, .responsive-layred-filter .filter-title { - border-bottom: 1px solid #C7C7C7; - color: #242424; - padding: 10px 0; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item, .responsive-layred-filter .filter-attributes .filter-attributes-item { - border-bottom: 1px solid #C7C7C7; - padding-bottom: 10px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title { - padding: 10px 40px 0 10px; - color: #5E5E5E; - cursor: pointer; - position: relative; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link { - font-weight: 400; - color: #0031F0; - margin-right: 10px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title .icon { - background-image: url("../images/arrow-down.svg") !important; - width: 10px; - height: 10px; - position: absolute; - right: 15px; - top: 14px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content { - padding: 10px; - display: none; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items { - padding: 0; - margin: 0; - list-style: none none; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item { - padding: 8px 0; - color: #5E5E5E; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox { - margin: 0; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view { - height: 16px; - width: 16px; - background-image: url("../images/checkbox.svg"); -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view { - background-image: url("../images/checkbox-checked.svg"); -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper, .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper { - margin-top: 21px; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content, .responsive-layred-filter .filter-attributes .filter-attributes-item.active .filter-attributes-content { - display: block; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon, .responsive-layred-filter .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { - background-image: url("../images//arrow-up.svg") !important; -} - -.responsive-layred-filter { - width: 100%; - float: none; - padding-right: 0px; -} - .main-container-wrapper { max-width: 1300px; width: auto; @@ -545,6 +401,13 @@ body { grid-auto-rows: auto; } +@media only screen and (max-width: 551px) { + .main-container-wrapper .product-grid-3 { + grid-template-columns: 48.5% 48.5%; + grid-column-gap: 20px; + } +} + @media only screen and (max-width: 854px) { .main-container-wrapper .product-grid-4 { grid-template-columns: 29.5% 29.5% 29.5%; @@ -639,6 +502,19 @@ body { background: #2ED04C; } +@media only screen and (max-width: 425px) { + .main-container-wrapper .product-card { + font-size: 90%; + } + .main-container-wrapper .product-card .btn.btn-md { + padding: 5px; + } + .main-container-wrapper .product-grid-4 { + grid-template-columns: 48.5% 48.5%; + grid-column-gap: 10px; + } +} + .main-container-wrapper .product-list { min-height: 200px; } @@ -1322,8 +1198,35 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { } @media all and (max-width: 720px) { - .header-bottom { - display: none !important; + .header .header-bottom { + height: auto; + display: none; + } + .header .header-bottom .nav a { + display: inline-block; + padding: 12px 4.8px 12px 8px; + } + .header .header-bottom ul.nav, .header .header-bottom .nav li { + height: auto; + } + .header .header-bottom .nav > li { + float: none; + } + .header .header-bottom .nav li ul { + padding-left: 20px; + } + .header .header-bottom .nav li > .icon { + float: right; + display: block; + } + .header .header-bottom .nav li a > .icon { + display: none; + } + .header .header-bottom .nav ul { + position: unset; + border: none; + -webkit-box-shadow: none; + box-shadow: none; } ul.search-container { display: none !important; @@ -1339,42 +1242,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { display: -ms-flexbox !important; display: flex !important; } - .responsive-nav { - margin-top: 20px; - display: none; - } - .responsive-nav .nav a { - display: inline-block; - color: #242424; - text-decoration: none; - padding: 12px 4.8px 12px 8px; - text-transform: uppercase; - letter-spacing: 2px; - } - .responsive-nav .nav li > .icon { - float: right; - } - .responsive-nav .nav li a > .icon { - display: none; - } - .responsive-nav .nav > li { - border-bottom: 1px solid #C7C7C7; - } - .responsive-nav .nav li ul { - padding-left: 30px; - } - .responsive-nav .nav li:first-child { - border-top: 1px solid #C7C7C7; - } - .responsive-nav .nav > li:last-child { - float: none; - height: 45px; - display: none; - border: none; - } - .responsive-nav .nav > li:last-child img { - margin-right: 6px; - } } .footer { @@ -1460,6 +1327,95 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { width: 100%; } +.main .category-container .layered-filter-wrapper, .main .category-container .responsive-layred-filter { + width: 25%; + float: left; + padding-right: 20px; + min-height: 1px; +} + +.main .category-container .layered-filter-wrapper .filter-title, .main .category-container .responsive-layred-filter .filter-title { + border-bottom: 1px solid #C7C7C7; + color: #242424; + padding: 10px 0; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item { + border-bottom: 1px solid #C7C7C7; + padding-bottom: 10px; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title { + padding: 10px 40px 0 10px; + color: #5E5E5E; + cursor: pointer; + position: relative; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link { + font-weight: 400; + color: #0031F0; + margin-right: 10px; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .icon, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-title .icon { + background-image: url("../images/arrow-down.svg") !important; + width: 10px; + height: 10px; + position: absolute; + right: 15px; + top: 14px; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content { + padding: 10px; + display: none; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items { + padding: 0; + margin: 0; + list-style: none none; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item { + padding: 8px 0; + color: #5E5E5E; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox { + margin: 0; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox .checkbox-view { + height: 16px; + width: 16px; + background-image: url("../images/checkbox.svg"); +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item .checkbox input:checked + .checkbox-view { + background-image: url("../images/checkbox-checked.svg"); +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item .filter-attributes-content .price-range-wrapper { + margin-top: 21px; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-content, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item.active .filter-attributes-content { + display: block; +} + +.main .category-container .layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon, .main .category-container .responsive-layred-filter .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { + background-image: url("../images//arrow-up.svg") !important; +} + +.main .category-container .responsive-layred-filter { + display: none; + width: 100%; + float: none; + padding-right: 0px; +} + .main .category-container .category-block { width: 80%; display: block; @@ -1488,12 +1444,12 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { line-height: 45px; } -.main .top-toolbar .page-info span:first-child { - display: inline; +.main .top-toolbar .page-info span { + display: none; } -.main .top-toolbar .page-info span:last-child { - display: none; +.main .top-toolbar .page-info span:first-child { + display: inline; } .main .top-toolbar .pager { @@ -1539,14 +1495,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { display: inline-block; } -.main .reponsive-sorter-limiter { - display: none; -} - -.main .responsive-layred-filter { - display: none; -} - .main .bottom-toolbar { display: block; margin-top: 40px; @@ -1554,6 +1502,48 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { text-align: center; } +@media only screen and (max-width: 840px) { + .main .layered-filter-wrapper, .main .category-container .responsive-layred-filter { + display: none; + } + .main .category-block { + width: 100% !important; + } + .main .category-block .top-toolbar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .main .category-block .top-toolbar .page-info { + border-bottom: 1px solid #C7C7C7; + line-height: 15px; + } + .main .category-block .top-toolbar .page-info span { + display: inline; + } + .main .category-block .top-toolbar .page-info span:first-child { + display: none; + } + .main .category-block .top-toolbar .page-info .sort-filter { + float: right; + cursor: pointer; + } + .main .category-block .top-toolbar .pager { + margin-top: 20px; + display: none; + } + .main .category-block .top-toolbar .pager .view-mode { + display: none; + } + .main .category-block .responsive-layred-filter { + display: block; + } +} + section.product-detail { color: #242424; } @@ -2757,6 +2747,40 @@ section.review .review-layouter .review-form .review-detail .rating-calculate .p border-bottom: 1px solid #C7C7C7; } +@media only screen and (max-width: 770px) { + .sale-container .sale-section .section-content .row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .sale-container .sale-section .section-content .row .title { + line-height: 20px; + } + .sale-container .sale-section .section-content .totals .sale-summary { + width: 100%; + } + .sale-container .sale-section .section-content .totals .sale-summary tr td:nth-child(2) { + display: none; + } + .sale-container .sale-section .section-content .order-box-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .sale-container .sale-section .section-content .order-box-container .box { + width: 100%; + margin: 10px auto; + } +} + @media only screen and (max-width: 770px) { .account-content { -webkit-box-orient: vertical;