diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss index 1856dce46..ce2f39856 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss @@ -1,3 +1,4 @@ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500"); //shop variables $font-color: #242424; $border-color: #E8E8E8; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 164fbb766..233ddc518 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -1,9 +1,8 @@ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500"); @import "variables"; @import "icons"; @import "mixins"; -@import "override"; @import "components"; +@import "override"; //main store front layouting .main-container-wrapper { @@ -181,6 +180,33 @@ section.slider-block { } } +//responsive css for slider +@media only screen and (max-width: 770px) { + + section.slider-block { + + div.slider-content { + + div.slider-control { + display: flex; + justify-content:space-between; + bottom: 48%; + right: 0%; + width:100%; + + .dark-left-icon { + margin-left: 15px; + } + + .light-right-icon { + margin-right: 15px; + } + } + } + } + +} + //header navigation .header { margin-top: 16px; @@ -460,6 +486,54 @@ section.slider-block { } } +//header page responsive css start here +@media only screen and (max-width: 770px) { + + .header { + + .header-top { + + div.left-content { + + ul.search-container { + li.search-group { + display: none; + } + } + } + + div.right-content { + display: none; + } + + .right-responsive { + display: inherit; + } + } + + + .header-bottom { + border-bottom: none; + display: none; + + .nav > li { + float: none; + height: 48px; + border-bottom: 1px solid $border-color; + } + + .nav > li:last-child { + float:none; + } + + .nav > li:last-child img { + margin-left: 10px; + } + } + } + +} + //footer responsive with out media query. .footer { background-color: #f2f2f2; @@ -540,13 +614,13 @@ section.slider-block { //category page .main { - .category-block { + .category-container { display: flex; flex-direction: row; width: 100%; .category-block { - width: 100%; + width: 80%; display: block; .hero-image { @@ -1458,6 +1532,44 @@ section.cart { } // checkout ends here +// checkout responsive start here +@media only screen and (max-width: 770px) { + + .checkout-process { + .col-main { + width: 100%; + padding-right: 0px; + + ul.checkout-steps{ + border-bottom: none; + + span { + display: none; + } + + .line{ + flex-grow: 1; + border-bottom: 1px solid $border-color; + margin-left: 5px; + margin-right: 5px; + } + } + } + + .step-content { + .control-group .control { + width:100%; + } + } + + .col-right { + display: none; + } + } + +} +// checkout responsive end here + .attached-products-wrapper { margin-bottom: 80px; diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss index 9fbf6fcb5..4eba0e348 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss @@ -7,19 +7,10 @@ grid-auto-rows: auto; } -.product-grid-3 { - display: grid; - grid-template-columns: repeat(3, minmax(240px, 1fr)); - grid-column-gap: 27px; - grid-row-gap: 15px; - grid-auto-rows: auto; -} - @media only screen and (max-width: 854px) { .product-grid-4 { grid-template-columns: 30% 30% 30%; grid-column-gap: 35px; - } } @@ -29,11 +20,25 @@ grid-column-gap: 17px; } - .addtocart { - font-size: 0.71rem; + .product-card { + + .cart-fav-seg { + font-size: 0.71rem; + justify-content: space-between; + } } + } +.product-grid-3 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; +} + + .product-card { .product-image { @@ -80,8 +85,6 @@ .cart-fav-seg { display: inline-flex; width: 100%; - align-items: center; - justify-content: space-between; .addtocart { border-radius: 0px; @@ -199,4 +202,4 @@ } } } -} +} \ 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 3d17f7c8b..1c1477307 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/override.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/override.scss @@ -121,4 +121,76 @@ body { .mt-90 { margin-top: 90px; -} \ No newline at end of file +} + +@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 { + display: inline-block; + margin-top: 10px; + } + } + + .sorter , .limiter{ + display: none; + } + } + } + } + + + } + +} + +// @media only screen and (max-width: 660px) { +// .product-grid-3 { +// grid-template-columns: 48.5% 48.5%; +// grid-column-gap: 20px; +// } +// } + +// @media only screen and (max-width: 480px) { +// .product-grid-3 { +// grid-template-columns: 47.5% 47.5%; +// } +// } \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php index 11de9111c..e8bc4497e 100644 --- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php @@ -22,17 +22,23 @@
{{ __('shop::app.checkout.onepage.information') }} - + +
+
  • {{ __('shop::app.checkout.onepage.shipping') }}
  • - + +
    +
  • {{ __('shop::app.checkout.onepage.payment') }}
  • - + +
    +
  • {{ __('shop::app.checkout.onepage.complete') }} diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php index 3be3c2436..9d8886b82 100644 --- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php @@ -133,9 +133,7 @@ - - -@push('scripts') +{{-- @push('scripts') -@endpush +@endpush --}} diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php index f9d2dac3d..143fc99f6 100644 --- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php @@ -35,31 +35,6 @@ - {{--
    - -
    - - - -
    - -
    - Designer sarees -
    -
    - India patter sarees -
    -
    - Border Sarees -
    - -
    - - --}} - - @include('shop::layouts.footer') 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 32172451f..5fad9a103 100644 --- a/packages/Webkul/Shop/src/Resources/views/products/index.blade.php +++ b/packages/Webkul/Shop/src/Resources/views/products/index.blade.php @@ -6,7 +6,7 @@
    -
    +
    @include ('shop::products.list.layered-navigation')
    @@ -53,86 +53,3 @@
    @stop - - -@push('scripts') - - - -@endpush \ No newline at end of file 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 6294283e9..f885024ba 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 @@ -34,11 +34,8 @@ @endif
    - - -
    diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css index ae4939771..fdaa7e86d 100644 --- a/public/themes/default/assets/css/shop.css +++ b/public/themes/default/assets/css/shop.css @@ -73,6 +73,200 @@ height: 32px; } +.product-grid-4 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-column-gap: 45px; + grid-row-gap: 15px; + grid-auto-rows: auto; +} + +@media only screen and (max-width: 854px) { + .product-grid-4 { + grid-template-columns: 30% 30% 30%; + grid-column-gap: 35px; + } +} + +@media only screen and (max-width: 550px) { + .product-grid-4 { + grid-template-columns: 48.5% 48.5%; + grid-column-gap: 17px; + } + .product-card .cart-fav-seg { + font-size: 0.71rem; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +.product-grid-3 { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-column-gap: 27px; + grid-row-gap: 15px; + grid-auto-rows: auto; +} + +.product-card .product-image { + max-height: 350px; + max-width: 280px; + margin-bottom: 10px; + background: #F2F2F2; +} + +.product-card .product-image img { + display: block; + width: 100%; +} + +.product-card .product-name { + margin-bottom: 14px; + width: 100%; + color: #242424; +} + +.product-card .product-name a { + color: #242424; +} + +.product-card .product-description { + margin-bottom: 14px; + display: none; +} + +.product-card .product-ratings { + width: 100%; + margin-bottom: 14px; +} + +.product-card .product-ratings .icon { + width: 16px; + height: 16px; +} + +.product-card .product-ratings .total-reviews { + display: none; +} + +.product-card .cart-fav-seg { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + width: 100%; +} + +.product-card .cart-fav-seg .addtocart { + border-radius: 0px; + margin-right: 10px; + text-transform: uppercase; + white-space: nowrap; +} + +.product-price { + margin-bottom: 14px; + width: 100%; + font-weight: 600; +} + +.product-price .price-label { + font-size: 14px; + font-weight: 400; +} + +.product-price .regular-price { + color: #A5A5A5; + text-decoration: line-through; + margin-right: 10px; +} + +.product-price .special-price { + color: #FF6472; +} + +.layered-filter-wrapper { + width: 25%; + float: left; + padding-right: 20px; + min-height: 1px; +} + +.layered-filter-wrapper .filter-title { + border-bottom: 1px solid #E8E8E8; + color: #242424; + padding: 10px 0; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item { + border-bottom: 1px solid #E8E8E8; + padding-bottom: 10px; +} + +.layered-filter-wrapper .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 { + font-weight: 400; + color: #0041FF; + margin-right: 10px; +} + +.layered-filter-wrapper .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 { + padding: 10px; + display: none; +} + +.layered-filter-wrapper .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 { + padding: 8px 0; + color: #5E5E5E; +} + +.layered-filter-wrapper .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 { + 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 { + background-image: url("../images/checkbox-checked.svg"); +} + +.layered-filter-wrapper .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 { + display: block; +} + +.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { + background-image: url("../images//arrow-up.svg") !important; +} + body { margin: 0; padding: 0; @@ -195,201 +389,42 @@ body { margin-top: 90px; } -.product-grid-4 { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - grid-column-gap: 45px; - grid-row-gap: 15px; - grid-auto-rows: auto; -} - -.product-grid-3 { - display: grid; - grid-template-columns: repeat(3, minmax(240px, 1fr)); - grid-column-gap: 27px; - grid-row-gap: 15px; - grid-auto-rows: auto; -} - -@media only screen and (max-width: 854px) { - .product-grid-4 { - grid-template-columns: 30% 30% 30%; - grid-column-gap: 35px; - } -} - -@media only screen and (max-width: 550px) { - .product-grid-4 { +@media only screen and (max-width: 551px) { + .product-grid-3 { grid-template-columns: 48.5% 48.5%; - grid-column-gap: 17px; - } - .addtocart { - font-size: 0.71rem; + grid-column-gap: 20px; } } -.product-card .product-image { - max-height: 350px; - max-width: 280px; - margin-bottom: 10px; - background: #F2F2F2; -} - -.product-card .product-image img { - display: block; - width: 100%; -} - -.product-card .product-name { - margin-bottom: 14px; - width: 100%; - color: #242424; -} - -.product-card .product-name a { - color: #242424; -} - -.product-card .product-description { - margin-bottom: 14px; - display: none; -} - -.product-card .product-ratings { - width: 100%; - margin-bottom: 14px; -} - -.product-card .product-ratings .icon { - width: 16px; - height: 16px; -} - -.product-card .product-ratings .total-reviews { - display: none; -} - -.product-card .cart-fav-seg { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - width: 100%; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.product-card .cart-fav-seg .addtocart { - border-radius: 0px; - margin-right: 10px; - text-transform: uppercase; - white-space: nowrap; -} - -.product-price { - margin-bottom: 14px; - width: 100%; - font-weight: 600; -} - -.product-price .price-label { - font-size: 14px; - font-weight: 400; -} - -.product-price .regular-price { - color: #A5A5A5; - text-decoration: line-through; - margin-right: 10px; -} - -.product-price .special-price { - color: #FF6472; -} - -.layered-filter-wrapper { - width: 25%; - float: left; - padding-right: 20px; - min-height: 1px; -} - -.layered-filter-wrapper .filter-title { - border-bottom: 1px solid #E8E8E8; - color: #242424; - padding: 10px 0; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item { - border-bottom: 1px solid #E8E8E8; - padding-bottom: 10px; -} - -.layered-filter-wrapper .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 { - font-weight: 400; - color: #0041FF; - margin-right: 10px; -} - -.layered-filter-wrapper .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 { - padding: 10px; - display: none; -} - -.layered-filter-wrapper .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 { - padding: 8px 0; - color: #5E5E5E; -} - -.layered-filter-wrapper .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 { - 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 { - background-image: url("../images/checkbox-checked.svg"); -} - -.layered-filter-wrapper .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 { - display: block; -} - -.layered-filter-wrapper .filter-attributes .filter-attributes-item.active .filter-attributes-title .icon { - background-image: url("../images//arrow-up.svg") !important; +@media only screen and (max-width: 840px) { + .layered-filter-wrapper { + display: none; + } + .main .category-block { + width: 100% !important; + } + .main .category-block .top-toolbar { + border-bottom: 1px solid #E8E8E8; + } + .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 { + display: inline-block; + margin-top: 10px; + } + .main .category-block .top-toolbar .pager .sorter, .main .category-block .top-toolbar .pager .limiter { + display: none; + } } .main-container-wrapper { @@ -584,6 +619,26 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { max-width: 100%; } +@media only screen and (max-width: 770px) { + section.slider-block div.slider-content div.slider-control { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + bottom: 48%; + right: 0%; + width: 100%; + } + section.slider-block div.slider-content div.slider-control .dark-left-icon { + margin-left: 15px; + } + section.slider-block div.slider-content div.slider-control .light-right-icon { + margin-right: 15px; + } +} + .header { margin-top: 16px; margin-bottom: 21px; @@ -920,6 +975,33 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { right: 10px; } +@media only screen and (max-width: 770px) { + .header .header-top div.left-content ul.search-container li.search-group { + display: none; + } + .header .header-top div.right-content { + display: none; + } + .header .header-top .right-responsive { + display: inherit; + } + .header .header-bottom { + border-bottom: none; + display: none; + } + .header .header-bottom .nav > li { + float: none; + height: 48px; + border-bottom: 1px solid #E8E8E8; + } + .header .header-bottom .nav > li:last-child { + float: none; + } + .header .header-bottom .nav > li:last-child img { + margin-left: 10px; + } +} + .footer { background-color: #f2f2f2; padding-left: 10%; @@ -993,7 +1075,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { text-align: center; } -.main .category-block { +.main .category-container { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -1004,19 +1086,19 @@ section.slider-block div.slider-content div.slider-control .light-right-icon { width: 100%; } -.main .category-block .category-block { - width: 100%; +.main .category-container .category-block { + width: 80%; display: block; } -.main .category-block .category-block .hero-image { +.main .category-container .category-block .hero-image { border: 1px solid green; display: block; visibility: visible; width: auto; } -.main .category-block .category-block .hero-image img { +.main .category-container .category-block .hero-image img { height: 400px; width: 100%; } @@ -1964,6 +2046,33 @@ section.cart .cart-content .right-side { padding-left: 40px; } +@media only screen and (max-width: 770px) { + .checkout-process .col-main { + width: 100%; + padding-right: 0px; + } + .checkout-process .col-main ul.checkout-steps { + border-bottom: none; + } + .checkout-process .col-main ul.checkout-steps span { + display: none; + } + .checkout-process .col-main ul.checkout-steps .line { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + border-bottom: 1px solid #E8E8E8; + margin-left: 5px; + margin-right: 5px; + } + .checkout-process .step-content .control-group .control { + width: 100%; + } + .checkout-process .col-right { + display: none; + } +} + .attached-products-wrapper { margin-bottom: 80px; }