public function contactInfos($texte, $bureaux) {
- $res = '<div class="content"><div class="contact-texte">' . $this->view->markupDotclear($texte) . '</div></div>';
-
- //$res.= '<div class="twocols"><div class="cols">';
-
- //$bureaux = $contact['bureaux'];
-
+ $res='';
foreach ($bureaux as $id => $bureau) {
- $res.='<div class="half-full" itemscope itemtype="http://schema.org/LocalBusiness">';
- $res.='<div class="inner">';
-
- $res.='<p class="titre" itemprop="name">' . $bureau['coordonnees']['nom'] . '<p>';
-
- $res.='<div class="adresse" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">';
- $res.='<p>' . __('Cubedesigners') . '</p>';
- $res.='<p itemprop="streetAddress">' . $bureau['coordonnees']['adresse'] . '</p>';
- $res.='<p><span itemprop="postalCode">' . $bureau['coordonnees']['code_postal'] . '</span> <span itemprop="addressLocality">' . $bureau['coordonnees']['ville'] . '</span> <span itemprop="addressCountry">' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory') . '</span></p>';
-
- // Alternative link that is displayed when there isn't enough space for the maps
- $res.=$this->view->linkGeo(__("Plan d'accès"), $bureau['coordonnees']['adresse'] . ',' . $bureau['coordonnees']['ville'] . ',' . Zend_Locale::getTranslation($bureau['coordonnees']['pays'], 'territory'), array('class' => 'but mobile'));
- $res.='</div>';
-
- $res.='<div class="numeros">';
- $res.='<p itemprop="telephone">' . __('Tel') . ' ' . $this->view->linkPhone($bureau['coordonnees']['tel']) . '</p>';
- //$res.='<p itemprop="faxNumber">' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '</p>';
- $res.='</div>';
-
- $res.='</div>'; // .inner
-
+ $res.='<div class="full">';
// Map holder
$res.='<div id="map' . $id . '" data-id="' . $id . '" class="googleMap"></div>';
- /* $res.='<div class="geoloc">';
- $res.=$this->view->linkGeo(__("Plan d'accès"), $bureau['adresse']['adresse'] . ',' . $bureau['adresse']['ville'] . ',' . Zend_Locale::getTranslation($bureau['adresse']['pays'], 'territory'));
- $res.='</div>'; */
-
$res.='</div>'; // .half-full
}
- //$res.= '</div></div>';
-
return $res;
}
<div class="title content"><?php echo $this->markupDotclear($this->titre); ?></div>
+<div class="content" id="form" class="ajax">
+ <form action="" method="post" class="ajax">
+ <div class="line3">
+ <div><input type="text" name="name" placeholder="Your name" /></div>
+ <div><input type="email" name="email" placeholder="Your email" /></div>
+ <div><input type="text" name="company" placeholder="Your company" /></div>
+ </div>
+ <div>
+ <input type="text" name="subject" placeholder="Subject" />
+ </div>
+ <div>
+ <textarea name="message" rows="5" placeholder="Message"></textarea>
+ </div>
+ <div>
+ <a href="#" class="submit animated-arrow discreet"><?php echo $this->linkArrow('Submit') ?></a>
+ </div>
+ </form>
+</div>
+
<div class="contact-informations">
<?php echo $this->contactInfos($this->option('contact')['bloc'], $bureaux); ?>
</div>
-
-<?php
-echo $this->twocols(false);
}
&.black {
- background-color: #000;
+ background-color: @black;
color: #fff;
margin: 0;
}
@import "00-constants";
-.half-full {
-
- float: left;
- width: 50%;
- padding-right: 20px; // half of middle margin
-
- &:last-child {
- padding-right: 0;
- padding-left: 20px; // half of middle margin
-
- .inner {
- padding-left: 0;
- padding-right: 34px;
- float: none;
- margin-right: 0;
- }
- }
-
- .inner {
- .content-center();
- //max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
- //padding-left: 34px;
- //float: right;
- //width: 100%;
- }
-
- @media screen and (max-width: 790px) {
-
- float: none;
- width: 100%;
- padding-right: 0;
-
- &:last-child {
- padding-left: 0;
- padding-top: 50px;
-
- .inner {
- padding-left: 34px;
- }
- }
-
- .inner {
- max-width: 1048px;
- min-width: 530px;
- float: none;
- }
-
- }
+.full {
+ width: 100%;
+ height: 600px;
+
+ &:last-child {
+ padding-right: 0;
+
+ .inner {
+ padding-left: 0;
+ float: none;
+ margin-right: 0;
+ }
+ }
+
+ .inner {
+ .content-center();
+ //max-width: 504px; // (1048 / 2) - 20px to account for middle padding on each column
+ //padding-left: 34px;
+ //float: right;
+ //width: 100%;
+ }
+
+ @media screen and (max-width: 790px) {
+
+ float: none;
+ width: 100%;
+ padding-right: 0;
+
+ &:last-child {
+ padding-left: 0;
+ padding-top: 50px;
+
+ .inner {
+ padding-left: 34px;
+ }
+ }
+
+ .inner {
+ max-width: 1048px;
+ min-width: 530px;
+ float: none;
+ }
+
+ }
}
/* Contact informations */
.contact-informations {
- margin: 30px 0 50px 0;
- overflow: hidden;
-
- .contact-texte {
- background-image: url('../images/picto_footer_mail.svg');
- background-repeat: no-repeat;
- background-position: 0 0;
- font-weight: 300;
- padding-left: 60px;
- padding-top: 10px;
- min-height: 50px;
- margin-bottom: 30px;
- }
-
- .titre {
- padding-bottom: 25px;
- font-size: 32px;
- }
-
- .adresse {
- background-image: url('../images/picto_geoloc.svg');
- background-repeat: no-repeat;
- background-position: 0px 0px;
- padding-left: 60px;
- padding-bottom: 15px;
- }
-
- .numeros {
- background-image: url('../images/picto_tel.svg');
- background-repeat: no-repeat;
- background-position: 0px 0px;
- padding-left: 60px;
- padding-bottom: 50px;
-
- p {
- line-height: 49px; // Height of the icon
- }
- }
+ margin: 0;
+ overflow: hidden;
}
/* Google Maps */
.googleMap {
- height: 390px;
- clear: both;
+ height: 100%;
+ clear: both;
- // To make the map semi-responsive:
- //padding-bottom: 37.3%; // Sets height relative to width
- //min-height: 300px; // Stops it getting too short
+ // To make the map semi-responsive:
+ //padding-bottom: 37.3%; // Sets height relative to width
+ //min-height: 300px; // Stops it getting too short
}
// By default, hide the mobile map link button
.but.mobile {
- display: none;
+ display: none;
}
@media screen and (max-height: 530px), screen and (max-width: 530px) {
- .half-full:last-child {
- padding-top: 0;
+ .half-full:last-child {
+ padding-top: 0;
- .numeros {
- padding-bottom: 5px;
- }
- }
+ .numeros {
+ padding-bottom: 5px;
+ }
+ }
- .but.mobile {
- display: inline-block;
- }
+ .but.mobile {
+ display: inline-block;
+ }
- // Hide the maps for mobile
- .googleMap {
- display: none;
- }
+ // Hide the maps for mobile
+ .googleMap {
+ display: none;
+ }
}
+
+
+#form {
+ margin: 30px 0 80px;
+
+ form > div {
+ margin: 15px 0;
+ }
+
+ input, textarea {
+ padding: 15px;
+ border: 1px solid @black;
+ color: @black;
+ font-size: 20px;
+ font-weight: 300;
+ }
+
+ .submit{
+ margin-top: 30px;
+ }
+
+ .line3 {
+ div {
+ display: inline-block;
+ width: 33%;
+ padding-right: 15px;
+
+ &:last-child {
+ width: 33%;
+ padding-right: 0;
+ }
+
+ @media screen and (max-width: 1300px) {
+ display: block;
+ width: 100%;
+ padding-right: 0;
+ margin-bottom: 15px;
+ &:last-child{
+ padding-right: 0;
+ margin-bottom: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ input {
+
+
+ }
+ }
+}
\ No newline at end of file