customer group & responsive

This commit is contained in:
rahul shukla 2018-10-23 17:21:04 +05:30
parent 399ba55982
commit 489c1cdd1b
20 changed files with 570 additions and 531 deletions

View File

@ -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);
}
}

View File

@ -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';

View File

@ -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';

View File

@ -21,7 +21,7 @@ class CustomerAddressRepository extends Repository
function model()
{
return 'Webkul\Customer\Models\CustomersAddress';
return 'Webkul\Customer\Models\CustomerAddress';
}
/**

View File

@ -21,7 +21,7 @@ class CustomerGroupRepository extends Repository
function model()
{
return 'Webkul\Customer\Models\CustomersGroups';
return 'Webkul\Customer\Models\CustomerGroup';
}
/**

View File

@ -57,8 +57,6 @@ class ProductReviewRepository extends Repository
$reviews = $this->model->where(['customer_id'=> $customerId, 'status' => 'approved'])->with('product')->get();
// dd($reviews);
return $reviews;
}
}

View File

@ -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%;

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

@ -168,7 +168,12 @@ return [
'review' => [
'index' => [
'title' => 'Reviews'
'title' => 'Reviews',
'page-title' => 'Customer - Reviews'
],
'view' => [
'page-tile' => 'Review #:id',
]
]
]

View File

@ -5,29 +5,3 @@
<h1>Account Index Page</h1>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function(){
var sideMenuTitle = document.getElementById("responsive-side-menu");
var downIcon = document.getElementById("down-icon");
var accountSideMenu = document.getElementsByClassName("account-side-menu");
sideMenuTitle.addEventListener("click", function(){
if(downIcon.className == 'icon icon-arrow-down right'){
for(let i=0 ; i < accountSideMenu.length ; i++){
accountSideMenu[i].style.display="block";
}
downIcon.classList.remove("icon","icon-arrow-down","right");
downIcon.classList.add("icon","icon-arrow-up","right");
}else{
for(let i=0 ; i < accountSideMenu.length ; i++){
accountSideMenu[i].style.display="none";
}
downIcon.classList.remove("icon","icon-arrow-up","right");
downIcon.classList.add("icon","icon-arrow-down","right");
}
});
});
@endpush

View File

@ -25,11 +25,11 @@
<div class="sale-section">
<div class="section-content">
<div class="row">
<span class="title">
<span class="title">
{{ __('shop::app.customer.account.order.view.placed-on') }}
</span>
<span class="value">
<span class="value">
{{ core()->formatDate($order->created_at, 'd M Y') }}
</span>
</div>
@ -214,7 +214,7 @@
</div>
</div>
</div>
@endforeach
</tab>
@ -245,7 +245,7 @@
<tbody>
@foreach ($shipment->items as $item)
<tr>
<td>{{ $item->sku }}</td>
<td>{{ $item->name }}</td>
@ -320,7 +320,7 @@
</div>
</div>
</div>
</div>

View File

@ -13,4 +13,34 @@
<i class="icon angle-right-icon"></i>
</li>
@endforeach
</ul>
</ul>
@push('scripts')
<script>
$(document).ready(function(){
var sideMenuTitle = document.getElementById("responsive-side-menu");
var downIcon = document.getElementById("down-icon");
var accountSideMenu = document.getElementsByClassName("account-side-menu");
console.log(accountSideMenu);
sideMenuTitle.addEventListener("click", function(){
if(downIcon.className == 'icon icon-arrow-down right'){
for(let i=0 ; i < accountSideMenu.length ; i++){
accountSideMenu[i].style.display="block";
}
downIcon.classList.remove("icon","icon-arrow-down","right");
downIcon.classList.add("icon","icon-arrow-up","right");
}else{
for(let i=0 ; i < accountSideMenu.length ; i++){
accountSideMenu[i].style.display="none";
}
downIcon.classList.remove("icon","icon-arrow-up","right");
downIcon.classList.add("icon","icon-arrow-down","right");
}
});
});
</script>
@endpush

View File

@ -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')
<div class="account-content">
@include('shop::customers.account.partials.sidemenu')
@ -48,7 +53,7 @@
@endforeach
@else
<div class="empty">
{{-- {{ __('customer::app.wishlist.empty') }} --}}
{{ __('customer::app.reviews.empty') }}
</div>
@endif

View File

@ -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')
<div class="account-content">
@include('shop::customers.account.partials.sidemenu')

View File

@ -105,7 +105,7 @@
<li class="cart-dropdown">
<span class="icon cart-icon"></span>
@include('shop::checkout.cart.mini-cart')
</li>
</ul>
@ -169,7 +169,7 @@
<li class="cart-dropdown">
<?php $cart = cart()->getCart(); ?>
@if(isset($cart))
<div>
<a href="{{ route('shop.checkout.cart.index') }}">
@ -205,9 +205,6 @@
</div> --}}
</div>
<div class="responsive-nav">
<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
</div>
</div>
@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);

View File

@ -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");

View File

@ -7,7 +7,12 @@
{{ __('shop::app.products.pager-info', ['showing' => $products->firstItem() . '-' . $products->lastItem(), 'total' => $products->total()]) }}
</span>
<span>Men</span>
<span> Men </span>
<span class="sort-filter">
<i class="icon sort-icon" id="sort" ></i>
<i class="icon filter-icon" id="filter"></i>
</span>
</div>
<div class="pager">
@ -32,12 +37,6 @@
<i class="icon list-view-icon"></i>
</a>
@endif
<div class="sort-filter">
<i class="icon sort-icon" id="sort" ></i>
<i class="icon filter-icon" id="filter"></i>
</div>
</div>
<div class="sorter">
@ -76,41 +75,6 @@
</div>
<div class="reponsive-sorter-limiter mb-20">
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
<select onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
<option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
{{ __('shop::app.products.' . $order) }}
</option>
@endforeach
</select>
</div>
<div class="limiter">
<label>{{ __('shop::app.products.show') }}</label>
<select onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableLimits() as $limit)
<option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
{{ $limit }}
</option>
@endforeach
</select>
</div>
</div>
<div class="responsive-layred-filter mb-20">
<layered-navigation></layered-navigation>

View File

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