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
text-align: center;
width: 19px;
}
.overflow-auto{
overflow-x: hidden;
}
/*---------CROSS------------*/
.close-btn {
width: 25px;
......@@ -352,7 +355,7 @@ II/ Helper..............Helper classes
border-radius: 50%;
background: #182566;
cursor: pointer;
z-index: 99;
z-index: 9999999999;
}
.close-btn:before, .close-btn:after {
position: absolute;
......@@ -431,10 +434,26 @@ II/ Helper..............Helper classes
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{
background: #FF6A5F;
color: #fff;
}
.blue-bg.down-btn:after{
color: #fff;
}
.access-form .white-btn,
.white-btn{
background: #FFF;
......@@ -530,6 +549,10 @@ II/ Helper..............Helper classes
transform: rotate(135deg);
margin-top: 5px;
}
.rotate.chevron.bottom::after{
transform: rotate(-45deg);
top: 10px;
}
/* ==========================================================================
III/ FONT................Font character
========================================================================== */
......@@ -1043,6 +1066,7 @@ aside.news-wrapper {
.product-images .close-panel{
position: absolute;
left: 5%;
z-index: 9999;
}
.woocommerce-product-details__short-description {
......@@ -1142,10 +1166,13 @@ aside.news-wrapper {
right: 7px;
z-index: 9999999;
}
.slick-dots{
line-height: 0px;
}
.nav-slider ul {
position: absolute;
left: 100%;
z-index: 999;
z-index: 9999;
display: table;
margin-left: 25px;
}
......@@ -2278,6 +2305,9 @@ div.wpcf7-mail-sent-ok{
.woocommerce-product-gallery{
display: none !important;
}
.single_add_to_cart_button{
display: none;
}
/* ------------------------*/ /* ---------->>> Acces Popup <<<-----------*/ /* ------------------------*/
/*POPUP*/
......
wp-content/themes/nap/assets/css/responsive.css
View file @ ae9c1ab4
......@@ -29,13 +29,16 @@
}
/*Product*/
#slides{
width: 400px;
width: 300px;
}
.element-slider{
height: 400px;
height: 300px;
}
.slides-wrapper{
width: 78%;
}
.slides-wrapper .gallery-content{
max-width: 400px;
max-width: 360px;
}
.slick-prev {
left: -35px;
......@@ -43,8 +46,11 @@
.slick-next {
right: -35px;
}
.product-details {
width: calc(44.7% - 5px);
}
.product-details form {
width: 35%;
width: 44%;
}
.product-details .list {
padding: 20px 7px;
......@@ -53,8 +59,8 @@
margin-bottom: 10px;
}
.color-list input[type='radio']:after{
height: 30px;
width: 30px;
height: 33px;
width: 33px;
}
.pa_couleur li {
margin-bottom: 10px;
......@@ -65,8 +71,26 @@
width: 18px;
background-size: 17px;
}
label.chevron.bottom {
width: 100%;
}
.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*/
.form-wrapper {
......@@ -129,6 +153,30 @@
.right-container .right-panel{
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 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) {
......@@ -148,7 +196,7 @@
display: block;
}
.main{
height: auto !important;
/*height: auto !important;*/
}
.container-bg{
left: 0;
......@@ -483,6 +531,207 @@
.panel .product-list{
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-wrapper{
padding: 23px 20px 20px;
......@@ -525,6 +774,7 @@
/*footer*/
footer{
display: none;
height: 0;
}
}
/*END (max-width: 860px) */
......@@ -541,6 +791,69 @@
.panel section > h2{
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 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 420px) {
......@@ -566,4 +879,11 @@
padding: 40px 9px 16px;
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(){
filterWidth = $('.right-container .left-panel').outerWidth(),
lastSectionHeight = $('#catalogue .panel-content section').last().outerHeight(),
footerContact = $('.contact-form .footer').outerHeight();
console.log(footerHeight);
$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
$('.main,.load-page').outerHeight(containerHeight);
$('.full-height').outerHeight(maxHeight);
......@@ -381,7 +382,6 @@ $.fn.appendMobileMenu = function(){
$('.right-container').outerWidth(windowWidth - navMenuWidth);
$('.position--after-menu').css('left',navMenuWidth);
$('.right-panel').outerWidth(windowWidth - (navMenuWidth + filterWidth));
console.log(navMenuWidth);
$('.contact-form').height(windowHeight - footerHeight);
$('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
if (lastSectionHeight < windowHeight - footerHeight)
......@@ -397,7 +397,6 @@ $.fn.appendMobileMenu = function(){
$('.filter-list .top-header').css('top',"initial");
$('.header .nav-wrapper li.to-replace').append($('.mobile-nav .nav-wrapper li.current ul'));
$('.mobile-nav .nav-wrapper ul').find('li').remove();
}else{
$('.filter').appendMap();
$('.main').css('padding-top',navHeight);
......@@ -406,6 +405,7 @@ $.fn.appendMobileMenu = function(){
$('.filter-list').css('margin-top',navHeight);
$('.filter-list .top-header, .mobile-nav').css('top',navHeight);
$('.mobile-nav .nav-wrapper ul').appendMobileMenu();
$('#slides').height($('.slides-wrapper').width());
}
checkFooterNavPosition();
}
......
wp-content/themes/nap/assets/js/product.js
View file @ ae9c1ab4
......@@ -119,11 +119,14 @@ $(function(){
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('#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');
$('#slides,.nav-slider').fadeTo( "slow", 1);
$('.slides-wrapper').toggleClass('overflow-auto');
$('.product-slides .close-btn').fadeOut('slow');
})
}
$.fn.showRightPanelAnimation = function(removeClass,addClass){
......@@ -143,6 +146,17 @@ $(function(){
wrapper.css({'right': 0, 'opacity':1});
$('#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(){
wrapper.css('right', -widthPanel);
$('#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');
<h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name ?></h2>
<h3 class="crete"><?php the_title(); ?></h3>
</div>
<span class="close-btn display--only-mobile"></span>
<div class="slides-wrapper center">
<div class="row">
<div class="nav-slider transition">
......@@ -180,4 +181,5 @@ do_action('woocommerce_before_add_to_cart_form');
</article>
</div>
</div>
<div class="display--only-mobile"><span class = "chevron bottom blue-bg down-btn show-product-mobile"></span></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');
<h2 class="crete -italic font-small"><?php echo $sub_cat[0]->name; ?></h2>
<h3 class="crete"><?php the_title();?></h3>
</div>
<span class="close-btn display--only-mobile"></span>
<div class="slides-wrapper center">
<div class="row">
<div class="nav-slider transition">
......@@ -202,6 +203,7 @@ do_action('woocommerce_before_add_to_cart_form');
$checked_value = '';
}
?>
<div class="list-wrapper">
<ul class="value">
<?php
if (!empty($options)) {
......@@ -228,6 +230,7 @@ do_action('woocommerce_before_add_to_cart_form');
?>
</ul>
</div>
</div>
<?php $i++;endforeach; ?>
</div>
......@@ -311,4 +314,5 @@ do_action('woocommerce_before_add_to_cart_form');
</div>
</div>
<div class="display--only-mobile"><span class = "chevron bottom blue-bg down-btn show-product-mobile"></span></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