Skip to content

N
NAP-wordpress
Commit ae9c1ab4 authored by imac's avatar imac
Browse files
Options

[Responsive]Page product

parent 470f856a
Show whitespace changes
Inline Side-by-side
Showing with 416 additions and 46 deletions
wp-content/themes/nap/assets/css/main.css
View file @ ae9c1ab4
...@@ -342,6 +342,9 @@ II/ Helper..............Helper classes ...@@ -342,6 +342,9 @@ II/ Helper..............Helper classes
text-align: center; text-align: center;
width: 19px; width: 19px;
} }
.overflow-auto{
overflow-x: hidden;
}
/*---------CROSS------------*/ /*---------CROSS------------*/
.close-btn { .close-btn {
width: 25px; width: 25px;
...@@ -352,7 +355,7 @@ II/ Helper..............Helper classes ...@@ -352,7 +355,7 @@ II/ Helper..............Helper classes
border-radius: 50%; border-radius: 50%;
background: #182566; background: #182566;
cursor: pointer; cursor: pointer;
z-index: 99; z-index: 9999999999;
} }
.close-btn:before, .close-btn:after { .close-btn:before, .close-btn:after {
position: absolute; position: absolute;
...@@ -431,10 +434,26 @@ II/ Helper..............Helper classes ...@@ -431,10 +434,26 @@ II/ Helper..............Helper classes
transform: scale(0.9); transform: scale(0.9);
} }
} }
.down-btn{
height: 25px;
width: 25px;
margin: 0 auto;
border-radius: 50%;
cursor: pointer;
display: block;
position: relative;
margin-bottom: 11px;
}
.down-btn:after{
top: 5px;
}
.pink-btn{ .pink-btn{
background: #FF6A5F; background: #FF6A5F;
color: #fff; color: #fff;
} }
.blue-bg.down-btn:after{
color: #fff;
}
.access-form .white-btn, .access-form .white-btn,
.white-btn{ .white-btn{
background: #FFF; background: #FFF;
...@@ -530,6 +549,10 @@ II/ Helper..............Helper classes ...@@ -530,6 +549,10 @@ II/ Helper..............Helper classes
transform: rotate(135deg); transform: rotate(135deg);
margin-top: 5px; margin-top: 5px;
} }
.rotate.chevron.bottom::after{
transform: rotate(-45deg);
top: 10px;
}
/* ========================================================================== /* ==========================================================================
III/ FONT................Font character III/ FONT................Font character
========================================================================== */ ========================================================================== */
...@@ -1043,6 +1066,7 @@ aside.news-wrapper { ...@@ -1043,6 +1066,7 @@ aside.news-wrapper {
.product-images .close-panel{ .product-images .close-panel{
position: absolute; position: absolute;
left: 5%; left: 5%;
z-index: 9999;
} }
.woocommerce-product-details__short-description { .woocommerce-product-details__short-description {
...@@ -1142,10 +1166,13 @@ aside.news-wrapper { ...@@ -1142,10 +1166,13 @@ aside.news-wrapper {
right: 7px; right: 7px;
z-index: 9999999; z-index: 9999999;
} }
.slick-dots{
line-height: 0px;
}
.nav-slider ul { .nav-slider ul {
position: absolute; position: absolute;
left: 100%; left: 100%;
z-index: 999; z-index: 9999;
display: table; display: table;
margin-left: 25px; margin-left: 25px;
} }
...@@ -2278,6 +2305,9 @@ div.wpcf7-mail-sent-ok{ ...@@ -2278,6 +2305,9 @@ div.wpcf7-mail-sent-ok{
.woocommerce-product-gallery{ .woocommerce-product-gallery{
display: none !important; display: none !important;
} }
.single_add_to_cart_button{
display: none;
}
/* ------------------------*/ /* ---------->>> Acces Popup <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> Acces Popup <<<-----------*/ /* ------------------------*/
/*POPUP*/ /*POPUP*/
......
wp-content/themes/nap/assets/css/responsive.css
View file @ ae9c1ab4
...@@ -29,13 +29,16 @@ ...@@ -29,13 +29,16 @@
} }
/*Product*/ /*Product*/
#slides{ #slides{
width: 400px; width: 300px;
} }
.element-slider{ .element-slider{
height: 400px; height: 300px;
}
.slides-wrapper{
width: 78%;
} }
.slides-wrapper .gallery-content{ .slides-wrapper .gallery-content{
max-width: 400px; max-width: 360px;
} }
.slick-prev { .slick-prev {
left: -35px; left: -35px;
...@@ -43,8 +46,11 @@ ...@@ -43,8 +46,11 @@
.slick-next { .slick-next {
right: -35px; right: -35px;
} }
.product-details {
width: calc(44.7% - 5px);
}
.product-details form { .product-details form {
width: 35%; width: 44%;
} }
.product-details .list { .product-details .list {
padding: 20px 7px; padding: 20px 7px;
...@@ -53,8 +59,8 @@ ...@@ -53,8 +59,8 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.color-list input[type='radio']:after{ .color-list input[type='radio']:after{
height: 30px; height: 33px;
width: 30px; width: 33px;
} }
.pa_couleur li { .pa_couleur li {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -65,8 +71,26 @@ ...@@ -65,8 +71,26 @@
width: 18px; width: 18px;
background-size: 17px; background-size: 17px;
} }
label.chevron.bottom {
width: 100%;
}
.product-info { .product-info {
width: 65%; width: 56%;
}
.product-info .info-content{
padding: 100px 10px;
}
.list .product-header {
padding: 100px 0px 33px;
}
.rounded{
padding: 7px 15px;
}
.rounded.download-btn:before {
margin-right: 7px;
}
.nav-slider ul li:hover{
width: 111%;
} }
/*Uniqpaper*/ /*Uniqpaper*/
.form-wrapper { .form-wrapper {
...@@ -129,6 +153,30 @@ ...@@ -129,6 +153,30 @@
.right-container .right-panel{ .right-container .right-panel{
padding: 0 27px; padding: 0 27px;
} }
/* Product */
.slides-wrapper {
width: 100%;
}
.product-images .close-panel{
position: relative;
left: inherit;
float: left;
}
.product-images{
padding: 39px 20px;
}
.product-slides {
padding-left: 0px;
width: 100%;
}
.product-slides .product-header{
max-width: 300px;
margin: 0 auto;
padding-left: 0px;
}
.nav-slider ul{
margin-left: 15px;
}
} }
/* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) { @media screen and (min-width: 861px) {
...@@ -148,7 +196,7 @@ ...@@ -148,7 +196,7 @@
display: block; display: block;
} }
.main{ .main{
height: auto !important; /*height: auto !important;*/
} }
.container-bg{ .container-bg{
left: 0; left: 0;
...@@ -483,6 +531,207 @@ ...@@ -483,6 +531,207 @@
.panel .product-list{ .panel .product-list{
padding: 0 35px; padding: 0 35px;
} }
.cover-mobile .cover-desc-wrapper{
width: 80%;
max-width: 300px;
}
/* Product */
.product-images{
width: 100% !important;
display: block;
margin-bottom: 19px;
}
#slides {
width: 100%;
max-width: 100%;
margin: 0 auto;
z-index: 99999;
padding-top: 0;
height: 500px;
}
.slides-wrapper .row{
display: block;
}
.slides-wrapper{
width: 72%;
margin: 0 auto;
height: 100%;
}
.slides-wrapper .gallery{
overflow: initial !important;
}
.element-slider{
height: 100%;
width: 100%;
}
.slick-track,
.slick-list{
height: 100% !important;
}
.product-details{
height: 100% !important;
position: relative;
float: none;
}
.product-details form,
.product-details .list,
.product-details{
width: 100%;
max-width: 100%;
}
.product-details .list{
border-top: 1px solid rgba(26,26,26,0.1);
border-bottom: 1px solid rgba(26,26,26,0.1);
padding: 26px 0px 19px;
border-left: none;
}
.product-info.border-l:before,
.list.border-l:before{
display: none;
}
.product-details .list:last-child{
border-top: 0px;
}
.list li{
display: inline-block;
margin-bottom: 0px;
}
.format-list input[type='radio'],
.color-list input[type='radio']{
margin: 0 5px;
}
.list .product-header,
.product-details .list ul{
display: inline-block;
vertical-align: top;
}
.list .product-header{
padding: 0px;
margin-right: 0px;
vertical-align: top;
width: 20%;
padding-top: 11px;
}
.slides-wrapper .gallery-content {
max-width: 80%;
}
.slides-wrapper .gallery-content .close-btn{
right: -45px;
display: none !important;
}
.product-details .list ul{
width: 100%;
text-align: left;
padding-right: 10px;
display: flex;
}
.nav-slider ul .icon{
display: inline-block;
}
.product-slides .close-btn{
display: none;
position: relative;
float: right;
top: 0px;
}
.product-slides .product-header {
max-width: 72%;
}
.product-header .chevron.bottom::after {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.product-header .chevron::after {
height: 7px;
width: 7px;
display: inline-block;
vertical-align: top;
margin-top: 0;
margin-left: 15px;
}
.product-info {
width: 100%;
padding-bottom: 43px;
margin-bottom: 11px;
}
.product-info .info-content{
padding: 50px 10px 27px;
}
#product .chevron:after{
top: 7px;
}
.rotate.chevron.bottom::after{
top: 10px !important;
}
.info-content .details{
display: block;
}
.product-details{
position: relative;
display: block;
right: initial !important;
}
.product-details .list-wrapper{
width: 79%;
display: inline-block;
}
.show-product{
display: none;
}
.product-info .btn-list a{
display: block;
width: 200px;
margin: 0 auto;
padding: 9px 0px;
margin-bottom: 10px;
}
.product-list .suggest-header .close-btn{
display: none;
}
#product .product-list{
position: relative;
display: block;
height: 0;
left: initial;
right: initial !important;
width: 100%;
opacity: 0;
padding-top: 20px;
}
#product .product-list.open{
height: auto;
}
#product .product-list-content{
padding-bottom: 28px;
}
.suggest-header h2{
margin-bottom: 18px;
}
#product .product-list article{
display: inline-block;
width: 150px;
margin-bottom: 10px;
}
.product-list figure{
max-width: 146px;
height: 154px;
}
.product-list figure img {
height: 154px;
object-fit: cover;
}
.product-list article h3{
margin-top: 11px;
}
#product label.chevron.bottom:after{
top: 2px;
}
.pa_format ul li img{
margin-top: 0px;
}
/* form */ /* form */
.form-wrapper{ .form-wrapper{
padding: 23px 20px 20px; padding: 23px 20px 20px;
...@@ -525,6 +774,7 @@ ...@@ -525,6 +774,7 @@
/*footer*/ /*footer*/
footer{ footer{
display: none; display: none;
height: 0;
} }
} }
/*END (max-width: 860px) */ /*END (max-width: 860px) */
...@@ -541,6 +791,69 @@ ...@@ -541,6 +791,69 @@
.panel section > h2{ .panel section > h2{
font-size: 20px; font-size: 20px;
} }
/* Product */
.product-header .chevron::after{
margin-left: 7px;
}
.product-details .list-wrapper{
width: 78%;
}
.product-details .list{
padding: 26px 0px 5px;
}
.product-slides .product-header{
padding: 22px 0px 11px;
max-width: 75%;
}
.product-images{
padding: 39px 0px;
}
.chevron::after,
.slick-arrow::before{
height: 7px;
width: 7px;
}
.slides-wrapper{
width: 75%;
}
.nav-slider ul {
margin-left: 5px;
}
.slick-prev {
left: -40px;
}
.product-images .btn-wrapper{
display: block;
width: 75%;
float: none;
margin: 0 auto;
}
.product-images .btn-wrapper .circle-btn{
float: left;
height: 70px;
width: 70px;
}
.backlink{
font-size: 8px;
}
.backlink:after{
background-size: 17px;
width: 18px;
height: 4px;
margin-left: 24px;
}
.nav-slider ul li{
margin-bottom: 7px;
}
#product .product-list article{
width: 148px;
}
#product .product-list-content {
padding: 0px 9px 20px;
}
.product-list .suggest-header {
margin: 0px 9px;
}
} }
/* ------------------------*/ /* ---------->>> 420 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 420 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 420px) { @media screen and (max-width: 420px) {
...@@ -566,4 +879,11 @@ ...@@ -566,4 +879,11 @@
padding: 40px 9px 16px; padding: 40px 9px 16px;
letter-spacing: 0px; letter-spacing: 0px;
} }
/* Product */
.slides-wrapper .gallery article{
margin-bottom: 10px;
}
.slides-wrapper .gallery-content {
max-width: 90%;
}
} }
\ No newline at end of file
wp-content/themes/nap/assets/js/main.js
View file @ ae9c1ab4
...@@ -373,6 +373,7 @@ $.fn.appendMobileMenu = function(){ ...@@ -373,6 +373,7 @@ $.fn.appendMobileMenu = function(){
filterWidth = $('.right-container .left-panel').outerWidth(), filterWidth = $('.right-container .left-panel').outerWidth(),
lastSectionHeight = $('#catalogue .panel-content section').last().outerHeight(), lastSectionHeight = $('#catalogue .panel-content section').last().outerHeight(),
footerContact = $('.contact-form .footer').outerHeight(); footerContact = $('.contact-form .footer').outerHeight();
console.log(footerHeight);
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ; $('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight); $('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight); $('.full-height').outerHeight(maxHeight);
...@@ -381,7 +382,6 @@ $.fn.appendMobileMenu = function(){ ...@@ -381,7 +382,6 @@ $.fn.appendMobileMenu = function(){
$('.right-container').outerWidth(windowWidth - navMenuWidth); $('.right-container').outerWidth(windowWidth - navMenuWidth);
$('.position--after-menu').css('left',navMenuWidth); $('.position--after-menu').css('left',navMenuWidth);
$('.right-panel').outerWidth(windowWidth - (navMenuWidth + filterWidth)); $('.right-panel').outerWidth(windowWidth - (navMenuWidth + filterWidth));
console.log(navMenuWidth);
$('.contact-form').height(windowHeight - footerHeight); $('.contact-form').height(windowHeight - footerHeight);
$('.contact-form .inner-form').outerHeight(windowHeight - footerContact); $('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
if (lastSectionHeight < windowHeight - footerHeight) if (lastSectionHeight < windowHeight - footerHeight)
...@@ -397,7 +397,6 @@ $.fn.appendMobileMenu = function(){ ...@@ -397,7 +397,6 @@ $.fn.appendMobileMenu = function(){
$('.filter-list .top-header').css('top',"initial"); $('.filter-list .top-header').css('top',"initial");
$('.header .nav-wrapper li.to-replace').append($('.mobile-nav .nav-wrapper li.current ul')); $('.header .nav-wrapper li.to-replace').append($('.mobile-nav .nav-wrapper li.current ul'));
$('.mobile-nav .nav-wrapper ul').find('li').remove(); $('.mobile-nav .nav-wrapper ul').find('li').remove();
}else{ }else{
$('.filter').appendMap(); $('.filter').appendMap();
$('.main').css('padding-top',navHeight); $('.main').css('padding-top',navHeight);
...@@ -406,6 +405,7 @@ $.fn.appendMobileMenu = function(){ ...@@ -406,6 +405,7 @@ $.fn.appendMobileMenu = function(){
$('.filter-list').css('margin-top',navHeight); $('.filter-list').css('margin-top',navHeight);
$('.filter-list .top-header, .mobile-nav').css('top',navHeight); $('.filter-list .top-header, .mobile-nav').css('top',navHeight);
$('.mobile-nav .nav-wrapper ul').appendMobileMenu(); $('.mobile-nav .nav-wrapper ul').appendMobileMenu();
$('#slides').height($('.slides-wrapper').width());
} }
checkFooterNavPosition(); checkFooterNavPosition();
} }
......
wp-content/themes/nap/assets/js/product.js
View file @ ae9c1ab4
...@@ -119,11 +119,14 @@ $(function(){ ...@@ -119,11 +119,14 @@ $(function(){
tl.fromTo('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0); tl.fromTo('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
tl.fromTo('.nav-slider',0.1,{opacity:1},{opacity:0},0); tl.fromTo('.nav-slider',0.1,{opacity:1},{opacity:0},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0); tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
$('.slides-wrapper').toggleClass('overflow-auto');
$('.product-slides .close-btn').fadeIn('slow');
}); });
$('.gallery').on('click','.close-btn,article',function(){ $('.product-slides').on('click','.close-btn,article',function(){
$('.gallery').fadeTo( "slow", 0).css('visibility','hidden'); $('.gallery').fadeTo( "slow", 0).css('visibility','hidden');
$('#slides,.nav-slider').fadeTo( "slow", 1); $('#slides,.nav-slider').fadeTo( "slow", 1);
$('.slides-wrapper').toggleClass('overflow-auto');
$('.product-slides .close-btn').fadeOut('slow');
}) })
} }
$.fn.showRightPanelAnimation = function(removeClass,addClass){ $.fn.showRightPanelAnimation = function(removeClass,addClass){
...@@ -143,6 +146,17 @@ $(function(){ ...@@ -143,6 +146,17 @@ $(function(){
wrapper.css({'right': 0, 'opacity':1}); wrapper.css({'right': 0, 'opacity':1});
$('#product .product-list article').showRightPanelAnimation('fadeOutUp','hidden-elem visible-elem animated fadeInDown'); $('#product .product-list article').showRightPanelAnimation('fadeOutUp','hidden-elem visible-elem animated fadeInDown');
}) })
$('.show-product-mobile').on('click',function(){
var div = $('.product-list');
//wrapper.slideToggle('slow');
wrapper.toggleClass('visible-elem animated fadeInDown open ');
$('body').animate({
scrollTop: div.position().top
}, 1000,'swing');
$(this).toggleClass('rotate');
})
$(this).on('click','.close-btn',function(){ $(this).on('click','.close-btn',function(){
wrapper.css('right', -widthPanel); wrapper.css('right', -widthPanel);
$('#product .product-list article').showRightPanelAnimation('fadeInDown','fadeOutUp'); $('#product .product-list article').showRightPanelAnimation('fadeInDown','fadeOutUp');
......
wp-content/themes/nap/woocommerce/single-product/add-to-cart/simple.php
View file @ ae9c1ab4
...@@ -34,6 +34,7 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -34,6 +34,7 @@ do_action('woocommerce_before_add_to_cart_form');
<h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name ?></h2> <h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name ?></h2>
<h3 class="crete"><?php the_title(); ?></h3> <h3 class="crete"><?php the_title(); ?></h3>
</div> </div>
<span class="close-btn display--only-mobile"></span>
<div class="slides-wrapper center"> <div class="slides-wrapper center">
<div class="row"> <div class="row">
<div class="nav-slider transition"> <div class="nav-slider transition">
...@@ -180,4 +181,5 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -180,4 +181,5 @@ do_action('woocommerce_before_add_to_cart_form');
</article> </article>
</div> </div>
</div> </div>
<div class="display--only-mobile"><span class = "chevron bottom blue-bg down-btn show-product-mobile"></span></div>
</div> </div>
wp-content/themes/nap/woocommerce/single-product/add-to-cart/variable.php
View file @ ae9c1ab4
...@@ -87,6 +87,7 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -87,6 +87,7 @@ do_action('woocommerce_before_add_to_cart_form');
<h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name; ?></h2> <h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name; ?></h2>
<h3 class="crete"><?php the_title();?></h3> <h3 class="crete"><?php the_title();?></h3>
</div> </div>
<span class="close-btn display--only-mobile"></span>
<div class="slides-wrapper center"> <div class="slides-wrapper center">
<div class="row"> <div class="row">
<div class="nav-slider transition"> <div class="nav-slider transition">
...@@ -202,6 +203,7 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -202,6 +203,7 @@ do_action('woocommerce_before_add_to_cart_form');
$checked_value = ''; $checked_value = '';
} }
?> ?>
<div class="list-wrapper">
<ul class="value"> <ul class="value">
<?php <?php
if (!empty($options)) { if (!empty($options)) {
...@@ -228,6 +230,7 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -228,6 +230,7 @@ do_action('woocommerce_before_add_to_cart_form');
?> ?>
</ul> </ul>
</div> </div>
</div>
<?php $i++;endforeach; ?> <?php $i++;endforeach; ?>
</div> </div>
...@@ -311,4 +314,5 @@ do_action('woocommerce_before_add_to_cart_form'); ...@@ -311,4 +314,5 @@ do_action('woocommerce_before_add_to_cart_form');
</div> </div>
</div> </div>
<div class="display--only-mobile"><span class = "chevron bottom blue-bg down-btn show-product-mobile"></span></div>
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment