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

responsive css

This commit is contained in:
rahul shukla 2018-10-04 12:15:19 +05:30
parent 028b0f59f7 a5123fb3b6
commit 9cd738b95c
11 changed files with 704 additions and 596 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/Webkul/Product/src/Product/Review.php
View File

@ -67,15 +67,15 @@ class Review extends AbstractProduct
*/
public function getPercentageRating($product)
{
$reviews['five'] = $product->reviews()->where('rating', 5)->where('status',1)->count();
$reviews['five'] = $product->reviews()->where('rating', 5)->where('status','approved')->count();
$reviews['four'] = $product->reviews()->where('rating', 4)->where('status',1)->count();
$reviews['four'] = $product->reviews()->where('rating', 4)->where('status','approved')->count();
$reviews['three'] = $product->reviews()->where('rating', 3)->where('status',1)->count();
$reviews['three'] = $product->reviews()->where('rating', 3)->where('status','approved')->count();
$reviews['two'] = $product->reviews()->where('rating', 2)->where('status',1)->count();
$reviews['two'] = $product->reviews()->where('rating', 2)->where('status','approved')->count();
$reviews['one'] = $product->reviews()->where('rating', 1)->where('status',1)->count();
$reviews['one'] = $product->reviews()->where('rating', 1)->where('status','approved')->count();
foreach($reviews as $key=>$review){
@ -102,6 +102,7 @@ class Review extends AbstractProduct
$link_array = explode('/',$link);
$last=end($link_array);
$itemPerPage = 1*5;
return $product->reviews()->where('status',1)->paginate($itemPerPage);
return $product->reviews()->where('status','approved')->paginate($itemPerPage);
}
}

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

@ -753,6 +753,10 @@ section.slider-block {
display: none;
}
.responsive-layred-filter{
display: none;
}
.bottom-toolbar {
display: block;
margin-top: 40px;

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

@ -2,7 +2,7 @@
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 45px;
grid-column-gap: 40px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
@ -17,25 +17,31 @@
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 30% 30% 30%;
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 550px) {
@media only screen and (max-width: 653px) {
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
}
}
@media only screen and (max-width: 425px) {
.product-card {
font-size: 90%;
.cart-fav-seg {
font-size: 0.71rem;
justify-content: space-between;
.btn.btn-md {
padding: 5px;
}
}
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 10px;
}
}
.product-card {
@ -109,89 +115,3 @@
}
}
//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;
}
}
}
}
}

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

@ -33,14 +33,14 @@
.sort-icon {
background-image:URL('../images/icon-sort.svg');
width: 24px;
height: 24px;
width: 32px;
height: 32px;
}
.filter-icon {
background-image:URL('../images/icon-filter.svg');
width: 24px;
height: 24px;
width: 32px;
height: 32px;
}
.whishlist-icon {

110
packages/Webkul/Shop/src/Resources/assets/sass/override.scss vendored
View File

@ -175,9 +175,19 @@ body {
}
}
}
.reponsive-sorter-limiter {
display: none;
select {
background: #FFFFFF;
border: 1px solid #C7C7C7;
border-radius: 3px;
color: #242424;
padding: 10px;
}
}
}
}
}
@ -194,3 +204,99 @@ body {
// grid-template-columns: 47.5% 47.5%;
// }
// }
//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;
}

10
packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php
View File

@ -4,7 +4,7 @@
<span class="featured-seperator" style="color:lightgrey;">_____</span>
</div>
<div class="new-product-grid product-grid-4">
<div class="product-grid-4">
<div class="product-card">
<div class="product-image">
<img src="vendor/webkul/shop/assets/images/new.png" />
@ -21,7 +21,7 @@
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
@ -42,7 +42,7 @@
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
@ -63,7 +63,7 @@
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
@ -84,7 +84,7 @@
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>

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

@ -53,3 +53,49 @@
</div>
@stop
@push('scripts')
<script>
window.onload = function() {
var sort = document.getElementById("sort");
var filter = document.getElementById("filter");
var sortLimit = document.getElementsByClassName('reponsive-sorter-limiter')[0];
var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
sort.addEventListener("click", sortFilter);
filter.addEventListener("click", sortFilter);
function sortFilter(){
var className = document.getElementById(this.id).className;
if(className === 'icon sort-icon' ){
sort.classList.remove("sort-icon");
sort.classList.add("cross-icon");
filter.classList.remove("cross-icon");
filter.classList.add("filter-icon");
sortLimit.style.display ="flex";
sortLimit.style.justifyContent="space-between";
layerFilter.style.display ="none";
}else if(className === 'icon filter-icon'){
filter.classList.remove("filter-icon");
filter.classList.add("cross-icon");
sort.classList.remove("cross-icon");
sort.classList.add("sort-icon");
layerFilter.style.display ="block";
sortLimit.style.display ="none";
}else{
sort.classList.remove("cross-icon");
sort.classList.add("sort-icon");
filter.classList.remove("cross-icon");
filter.classList.add("filter-icon");
sortLimit.style.display ="none";
layerFilter.style.display ="none";
}
}
}
</script>
@endpush

6
packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php
View File

@ -77,7 +77,7 @@
</div>
<div class="reponsive-sorter-limiter">
<div class="reponsive-sorter-limiter mb-20">
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
@ -113,4 +113,8 @@
</div>
<div class="responsive-layred-filter mb-20">
<layered-navigation></layered-navigation>
</div>

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

@ -10,7 +10,7 @@
<span class="breadcrumb">Home</span> > <span class="breadcrumb">Men</span> > <span class="breadcrumb">Slit Open Jeans</span>
</div>
<div class="layouter">
<div class="product-layouter">
<div class="mixed-group">
@ -41,6 +41,7 @@
10% Off
</span>
</div>
</div>
</div>
@ -113,6 +114,7 @@
</div>
</div>
</div>
</section>
@endsection

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

@ -33,14 +33,14 @@
.sort-icon {
background-image: URL("../images/icon-sort.svg");
width: 24px;
height: 24px;
width: 32px;
height: 32px;
}
.filter-icon {
background-image: URL("../images/icon-filter.svg");
width: 24px;
height: 24px;
width: 32px;
height: 32px;
}
.whishlist-icon {
@ -76,7 +76,7 @@
.product-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-column-gap: 45px;
grid-column-gap: 40px;
grid-row-gap: 15px;
grid-auto-rows: auto;
}
@ -91,21 +91,28 @@
@media only screen and (max-width: 854px) {
.product-grid-4 {
grid-template-columns: 30% 30% 30%;
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
}
@media only screen and (max-width: 550px) {
@media only screen and (max-width: 653px) {
.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;
}
@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;
}
}
@ -178,88 +185,6 @@
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;
@ -390,7 +315,7 @@ body {
}
@media only screen and (max-width: 840px) {
.layered-filter-wrapper {
.layered-filter-wrapper, .responsive-layred-filter {
display: none;
}
.main .category-block {
@ -418,6 +343,104 @@ body {
.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 #E8E8E8;
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 #E8E8E8;
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: #0041FF;
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 {
@ -1240,6 +1263,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
display: none;
}
.main .responsive-layred-filter {
display: none;
}
.main .bottom-toolbar {
display: block;
margin-top: 40px;

776
public/themes/default/assets/js/shop.js vendored
View File

File diff suppressed because it is too large Load Diff