Skip to content

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

[Responsive]Page contact

parent 06576b62
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 17 deletions
wp-content/themes/nap/assets/css/main.css
View file @ 0aef6b1e
...@@ -150,6 +150,7 @@ textarea{ ...@@ -150,6 +150,7 @@ textarea{
margin-bottom: 9px; margin-bottom: 9px;
padding: 0 10px 3px; padding: 0 10px 3px;
font-size: 13px; font-size: 13px;
background: transparent;
} }
textarea{ textarea{
resize: none; resize: none;
...@@ -188,6 +189,7 @@ svg, svg * { ...@@ -188,6 +189,7 @@ svg, svg * {
} }
select,option{ select,option{
cursor: pointer; cursor: pointer;
-moz-appearance :none;
} }
.files{ .files{
position: relative; position: relative;
...@@ -744,10 +746,10 @@ nav ul ul{ ...@@ -744,10 +746,10 @@ nav ul ul{
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
} }
.header .nav-content .footer.relative{ .header .nav-content .footer.relative{
position: relative; position: relative;
bottom: initial; bottom: initial;
} }
.header .nav-content .footer ul{ .header .nav-content .footer ul{
display: table; display: table;
} }
...@@ -1618,8 +1620,8 @@ label.chevron.bottom::first-letter { ...@@ -1618,8 +1620,8 @@ label.chevron.bottom::first-letter {
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
z-index: 999; z-index: 999;
right: 0px; right: 0px;
margin: 0px auto; margin: 0px auto;
} }
#fullpage .chevron.bottom::after{ #fullpage .chevron.bottom::after{
color: #fff; color: #fff;
...@@ -2132,6 +2134,10 @@ label.chevron.bottom::first-letter { ...@@ -2132,6 +2134,10 @@ label.chevron.bottom::first-letter {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0; left: 0;
right: 0; right: 0;
} }
...@@ -2194,7 +2200,7 @@ input.search{ ...@@ -2194,7 +2200,7 @@ input.search{
height: 1px; height: 1px;
width: 100%; width: 100%;
display: block; display: block;
background: rgba(26,26,26,0.1);; background: rgba(26,26,26,0.1);
left: 0; left: 0;
} }
.contact-wrapper .message textarea{ .contact-wrapper .message textarea{
......
wp-content/themes/nap/assets/css/responsive.css
View file @ 0aef6b1e
...@@ -76,10 +76,28 @@ ...@@ -76,10 +76,28 @@
.section .bloc{ .section .bloc{
max-width: 75%; max-width: 75%;
} }
/* Contact */
.contact-wrapper .left-panel{
width: 32.5%;
}
.contact-form,
.search-filter{
width: 50%;
}
.contact-wrapper .form-wrapper{
padding: 73px 20px 35px;
}
} }
/* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 1024 <<<-----------*/ /* ------------------------*/
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
/* general */
.half-col{
width: 100%;
}
.rounded{
min-width: 128px;
}
/*Home*/ /*Home*/
aside.news-wrapper{ aside.news-wrapper{
width: 40%; width: 40%;
...@@ -100,6 +118,10 @@ ...@@ -100,6 +118,10 @@
.floated-bloc .text-content{ .floated-bloc .text-content{
padding: 28px 16px; padding: 28px 16px;
} }
/* Contact */
.contact-form .footer{
padding: 30px 22px 32px;
}
} }
/* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/ /* ------------------------*/ /* ---------->>> 860 <<<-----------*/ /* ------------------------*/
@media screen and (min-width: 861px) { @media screen and (min-width: 861px) {
...@@ -214,7 +236,7 @@ ...@@ -214,7 +236,7 @@
/* Stories */ /* Stories */
.section .bloc{ .section .bloc{
max-height: 65%; max-height: 65%;
bottom: calc(30% + 30px); bottom: calc(30% + 30px);
} }
.bloc .desc-content{ .bloc .desc-content{
max-height: 50vh; max-height: 50vh;
...@@ -245,15 +267,112 @@ ...@@ -245,15 +267,112 @@
#fullpage .chevron.bottom::after { #fullpage .chevron.bottom::after {
margin-top: 6px; margin-top: 6px;
} }
/* Contact */
.contact-wrapper .left-panel{
position: relative;
width: 100%;
left: initial !important;
}
.left-panel .map{
display: none;
}
.map{
position: relative;
top: initial;
transform: none;
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}
.filter,
.filter-wrapper .map,
.details,
.active-com{
display: none;
}
.contact-form, .search-filter {
width: 100%;
height: auto !important;
}
.contact-wrapper .form-wrapper h2{
cursor: pointer;
}
.contact-wrapper .form-wrapper h2:after{
content: '+';
display: inline-block;
float: right;
font-size: 30px;
line-height: 14px;
display: inline-block;
float: right;
}
.contact-wrapper .form-wrapper h2.on:after{
content: '\002014';
font-size: 22px
}
.left-panel .map{
display: none !important;
}
.contact-form{
background: #fff;
}
.map {
text-align: center;
background: #f4f5f9;
}
.map object{
max-width: 100%;
}
.separation{
display: none;
}
.contact-wrapper .form-wrapper{
padding: 16px 0px 0px;
height: auto !important;
}
.contact-wrapper .form-wrapper h2{
padding-left: 21px;
padding-right: 21px;
}
.form-wrapper h2{
padding-bottom: 24px;
}
.filter-wrapper{
border-bottom: 1px solid rgba(26,26,26,0.1);
}
.contact-wrapper textarea{
width: 100%;
margin-bottom: 26px;
}
.contact-form .footer{
position: relative !important;
margin-top: 38px;
}
.contact-wrapper .details,
.contact-wrapper form{
text-align: center;
padding: 0 34px;
}
.commercial-details{
padding: 0 34px;
}
div.wpcf7 .ajax-loader{
display: none;
}
.commercial-details figure{
margin-left: auto;
margin-right: auto;
}
.active-com figure{
margin-left: 0;
}
/* form */ /* form */
.form-wrapper{ .form-wrapper{
padding: 23px 20px 20px; padding: 23px 20px 20px;
} }
.half-col{
width: 100%;
}
.coord { .coord {
width: 76%; width: 80%;
margin: 0 auto; margin: 0 auto;
padding-bottom: 20px; padding-bottom: 20px;
} }
......
wp-content/themes/nap/assets/js/main.js
View file @ 0aef6b1e
...@@ -6,6 +6,11 @@ $(function(){ ...@@ -6,6 +6,11 @@ $(function(){
$('a[href^="#"], .easyzoom a').click(function(e){ $('a[href^="#"], .easyzoom a').click(function(e){
e.preventDefault(); e.preventDefault();
}); });
$(document).find('.contact-form h2').on('click', function(){
$('.contact-form form').slideToggle();
$(this).toggleClass('on');
})
//Open Menu //Open Menu
var toggles = document.querySelectorAll(".c-hamburger"); var toggles = document.querySelectorAll(".c-hamburger");
for (var i = toggles.length - 1; i >= 0; i--) { for (var i = toggles.length - 1; i >= 0; i--) {
...@@ -329,6 +334,15 @@ $.fn.getMenuBg = function(){ ...@@ -329,6 +334,15 @@ $.fn.getMenuBg = function(){
if (windowWidth > 860){ if (windowWidth > 860){
tlBg.to('.container-bg',1.2,{width:navwWidth},0.4); tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
} }
}
$.fn.appendMap = function(){
var $this = $(this);
if (!(this.find('.map').length)){
this.append($('.map'));
}
setTimeout(function(){
initMap();
},330)
} }
//Responsive function //Responsive function
$.fn.responsive = function(){ $.fn.responsive = function(){
...@@ -363,9 +377,15 @@ $.fn.getMenuBg = function(){ ...@@ -363,9 +377,15 @@ $.fn.getMenuBg = function(){
$('#fullpage .chevron').css('left',navMenuWidth); $('#fullpage .chevron').css('left',navMenuWidth);
$('.container-bg').css({'height':'100%' , 'width' : navMenuWidth}); $('.container-bg').css({'height':'100%' , 'width' : navMenuWidth});
$('.main').css('padding-top',0); $('.main').css('padding-top',0);
$('.search-filter h2').removeClass('show-filter');
$('.filter, .left-panel .map, .details').show();
$('.left-panel').appendMap();
}else{ }else{
$('.filter').appendMap();
$('.main').css('padding-top',navHeight); $('.main').css('padding-top',navHeight);
$('.container-bg').css({'height':navHeight}); $('.container-bg').css({'height':navHeight});
$('.search-filter h2').addClass('show-filter');
} }
checkFooterNavPosition(); checkFooterNavPosition();
} }
...@@ -543,6 +563,7 @@ $(document).ready(function(){ ...@@ -543,6 +563,7 @@ $(document).ready(function(){
//TODO //TODO
$('.cover-wrapper').last().addClass('last'); $('.cover-wrapper').last().addClass('last');
$('.cover-wrapper').first().addClass('first'); $('.cover-wrapper').first().addClass('first');
showMap();
}); //end document ready }); //end document ready
$(window).resize(function() { $(window).resize(function() {
......
wp-content/themes/nap/assets/js/map.js
View file @ 0aef6b1e
...@@ -16,6 +16,7 @@ function initMap(){ ...@@ -16,6 +16,7 @@ function initMap(){
var initialClassNum = 'st5'; var initialClassNum = 'st5';
var proceed = false; var proceed = false;
if (svg.find("#nap-carte-dep-"+dep).length) { if (svg.find("#nap-carte-dep-"+dep).length) {
console.log('inside map');
svg.find("#nap-carte-dep-"+dep).attr('class', initialClassDep + ' ' + zone + ' zonedep'); svg.find("#nap-carte-dep-"+dep).attr('class', initialClassDep + ' ' + zone + ' zonedep');
svg.find("#nap-carte-numero-dep-"+dep).attr('class', initialClassNum + ' ' + zone + 'num zonenum'); svg.find("#nap-carte-numero-dep-"+dep).attr('class', initialClassNum + ' ' + zone + 'num zonenum');
proceed = true; proceed = true;
...@@ -42,6 +43,7 @@ function initMap(){ ...@@ -42,6 +43,7 @@ function initMap(){
}); });
}) })
} }
},0); },0);
} }
function selectZone(zone, initialClassDep, initialClassNum) { function selectZone(zone, initialClassDep, initialClassNum) {
...@@ -51,10 +53,10 @@ function selectZone(zone, initialClassDep, initialClassNum) { ...@@ -51,10 +53,10 @@ function selectZone(zone, initialClassDep, initialClassNum) {
//console.log(jQuery(this)); //console.log(jQuery(this));
//console.log(linkedZone, zone, zone === linkedZone); //console.log(linkedZone, zone, zone === linkedZone);
if(zone === linkedZone){ if(zone === linkedZone){
jQuery(this).slideDown("slow"); jQuery(this).slideDown("slow").addClass('active-com');
} }
else{ else{
jQuery(this).slideUp("slow"); jQuery(this).slideUp("slow").removeClass('active-com');
} }
}); });
svg.find("." + zone).attr('class', initialClassDep + ' red ' + zone + ' zonedep'); svg.find("." + zone).attr('class', initialClassDep + ' red ' + zone + ' zonedep');
...@@ -65,7 +67,13 @@ function selectZone(zone, initialClassDep, initialClassNum) { ...@@ -65,7 +67,13 @@ function selectZone(zone, initialClassDep, initialClassNum) {
} }
window.selectedZone = zone; window.selectedZone = zone;
} }
function showMap(){
jQuery(document).find('.search-filter h2').on('click', function(){
$('.filter').appendMap();
$('.filter, .details, .active-com, .map').slideToggle();
$(this).toggleClass('on');
})
}
jQuery("#map-search").bind('submit',function(e) { jQuery("#map-search").bind('submit',function(e) {
e.preventDefault(); e.preventDefault();
var search = jQuery('#search').val(), var search = jQuery('#search').val(),
...@@ -83,11 +91,12 @@ jQuery("#map-search").bind('submit',function(e) { ...@@ -83,11 +91,12 @@ jQuery("#map-search").bind('submit',function(e) {
}); });
}); });
//Highlight zone when select country //Highlight zone when select country
jQuery("#selectCountry").on('change',function(e) { jQuery(document).find("#selectCountry").on('change',function(e) {
var country = e.target.value, var country = e.target.value,
initialClassDep = 'st3', initialClassDep = 'st3',
initialClassNum = 'st5'; initialClassNum = 'st5';
if (country === 'FR') { if (country === 'FR') {
console.log('ffff');
jQuery('.form-element.cp').slideDown('slow'); jQuery('.form-element.cp').slideDown('slow');
selectZone(null, initialClassDep, initialClassNum); selectZone(null, initialClassDep, initialClassNum);
return; return;
......
wp-content/themes/nap/contact.php
View file @ 0aef6b1e
...@@ -95,9 +95,9 @@ $post_ID = 157; ...@@ -95,9 +95,9 @@ $post_ID = 157;
</div> </div>
</div> </div>
<div class="contact-form right border-l row"> <div class="contact-form right border-l row gray-bg">
<div class="form-wrapper inner-form"> <div class="form-wrapper inner-form">
<h2>Je souhaite être <br> contacté</h2> <h2 class="on">Je souhaite être <br> contacté</h2>
<!--<form method="POST"> <!--<form method="POST">
<div class="clearfix"> <div class="clearfix">
<div class="row left half-col"> <div class="row left half-col">
...@@ -119,7 +119,7 @@ $post_ID = 157; ...@@ -119,7 +119,7 @@ $post_ID = 157;
</div> </div>
<div class="footer blue-bg abs font-small"> <div class="footer blue-bg abs font-small">
<h3 class="crete marker">Siège</h3> <h3 class="crete marker">Siège</h3>
<div class="content"> <div class="content clearfix">
<div class="row left half-col"> <div class="row left half-col">
<?php echo get_field('contact_adresse', $post_ID); ?> <?php echo get_field('contact_adresse', $post_ID); ?>
</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