Skip to content

Commit

Permalink
Make 3d-space product card responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetinajero
cetinajero committed Apr 18, 2018
1 parent 9521b09 commit 5f70ca2
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 42 deletions.
12 changes: 6 additions & 6 deletions _includes/body/product-cards/3d-space.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<div id="make-3D-space-{{ include.id }}" class="make-3D-space">
<div id="product-card-{{ include.id }}" class="product-card" data-id="{{ include.id }}">
<div id="product-front-{{ include.id }}" class="product-front">
<div class="shadow"></div>
<img src="{{ include.img }}" alt="{{ include.model }}" />
<div class="shadow"></div>
<img src="{{ include.img }}" alt="{{ include.model }}" class="img-center"/>
<a {{ include.href }}><div class="image_overlay"></div></a>
<div id="view_details-{{ include.id }}" class="view_details hide" data-id="{{ include.id }}">View details</div>
<div class="stats">
<a {{ include.href }}>
<div class="stats-container">
<span class="product_price">{{ include.price }} {{ include.currency }}</span>
<span class="product_name">{{ include.commercial }}</span>
<p>{{ include.desc }}</p>
<p class="product_description">{{ include.desc }}</p>
<div class="product-options">
<strong>MODEL</strong>
<span>{{ include.model }}</span>
Expand All @@ -25,9 +25,9 @@
<div class="shadow"></div>
<div id="carousel-{{ include.id }}" class="carousel">
<ul>
<li><img src="{{ include.img | replace: '.png', '_02.png' }}" alt="{{ include.model }}" /></li>
<li><img src="{{ include.img | replace: '.png', '_03.png' }}" alt="{{ include.model }}" /></li>
<li><img src="{{ include.img | replace: '.png', '_04.png' }}" alt="{{ include.model }}" /></li>
<li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_02.png' }}" alt="{{ include.model }}" /></li>
<li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_03.png' }}" alt="{{ include.model }}" /></li>
<li class="marketing-theme content-centered"><img src="{{ include.img | replace: '.png', '_04.png' }}" alt="{{ include.model }}" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev" data-id="{{ include.id }}">
Expand Down
54 changes: 34 additions & 20 deletions _sass/product-cards/_3d-space.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,26 @@ body {
font-family: "Open Sans", sans-serif;
}

/* Variable definitions */
$master-width: 340px;
$master-product-card-width: 325px;
$master-product-front-width: 335px;
$space-overlay-color: #048ce2;

/* --- Product Card ---- */
.make-3D-space{
perspective: 800px;
width:340px;
width: 100%;
height:500px;
transform-style: preserve-3d;
transition: transform 5s;
}
.product-front, .product-back{
width:335px;
width: calc(100% - (#{$master-product-card-width} - 335px - 1px * 2));
height:500px;
background:#fff;
position:absolute;
left:-5px;
left:0px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
Expand All @@ -27,6 +33,7 @@ body {
}
.product-back{
display:none;
left: -7px;
transform: rotateY( 180deg );
}
.product-card.animate .product-back, .product-card.animate .product-front{
Expand All @@ -37,8 +44,11 @@ body {
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
.product-card.animate .product-back{
left: -12px;
}
.product-card{
width:325px;
width: calc(100% - (#{$master-width} - 325px));
height:490px;
position:absolute;
top:10px;
Expand Down Expand Up @@ -85,7 +95,7 @@ div.product-card.flip180{
.product-card.animate{
top:5px;
left:5px;
width:335px;
width: calc(100% - (#{$master-width} - 335px));
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
Expand All @@ -99,14 +109,26 @@ div.product-card.flip180{
position:absolute;
top:386px;
left:0;
width:265px;
width: calc(100% - (#{$master-product-front-width} - 265px));
height:300px;
padding:27px 35px 35px;
box-sizing: content-box;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;

.product_description{
font-size:16px;
color:#b1b1b3;
margin:2px 0 12px 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

}
.product-card.animate .stats-container{
top:272px;
Expand All @@ -119,14 +141,9 @@ div.product-card.flip180{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 12px 0;
}
.stats-container .product_price{
float:right;
color:#048ce2;
color: $space-overlay-color;
font-size:22px;
font-weight:600;
}
Expand All @@ -136,7 +153,7 @@ div.product-card.flip180{
left:0;
width:100%;
height:100%;
background:#048ce2;
background: $space-overlay-color;
opacity:0;
}
.product-card.animate .image_overlay{
Expand Down Expand Up @@ -181,7 +198,7 @@ div.product-card.flip180{
}
.view_details:hover{
background:#fff;
color:#48cfad;
color: $space-overlay-color;
cursor:pointer;

}
Expand Down Expand Up @@ -332,7 +349,7 @@ div.shadow{
transition: all 100ms ease-out;
}
.carousel{
width:335px;
width: 100%;
height:500px;
overflow:hidden;
position:relative;
Expand All @@ -345,19 +362,16 @@ div.shadow{
padding:0;
}
.carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
transition: transform 5s;
}
.carouselPrev, .carouselNext{
width: 50px;
Expand Down Expand Up @@ -412,7 +426,7 @@ div.shadow{
.carousel .x, .carousel .y{
height:2px;
width:15px;
background:#48cfad;
background: $space-overlay-color;
position:absolute;
top:31px;
left:17px;
Expand Down
36 changes: 20 additions & 16 deletions assets/js/product-cards/3d-space.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,30 +65,34 @@ jQuery(document).ready(function(){


/* ---- Image Gallery Carousel ---- */
var carouselSlideWidth = 335;
var isAnimating = false;
function responsiveCarousel(){
var carouselSlideWidth = jQuery('.product-back').width();
jQuery('.product-back .carousel li').css('width', carouselSlideWidth);
jQuery('.arrows-perspective').css('perspective', carouselSlideWidth).css('width', carouselSlideWidth);

function initializeCarousel(id){
var carouselWidth = 0;
// building the width of the casousel
jQuery('#carousel-'+id+' li').each(function(){
carouselWidth += carouselSlideWidth;
jQuery('.product-back .carousel ul').each(function(){
var carouselWidth = 0;
// building the width of the casousel
jQuery(this).children().each(function(){
carouselWidth += carouselSlideWidth;
});
jQuery(this).css('width', carouselWidth).css('left', '0px');
});
var carousel = jQuery('#carousel-'+id+' ul');
jQuery(carousel).css('width', carouselWidth);

return carouselWidth;
}

jQuery(window).on('resize', responsiveCarousel);

responsiveCarousel();

var isAnimating = false;

// Load Next Image
jQuery('div.carouselNext').on('click', function(){
var id = jQuery(this).data('id');
var carousel = jQuery('#carousel-'+id+' ul');
carouselWidth = initializeCarousel(id);
console.log(carouselWidth);
var currentLeft = Math.abs(parseInt(jQuery(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
var newLeft = currentLeft + carousel.children(":first").width();
if(newLeft == carousel.width() || isAnimating === true){return;}
jQuery('#carousel-'+id+' ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
Expand All @@ -101,7 +105,7 @@ jQuery(document).ready(function(){
var id = jQuery(this).data('id');
var carousel = jQuery('#carousel-'+id+' ul');
var currentLeft = Math.abs(parseInt(jQuery(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
var newLeft = currentLeft - carousel.children(":first").width();
if(newLeft < 0 || isAnimating === true){return;}
jQuery('#carousel-'+id+' ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
Expand Down

0 comments on commit 5f70ca2

Please sign in to comment.