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

product-detail page responsive

This commit is contained in:
rahul shukla 2018-09-19 15:22:10 +05:30
parent 9743a6b1e1
commit 1e2681adb3
6 changed files with 542 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -889,6 +889,14 @@ section.slider-block {
float: left;
color: $font-color;
line-height: 45px;
span:first-child {
display: inline;
}
span:last-child {
display: none;
}
}
.pager {
@ -920,6 +928,10 @@ section.slider-block {
margin-right: 10px;
}
}
.sort-filter {
display: none;
}
}
.sorter {
@ -1617,15 +1629,12 @@ section.product-detail {
margin-right: 40px;
}
.wishlist {
position: absolute;
top: 10px;
right: 12px;
}
.share {
position: absolute;
top: 10px;
@ -1717,6 +1726,10 @@ section.product-detail {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
.cart-fav-seg {
display: none;
}
}
.full-description {
@ -1814,69 +1827,249 @@ section.product-detail {
}
}
// .rating-reviews {
// products responsive css start here
// .rating-header {
// font-weight: 600;
// padding: 20px 0;
// }
@media all and (max-width: 480px) {
// .stars {
// .icon {
// width: 16px;
// height: 16px;
// }
// }
section.product-detail {
// .overall {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: space-between;
div.category-breadcrumbs {
display: none;
}
// .review-info {
// .number {
// font-size: 34px;
// }
div.layouter {
// .total-reviews {
// margin-top: 10px;
// }
// }
// }
form {
display: block;
// .reviews {
// margin-top: 40px;
// margin-bottom: 40px;
div.product-image-group {
margin-right: 0px;
// .review {
// margin-bottom: 25px;
div {
flex-direction: column-reverse;
// .title {
// margin-bottom: 5px;
// }
.thumb-list {
height: 140px;
margin-top: 5px;
width:100%;
flex-direction: row;
overflow-x: scroll;
// .stars {
// margin-bottom: 15px;
// display: inline-block;
// }
.thumb-frame {
// .message {
// margin-bottom: 10px;
// }
img {
height: 100%;
width: auto;
}
}
// .reviewer-details {
// color: #5E5E5E;
// }
// }
.gallery-control {
display: none;
}
}
// .view-all {
// margin-top:15px;
// color: $logo-color;
// margin-bottom:15px;
// }
// }
// }
.product-hero-image {
width: 100%;
img {
width: 100%;
}
.whishlist-icon {
display: none;
}
.share-icon {
display: none;
}
}
}
.cart-fav-seg {
display: none;
}
}
.details {
width: 100%;
border-bottom: 1px solid #e8e8e8e8;
.attributes {
border-bottom: none;
.cart-fav-seg {
display: inline;
.addtocart {
width: 49%;
background: #000000;
}
.buynow {
width: 49%;
}
}
}
}
}
}
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
section.product-detail {
div.category-breadcrumbs {
display: none;
}
div.layouter {
form {
display: block;
div.product-image-group {
margin-right: 0px;
div {
flex-direction: column-reverse;
.thumb-list {
height: 140px;
margin-top: 5px;
width:100%;
flex-direction: row;
overflow-x: scroll;
.thumb-frame {
img {
height: 100%;
width: auto;
}
}
.gallery-control {
display: none;
}
}
.product-hero-image {
width: 100%;
img {
width: 100%;
height: 400px;
max-height: 400px;
}
.whishlist-icon {
display: none;
}
.share-icon {
display: none;
}
}
}
.cart-fav-seg {
display: none;
}
}
.details {
width: 100%;
border-bottom: 1px solid #e8e8e8e8;
.attributes {
border-bottom: none;
.cart-fav-seg {
display: inline;
.addtocart {
width: 49%;
background: #000000;
}
.buynow {
width: 49%;
}
}
}
}
}
}
}
}
// products responsive css end here
.rating-reviews {
.rating-header {
font-weight: 600;
padding: 20px 0;
}
.stars {
.icon {
width: 16px;
height: 16px;
}
}
.overall {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.review-info {
.number {
font-size: 34px;
}
.total-reviews {
margin-top: 10px;
}
}
}
.reviews {
margin-top: 40px;
margin-bottom: 40px;
.review {
margin-bottom: 25px;
.title {
margin-bottom: 5px;
}
.stars {
margin-bottom: 15px;
display: inline-block;
}
.message {
margin-bottom: 10px;
}
.reviewer-details {
color: #5E5E5E;
}
}
.view-all {
margin-top:15px;
color: $logo-color;
margin-bottom:15px;
}
}
}
/* cart pages and elements css begins here */
section.cart {
@ -2134,6 +2327,45 @@ section.cart {
}
}
@media all and (max-width: 480px){
.attached-products-wrapper {
.title {
.border-bottom {
border-bottom: 1px solid rgba(162, 162, 162, 0.2);
display: inline-block;
width: 100%;
position: initial;
top: 40px;
left: 0%;
margin-left: 0px;
}
}
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.attached-products-wrapper {
.title {
.border-bottom {
border-bottom: 1px solid rgba(162, 162, 162, 0.2);
display: inline-block;
width: 100%;
position: initial;
top: 40px;
left: 0%;
margin-left: 0px;
}
}
}
}
// order page css start here
.order {

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

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

7
packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php
View File

@ -1,3 +1,4 @@
<a href="#">
<div class="icon share-icon"> </div>
</a>
<div class="icon share-icon">
<a href="#"></a>
</div>

2
packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
View File

@ -25,6 +25,8 @@
</span>
</div>
@include ('shop::products.product-add')
</div>
</script>

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

@ -5,7 +5,7 @@
<div class="product-image-group">
<product-gallery></product-gallery>
@include ('shop::products.add-to')
@include ('shop::products.product-add')
</div>
@push('scripts')

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

@ -959,6 +959,14 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
line-height: 45px;
}
.main-container-wrapper .top-toolbar .page-info span:first-child {
display: inline;
}
.main-container-wrapper .top-toolbar .page-info span:last-child {
display: none;
}
.main-container-wrapper .top-toolbar .pager {
float: right;
}
@ -991,6 +999,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
margin-right: 10px;
}
.main-container-wrapper .top-toolbar .pager .view-mode .sort-filter {
display: none;
}
.main-container-wrapper .top-toolbar .pager .sorter {
display: inline-block;
margin-right: 10px;
@ -1745,10 +1757,216 @@ section.product-detail div.layouter form .details .attributes {
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg {
display: none;
}
section.product-detail div.layouter form .details .full-description {
font-size: 16px;
}
@media all and (max-width: 480px) {
section.product-detail div.category-breadcrumbs {
display: none;
}
section.product-detail div.layouter form {
display: block;
}
section.product-detail div.layouter form div.product-image-group {
margin-right: 0px;
}
section.product-detail div.layouter form div.product-image-group div {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list {
height: 140px;
margin-top: 5px;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
height: 100%;
width: auto;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
display: none;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image {
width: 100%;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
width: 100%;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
display: none;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
display: none;
}
section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
display: none;
}
section.product-detail div.layouter form .details {
width: 100%;
border-bottom: 1px solid #e8e8e8e8;
}
section.product-detail div.layouter form .details .attributes {
border-bottom: none;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg {
display: inline;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .addtocart {
width: 49%;
background: #000000;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
width: 49%;
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
section.product-detail div.category-breadcrumbs {
display: none;
}
section.product-detail div.layouter form {
display: block;
}
section.product-detail div.layouter form div.product-image-group {
margin-right: 0px;
}
section.product-detail div.layouter form div.product-image-group div {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list {
height: 140px;
margin-top: 5px;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
height: 100%;
width: auto;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
display: none;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image {
width: 100%;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
width: 100%;
height: 400px;
max-height: 400px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
display: none;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
display: none;
}
section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
display: none;
}
section.product-detail div.layouter form .details {
width: 100%;
border-bottom: 1px solid #e8e8e8e8;
}
section.product-detail div.layouter form .details .attributes {
border-bottom: none;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg {
display: inline;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .addtocart {
width: 49%;
background: #000000;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
width: 49%;
}
}
.rating-reviews .rating-header {
font-weight: 600;
padding: 20px 0;
}
.rating-reviews .stars .icon {
width: 16px;
height: 16px;
}
.rating-reviews .overall {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.rating-reviews .overall .review-info .number {
font-size: 34px;
}
.rating-reviews .overall .review-info .total-reviews {
margin-top: 10px;
}
.rating-reviews .reviews {
margin-top: 40px;
margin-bottom: 40px;
}
.rating-reviews .reviews .review {
margin-bottom: 25px;
}
.rating-reviews .reviews .review .title {
margin-bottom: 5px;
}
.rating-reviews .reviews .review .stars {
margin-bottom: 15px;
display: inline-block;
}
.rating-reviews .reviews .review .message {
margin-bottom: 10px;
}
.rating-reviews .reviews .review .reviewer-details {
color: #5E5E5E;
}
.rating-reviews .reviews .view-all {
margin-top: 15px;
color: #0031f0;
margin-bottom: 15px;
}
/* cart pages and elements css begins here */
section.cart {
color: #242424;
@ -2013,6 +2231,30 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
margin-right: auto;
}
@media all and (max-width: 480px) {
.attached-products-wrapper .title .border-bottom {
border-bottom: 1px solid rgba(162, 162, 162, 0.2);
display: inline-block;
width: 100%;
position: initial;
top: 40px;
left: 0%;
margin-left: 0px;
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.attached-products-wrapper .title .border-bottom {
border-bottom: 1px solid rgba(162, 162, 162, 0.2);
display: inline-block;
width: 100%;
position: initial;
top: 40px;
left: 0%;
margin-left: 0px;
}
}
.order {
margin-left: 5.5%;
margin-top: 1%;