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