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

product responsive & loader

This commit is contained in:
rahul shukla 2018-10-10 11:08:19 +05:30
parent e887b27e7d
commit bb92be967b
6 changed files with 289 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -630,7 +630,7 @@ section.slider-block {
display:inline-block;
color: $font-color;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
padding: 12px 4.8px 12px 8px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
@ -1057,6 +1057,26 @@ section.product-detail {
div.product-image-group {
margin-right: 30px;
width: 604px;
height: 650px;
max-width: 604px;
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin-left: 20%;
position: absolute;
margin-top: 200px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
div {
display: flex;
@ -1066,17 +1086,17 @@ section.product-detail {
display: flex;
flex-direction: column;
margin-right: 4px;
height: 480px;
min-width: 120px;
overflow: hidden;
position: relative;
justify-content: flex-start;
max-height: 480px;
.thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
width: 120px;
height: 120px;
max-height: 120px;
&.active {
border-color: #979797;
@ -1125,10 +1145,11 @@ section.product-detail {
background: #F2F2F2;
width: 100%;
max-height: 480px;
height: 100%;
img {
width: 100%;
height: 480px;
height: auto;
max-height: 480px;
}
@ -1158,27 +1179,31 @@ section.product-detail {
}
}
.add-to-buttons {
display: flex;
display: none;
flex-direction: row;
margin-top: 10px;
justify-content: space-between;
.addtocart {
border-radius: 0px;
width: 49%;
background: black;
white-space: nowrap;
}
.buynow {
border-radius: 0px;
width: 49%;
float:right;
white-space: nowrap;
}
}
}
.details {
width: 47.5%;
width: 50%;
.product-price {
margin-bottom: 14px;
@ -1254,6 +1279,93 @@ section.product-detail {
}
// product pages css ends here
// product pages responsive css start here
// @media only screen and (max-width: 650px){
// section.product-detail div.layouter form {
// flex-direction: column;
// div.product-image-group {
// margin-right: 0px;
// }
// .details {
// width: 100%;
// margin-top: 20px;
// }
// }
// }
@media only screen and (max-width: 720px){
section.product-detail div.layouter form {
flex-direction: column;
div.product-image-group {
margin-right: 0px;
max-width: none;
width: auto;
.loader {
margin-left: 47%;
}
div {
flex-direction: column-reverse;
.thumb-list {
height: 120px;
margin-top: 5px;
flex-direction: row;
overflow-x: scroll;
margin-right: 0px;
.thumb-frame {
img {
height: 100%;
width: auto;
}
}
.gallery-control {
display: none;
}
}
.product-hero-image{
display: flex;
img {
margin-left: auto;
margin-right: auto;
width: 480px;
}
}
}
}
.details {
width: 100%;
margin-top: 20px;
}
}
}
@media only screen and (max-width: 510px){
section.product-detail div.layouter form {
div.product-image-group {
.product-hero-image img {
width: 100% !important;
}
}
}
}
//product pages responsive css end here
//rating and reviews of product pages
.rating-reviews {
@ -1670,7 +1782,6 @@ section.cart {
// checkout responsive start here
@media only screen and (max-width: 770px) {
.checkout-process {
.col-main {
width: 100%;
@ -1702,7 +1813,6 @@ section.cart {
display: none;
}
}
}
// checkout responsive end here
@ -1951,3 +2061,5 @@ section.review {
}
}
// customer section css end here

52
packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
View File

@ -307,10 +307,27 @@
</div>
@push('scripts')
<script>
document.onreadystatechange = function () {
var state = document.readyState
var galleryTemplate = document.getElementById('product-gallery-template');
var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
if(galleryTemplate){
if (state == 'interactive') {
galleryTemplate.style.display="none";
} else {
document.getElementById('loader').style.display="none";
addTOButton.style.display="flex";
}
}
}
window.onload = function() {
var hamMenu = document.getElementById("hammenu");
@ -323,6 +340,18 @@
var layerFilter = document.getElementsByClassName('responsive-layred-filter')[0];
var navResponsive = document.getElementsByClassName('responsive-nav')[0];
var thumbList = document.getElementsByClassName('thumb-list')[0];
var thumbFrame = document.getElementsByClassName('thumb-frame');
var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
// for product page resize image
if(thumbList && productHeroImage){
thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
for(let i=0 ; i < thumbFrame.length ; i++){
thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
}
}
search.addEventListener("click", header);
hamMenu.addEventListener("click", header);
@ -336,13 +365,29 @@
if(window.innerWidth > 720){
searchResponsive.style.display = 'none';
navResponsive.style.display = 'none';
layerFilter.style.display ="none";
sortLimit.style.display ="none";
if(layerFilter && sortLimit){
layerFilter.style.display ="none";
sortLimit.style.display ="none";
}
}
if(window.innerWidth < 1313 && window.innerWidth > 720){
if(thumbList){
thumbList.style.maxHeight = productHeroImage.offsetHeight + "px";
for(let i=0 ; i < thumbFrame.length ; i++){
thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
}
}
}else {
for(let i=0 ; i < thumbFrame.length ; i++){
thumbFrame[i].style.height = 120 + "px";
}
}
});
function header(){
// for header responsive icon
function header(){
var className = document.getElementById(this.id).className;
if(className === 'icon search-icon' ){
@ -369,6 +414,7 @@
}
}
// for category page responsive filter & sort
function sortFilter(){
var className = document.getElementById(this.id).className;

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

@ -80,3 +80,4 @@
@endsection

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

@ -3,9 +3,17 @@
<div class="product-image-group">
<div class="loader" id="loader">
</div>
<product-gallery></product-gallery>
@include ('shop::products.product-add')
</div>
@push('scripts')
<script type="text/x-template" id="product-gallery-template">
@ -37,7 +45,6 @@
@include('shop::products.wishlist')
</div>
</div>
</script>

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

@ -7,7 +7,7 @@
</div>
<div class="product-grid max-4-col">
@foreach ($product->up_sells()->paginate(4) as $up_sell_product)
@include ('shop::products.list.card', ['product' => $up_sell_product])

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

@ -1232,7 +1232,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
display: inline-block;
color: #242424;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
padding: 12px 4.8px 12px 8px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
@ -1680,6 +1680,44 @@ section.product-detail div.layouter form {
section.product-detail div.layouter form div.product-image-group {
margin-right: 30px;
width: 604px;
height: 650px;
max-width: 604px;
}
section.product-detail div.layouter form div.product-image-group .loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin-left: 20%;
position: absolute;
margin-top: 200px;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
section.product-detail div.layouter form div.product-image-group div {
@ -1701,20 +1739,20 @@ section.product-detail div.layouter form div.product-image-group div .thumb-list
-ms-flex-direction: column;
flex-direction: column;
margin-right: 4px;
height: 480px;
min-width: 120px;
overflow: hidden;
position: relative;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
max-height: 480px;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
width: 120px;
height: 120px;
max-height: 120px;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame.active {
@ -1762,11 +1800,12 @@ section.product-detail div.layouter form div.product-image-group div .product-he
background: #F2F2F2;
width: 100%;
max-height: 480px;
height: 100%;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
width: 100%;
height: 480px;
height: auto;
max-height: 480px;
}
@ -1795,30 +1834,33 @@ section.product-detail div.layouter form div.product-image-group div .product-he
}
section.product-detail div.layouter form div.product-image-group .add-to-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-top: 10px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
section.product-detail div.layouter form div.product-image-group .add-to-buttons .addtocart {
border-radius: 0px;
width: 49%;
background: black;
white-space: nowrap;
}
section.product-detail div.layouter form div.product-image-group .add-to-buttons .buynow {
border-radius: 0px;
width: 49%;
float: right;
white-space: nowrap;
}
section.product-detail div.layouter form .details {
width: 47.5%;
width: 50%;
}
section.product-detail div.layouter form .details .product-price {
@ -1888,6 +1930,66 @@ section.product-detail div.layouter form .details .attributes {
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
@media only screen and (max-width: 720px) {
section.product-detail div.layouter form {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
section.product-detail div.layouter form div.product-image-group {
margin-right: 0px;
max-width: none;
width: auto;
}
section.product-detail div.layouter form div.product-image-group .loader {
margin-left: 47%;
}
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: 120px;
margin-top: 5px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
overflow-x: scroll;
margin-right: 0px;
}
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 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
margin-left: auto;
margin-right: auto;
width: 480px;
}
section.product-detail div.layouter form .details {
width: 100%;
margin-top: 20px;
}
}
@media only screen and (max-width: 510px) {
section.product-detail div.layouter form div.product-image-group .product-hero-image img {
width: 100% !important;
}
}
.rating-reviews .rating-header {
font-weight: 600;
padding: 20px 0;