AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf
AddType application/octet-stream .ttf
- AddType application/x-font-woff .woff
+ AddType application/font-woff .woff
+ AddType application/font-woff2 .woff2
AddType text/cache-manifest .appcache
AddType text/x-component .htc
# Output compression
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
- SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|swf|zip|exe|mp3|f4v|mp4|flv|gz|pdf|swc|ogv|ogm|ogg|webm|svgz|eot|otf|ttf|woff)$ no-gzip dont-vary
+ SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|swf|zip|exe|mp3|f4v|mp4|flv|gz|pdf|swc|ogv|ogm|ogg|webm|svgz|eot|otf|ttf|woff|woff2)$ no-gzip dont-vary
<IfModule mod_headers.c>
Header append Vary User-Agent
protected function _initRouter($initCms = true) {
$router = parent::_initRouter($initCms);
+ $router->addStandardRoute('rss');
return $router;
}
--- /dev/null
+<?php\r
+\r
+\r
+\r
+class RssController extends CubeIT_Controller_LayoutlessController{\r
+\r
+ protected $_queryLimit = 10; // Number of entries to return by default. Set to NULL for no limit.\r
+\r
+\r
+ public function indexAction() {\r
+\r
+ }\r
+\r
+ public function newsAction() {\r
+\r
+ // Set up the feed with values from the CMS\r
+ $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));\r
+ $feed = $this->_initFeed($rss['rss_news_title'], $rss['rss_news_description']);\r
+\r
+ $news=CubeIT_Util_Cms::unserialize($this->getOpt('actus'));\r
+\r
+// echo '<pre>'; print_r($news); exit;\r
+\r
+ foreach($news['actualites'] as $n) {\r
+\r
+ $link = null;\r
+\r
+ // Handle links - can be either an external URL or an internal page link. Internal has priority.\r
+ if(!empty($n['link']['url']) || !empty($n['link']['page'])) {\r
+ $link = !empty($n['link']['page']) ? CubeIT_View_Helper_Link::internal($n['link']['page']) : $n['link']['url'];\r
+\r
+ // Make sure that link is properly formed (mainly for the external URL)\r
+ if(!Zend_Uri::check($link)) {\r
+ $link = 'http://'.$link;\r
+ }\r
+ }\r
+\r
+ $e = $feed->createEntry();\r
+\r
+ $e->setTitle($n['texte']);\r
+ $e->setDateCreated(strtotime($n['date']));\r
+ $e->setId($n['date']);\r
+ if($link) { $e->setLink($link); }\r
+\r
+ $feed->addEntry($e);\r
+\r
+ }\r
+\r
+ echo $feed->export('rss');\r
+ }\r
+\r
+ public function projectsAction() {\r
+\r
+ $realisations = Cubedesigners_Model_Realisation::factory()->where('online = ?', 1)\r
+ ->order('date DESC')\r
+ ->limit($this->_queryLimit)\r
+ ->find();\r
+\r
+ // Set up the feed with values from the CMS\r
+ $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));\r
+ $feed = $this->_initFeed($rss['rss_projects_title'], $rss['rss_projects_description']);\r
+\r
+ foreach($realisations as $r){\r
+\r
+ //fb($r);\r
+\r
+ // Prepare feed data\r
+ $title = CubeIT_Util_Cms::unserialize($r->getTitre());\r
+ $description = CubeIT_Util_Cms::unserialize($r->getDescription());\r
+ $date = $r->getDate();\r
+ $enclosure = $this->_enclosureDetails(CubeIT_Util_Cms::unserialize($r->getVisuel()));\r
+\r
+ // Get the link using the navigation class. "3" is the ID of the realisations / portfolio page\r
+ $link = CubeIT_View_Helper_Link::internal('3/' . $r->getId());\r
+\r
+ $e = $feed->createEntry();\r
+\r
+ $e->setTitle($title);\r
+ //$e->setId($url);\r
+ $e->setLink($link);\r
+ $e->setDateCreated($date);\r
+ if(!empty($description)) { $e->setDescription($description); }\r
+ if($enclosure) { $e->setEnclosure($enclosure); }\r
+\r
+ $feed->addEntry($e);\r
+\r
+ // Note: unserialize() automatically returns data for the current locale if it can. A different locale can be specified too.\r
+ //fb(CubeIT_Util_Cms::unserialize($r->getTitre())); // using magic functions for accessing data from model ->getnameCamelCased();\r
+\r
+ }\r
+\r
+ echo $feed->export('rss');\r
+\r
+ }\r
+\r
+ public function casestudiesAction() {\r
+\r
+ $studies = Cubedesigners_Model_Casestudy::factory()->where('online = ?', 1)\r
+ ->order('annee DESC')\r
+ ->limit($this->_queryLimit)\r
+ ->find();\r
+\r
+ //fb($studies);\r
+\r
+ // Set up the feed with values from the CMS\r
+ $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));\r
+ $feed = $this->_initFeed($rss['rss_casestudies_title'], $rss['rss_casestudies_description']);\r
+\r
+ foreach($studies as $s) {\r
+\r
+ // Prepare feed data\r
+ $title = CubeIT_Util_Cms::unserialize($s->getTitre());\r
+ $description = CubeIT_Util_Cms::unserialize($s->getDescription());\r
+ $enclosure = $this->_enclosureDetails(CubeIT_Util_Cms::unserialize($s->getVisuel()));\r
+ $date = $s->getAnnee();\r
+\r
+ // Get the link using the navigation class. "4" is the ID of the case studies page\r
+ $link = CubeIT_View_Helper_Link::internal('4/' . $s->getId());\r
+\r
+ $e = $feed->createEntry();\r
+\r
+ $e->setTitle($title);\r
+ if(!empty($description)) { $e->setDescription($description); }\r
+ //$e->setId($url);\r
+ $e->setLink($link);\r
+ if($enclosure) { $e->setEnclosure($enclosure); }\r
+ $e->setDateCreated($date);\r
+\r
+ $feed->addEntry($e);\r
+\r
+ }\r
+\r
+ echo $feed->export('rss');\r
+\r
+ }\r
+\r
+\r
+ /**\r
+ * Set up common feed options\r
+ * @param string $title\r
+ * @return Zend_Feed_Writer_Feed\r
+ * @throws Zend_Feed_Exception\r
+ */\r
+ protected function _initFeed($title = 'Cubedesigners News', $description = 'The latest updates from Cubedesigners') {\r
+\r
+ $feed = new Zend_Feed_Writer_Feed;\r
+\r
+ $feed->setTitle($title);\r
+ $feed->setLink('http://'.$this->getOpt('webhost').'/');\r
+ $feed->setGenerator(array('name' => 'cubeRSS'));\r
+ $feed->setDescription($description);\r
+\r
+ return $feed;\r
+\r
+ }\r
+\r
+ /**\r
+ * Get details for attached imagery on feed items\r
+ * @param array $images\r
+ * @return array\r
+ */\r
+ protected function _enclosureDetails($images) {\r
+\r
+ if(is_array($images)) {\r
+\r
+ $baseURL = 'http://' . $this->getOpt('webhost');\r
+\r
+ $imageURI = CubeIT_View_Helper_ImageCms::getPath($images[0]); // Just get the first image, even if there are more\r
+ $imagePath = $_SERVER['DOCUMENT_ROOT'] . $imageURI;\r
+\r
+ // Find the MIME type of the file\r
+ $finfo = finfo_open(FILEINFO_MIME_TYPE);\r
+ $type = finfo_file($finfo, $imagePath);\r
+\r
+ $filesize = filesize($imagePath);\r
+\r
+ $image['uri'] = $baseURL . $imageURI;\r
+ $image['type'] = $type;\r
+ $image['length'] = $filesize;\r
+\r
+ return $image;\r
+\r
+ }\r
+\r
+ return false;\r
+\r
+ }\r
+\r
+}
\ No newline at end of file
$propulse->setLabel('Propulsée');
$this->addElement($propulse);
- $annee = new Zend_Form_Element_Text('annee');
+ $annee = new CubeIT_Form_Element_Date('annee');
+ $annee->setPrecision(Zend_Date::DAY);
$annee->setLabel('Année');
$this->addElement($annee);
--- /dev/null
+<?php\r
+\r
+\r
+class Cubedesigners_Form_CMS_Sub_RSS extends CubeIT_Form_SubForm {\r
+\r
+ public function init() {\r
+ parent::init();\r
+\r
+ $feeds = array('news' => 'News Feed',\r
+ 'projects' => 'Projects Feed',\r
+ 'casestudies' => 'Case Studies Feed');\r
+\r
+ foreach($feeds as $feedID => $feedTitle) {\r
+\r
+ /* TITLE */\r
+ $title = new Zend_Form_Element_Text("rss_{$feedID}_title");\r
+ $title->setLabel("$feedTitle Title");\r
+ $this->addElementLocalized($title);\r
+\r
+ /* DESCRIPTION */\r
+ $description = new Zend_Form_Element_Textarea("rss_{$feedID}_description");\r
+ $description->setAttrib('rows', 3);\r
+ $description->setLabel("$feedTitle Description");\r
+ $this->addElementLocalized($description);\r
+\r
+ /* FEED URL */\r
+ $url = new Zend_Form_Element_Text("rss_{$feedID}_url");\r
+ $url->setLabel("$feedTitle URL (used for header RSS links)");\r
+ $this->addElementLocalized($url);\r
+\r
+ }\r
+\r
+ }\r
+\r
+}
\ No newline at end of file
$followus->setLabel('Bloc Suivez-nous');
$this->addSubFormLocalized($followus, 'followus');
+ /* RSS SETTINGS */
+ $rss = new Cubedesigners_Form_CMS_Sub_RSS();
+ $rss->setLabel('RSS Settings');
+ $this->addSubFormLocalized($rss, 'rss');
+
/* COPYRIGHT */
$copyright = new Zend_Form_Element_Text('copyright');
$copyright->setLabel('Copyright du bas de page');
<?php
$fonts = array('google' => array('families' => array('Roboto+Condensed:400,300,700:latin')));
+// Locally hosted version of the fonts - this was so fonts would work for Windows Phones and IE but there were too many issues
+// The robotocondensed.css refers to a custom webfont kit from Font Squirrel. It doesn't display as well as the Google Fonts version
+// To make this display properly, we need type hinting and lots of testing and tweaking. End result: not worth it currently...
+// Reference: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
+// Note: this custom web font is also missing a character currently: "ö" for Jens' surname.
+//$fonts = array('custom' => array('families' => array('Roboto Condensed'), 'urls' => array('/css/fonts/robotocondensed.css')));
+
$this->headScript()->addWebFont($fonts);
$this->headScript()->addFastclick();
$this->headScript()->appendFile('/js/common.js');
$this->headLink()->appendStylesheet('/less/common.less', 'all');
-$this->headMeta()->setViewport('device-width', null, '1.0');
+$this->headMeta()->setViewport('device-width');
+
profile(__FILE__, __LINE__, 'Before rendering body');
$res = $this->htmlPage($this->render('common/body.phtml'));
protected $tags_secondaires;
protected $online;
protected $propulse;
- protected $annee;
- protected $_types = array('titre' => 'json', 'description' => 'json', 'url' => 'json', 'visuel' => 'json', 'visuel_detail' => 'json', 'legende' => 'json');
+ protected $annee; // Note: converted to a full date
+ protected $_types = array('titre' => 'json', 'description' => 'json', 'url' => 'json', 'visuel' => 'json', 'visuel_detail' => 'json', 'legende' => 'json', 'annee' => 'date');
public static function getSchema($schema) {
$casestudies = parent::getSchema($schema);
public function CasestudiesDetail($studie) {
- $visuel_detail = $this->view->imageProcess($studie->visuel_detail, $studie->titre, 980, 400);
+ $visuel_detail = $this->view->imageProcess($studie->visuel_detail, $studie->titre, 980, 400, array('class' => 'responsive'));
$res = '<div class="case">';
$res.='<div class="content">';
$res.='<h2>' . $studie->description . '</h2>';
$res.='</div>';
- $res .= '<div id="casestudies-detail-visuel">';
- $res .= '<div class="visuel-holder">';
+ $res .= '<div class="casestudies-detail-visuel">';
+ $res .= '<div class="visuel-holder content">';
$res .= '<div class="visuel">' . $visuel_detail . '</div>';
$res .= '<div class="legende">' . $studie->legende . '</div>';
$style = 'background-color:' . $studie->couleur;
}
- $res .= '<div id="casestudies-detail-content" style="' . $style . ';">';
+ $res .= '<div class="casestudies-detail-content" style="' . $style . ';">';
$blocs = $studie->blocs;
// fb($bloc);
$margin = '';
if ($bloc->margin != '') {
- $margin = 'margin-top:' . $bloc->margin . 'px;';
+ // Calculate margin as a percentage for responsive design
+ // Note: margin is based on max-width of images (1200px) because this is how CSS handles % margins, even for margin-top
+ $variableTopMargin = $bloc->margin / 1200 * 100;
+ $margin = 'margin-top:' . $variableTopMargin . '%;';
}
$zindex = '';
if ($bloc->selectedtype == "text") {
- $res .= '<div class="detail-text" style="' . $margin . '' . $zindex . '" >';
+ $res .= '<div class="detail-text content" style="' . $margin . '' . $zindex . '" >';
$res .= '<div class="titre">' . $bloc->titre . '</div>';
$res .= $this->markupDotclear($bloc->texte);
$res .= '</div>';
$height = -1;
CubeIT_Image::getDimensions($visuel, $width, $height);
$padding = isset($bloc->visuelpadding) ? $bloc->visuelpadding : 50;
- $res .= '<div class="detail-visuel" style="background-image:url(\'' . $visuel . '\');height:' . $height . 'px;' . $margin . '' . $zindex . ';padding-bottom:' . $padding . 'px;"></div>';
- }
+
+ // Convert padding into a relative measure (%) for responsive images
+ $padding = $padding / 1200 * 100;
+
+ //$res .= '<div class="detail-visuel" style="background-image:url(\'' . $visuel . '\');height:' . $height . 'px;' . $margin . '' . $zindex . ';padding-bottom:' . $padding . 'px;"></div>';
+ $res .= '<div class="detail-visuel">';
+ $res .= $this->view->image($visuel, $studie->titre, $width, $height, array('class' => 'responsive', 'style' => "padding-bottom: {$padding}%; $margin"));
+ $res .= '</div>';
+ }
$addVideoBackground = false;
\r
public function contactInfos($texte, $bureaux) {\r
\r
- $res = '<div class="contact-texte">' . $this->view->markupDotclear($texte) . '</div>';\r
+ $res = '<div class="content"><div class="contact-texte">' . $this->view->markupDotclear($texte) . '</div></div>';\r
+\r
+ //$res.= '<div class="twocols"><div class="cols">';\r
\r
//$bureaux = $contact['bureaux'];\r
\r
foreach ($bureaux as $id => $bureau) {\r
\r
- $res.='<div class="col" itemscope itemtype="http://schema.org/LocalBusiness">';\r
+ $res.='<div class="half-full" itemscope itemtype="http://schema.org/LocalBusiness">';\r
+ $res.='<div class="inner">';\r
\r
$res.='<p class="titre" itemprop="name">' . $bureau['coordonnees']['nom'] . '<p>';\r
\r
$res.='<p>' . __('Cubedesigners') . '</p>';\r
$res.='<p itemprop="streetAddress">' . $bureau['coordonnees']['adresse'] . '</p>';\r
$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>';\r
+\r
+ // Alternative link that is displayed when there isn't enough space for the maps\r
+ $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'));\r
$res.='</div>';\r
\r
$res.='<div class="numeros">';\r
$res.='<p itemprop="faxNumber">' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '</p>';\r
$res.='</div>';\r
\r
+ $res.='</div>'; // .inner\r
+\r
+ // Map holder\r
+ $res.='<div id="map' . $id . '" data-id="' . $id . '" class="googleMap"></div>';\r
+\r
/* $res.='<div class="geoloc">';\r
$res.=$this->view->linkGeo(__("Plan d'accès"), $bureau['adresse']['adresse'] . ',' . $bureau['adresse']['ville'] . ',' . Zend_Locale::getTranslation($bureau['adresse']['pays'], 'territory'));\r
$res.='</div>'; */\r
\r
- $res.='</div>';\r
+ $res.='</div>'; // .half-full\r
}\r
\r
+ //$res.= '</div></div>';\r
+\r
return $res;\r
}\r
\r
<?php
+// Add RSS alternate links
+$rss = CubeIT_Util_Cms::unserialize(Bootstrap::getInstance()->getOpt('rss'));
+$feeds = array('news', 'projects', 'casestudies');
+foreach($feeds as $feed) {
+ $this->headLink()->appendAlternate($rss['rss_'.$feed.'_url'], 'application/rss+xml', $rss['rss_'.$feed.'_title']);
+}
+
$content = $this->layout()->content . "\n";
echo '<div id="wrapper">';
echo $this->render('common/footer.phtml');
echo '</div>';
+//echo '<div id="viewport"></div>';
}
/* NAVIGATION */
$mainMenu = $this->navigation()->findOneById($this->localeDefault() . '/' . CubeIT_Navigation::MAIN);
- echo '<a href="#menu" class="menu-link">☰</a>';
+// echo '<a href="#menu" class="menu-link">☰</a>';
+ echo '<div class="nav-icon"><div></div></div>';
echo '<nav id="menu" role="navigation">';
echo $this->navigation()->menu()->renderMenu($mainMenu, array('maxDepth' => 0)) . "\n";
echo '</nav>';
echo $this->CasestudiesDetail($this->studie);
?>
-<div class="title content margin"><?php echo $this->markupDotclear($this->casestudies_titre); ?></div>
+<div class="title content"><?php echo $this->markupDotclear($this->casestudies_titre); ?></div>
-<div id="casestudies-list" class="related">
+<div class="casestudies-list related content">
<?php echo $this->CasestudiesList($this->datas, $this->studie); ?>
</div>
\ No newline at end of file
?>
</div>
- <div id="casestudies-list">
+ <div id="casestudies-list" class="casestudies-list grid">
<?php
$datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);
echo $this->CasestudiesList($datas);
$this->headScript()->addScriptAndStyle('contact');
$bureaux = $this->option('contact')['bureaux'];
-$i = 1;
+$i = 0;
foreach ($bureaux as $bureau) {
- $this->headScriptVariables()->setVariable('map' . $i, $bureaux[$i - 1]['map']);
- $this->headScriptVariables()->setVariable('coordonnees' . $i, $bureaux[$i - 1]['coordonnees']);
- $this->headScriptVariables()->setVariable('markers' . $i, $bureaux[$i - 1]['markers']);
+ $this->headScriptVariables()->setVariable('map' . $i, $bureaux[$i]['map']);
+ $this->headScriptVariables()->setVariable('coordonnees' . $i, $bureaux[$i]['coordonnees']);
+ $this->headScriptVariables()->setVariable('markers' . $i, $bureaux[$i]['markers']);
$i++;
}
?>
-<div id="contact-title"><?php echo $this->markupDotclear($this->titre); ?></div>
+<div class="contact-title content"><?php echo $this->markupDotclear($this->titre); ?></div>
-<div id="contact-informations">
- <?php echo $this->contactInfos($this->option('contact')['bloc'], $bureaux); ?>
-</div>
-
-<div id="contact-maps">
- <?php
- $j = 1;
- foreach ($bureaux as $bureau) {
- echo '<div id="map' . $j . '"></div>';
- $j++;
- }
- ?>
+<div class="contact-informations">
+ <?php echo $this->contactInfos($this->option('contact')['bloc'], $bureaux); ?>
</div>
<?php
$this->headScript()->addScriptAndStyle('expertises');
echo $this->twocols();
-echo $this->htmlElement(nl2br($this->citation), 'blockquote', array('class' => 'citation'));
+echo $this->htmlElement($this->citation, 'blockquote', array('class' => 'citation content'));
echo $this->liste($this->expertises, true, array('id' => 'expertises'), 1);
resize();
$(window).on('orientationchange', orientationchange);
+ $(screen).on('orientationchange', orientationchange);
orientationchange();
var $menu = $('#menu'),
- $menulink = $('.menu-link');
+ $menulink = $('.nav-icon');
$menulink.click(function() {
$menulink.toggleClass('active');
return false;
});
+ // Fallback to display content in case web fonts haven't triggered the display yet
+ setTimeout(function() {
+ $('html').addClass('wf-active');
+ }, 4000);
+
}
function resize() {
function orientationchange() {
+ //if( $("[name='viewport']").length==0){
+ // $("head").append('<meta name="viewport" content="" />');
+ //}
+
if(Modernizr.mq('screen and (max-device-width: 530px)')) {
- //alert('mobile');
- $("[name='viewport']").attr("content", "width=530, initial-scale=1.0");
+ $("[name='viewport']").attr("content", "width=530");
} else {
$("[name='viewport']").attr("content", "width=device-width, initial-scale=1.0");
}
+
}
\ No newline at end of file
function initMaps() {
- var mapSettings = Application.map1;
- var centre = mapSettings.centre;
- var coder = new google.maps.Geocoder();
- coder.geocode({
- address: centre.adresse + ' - ' + centre.ville,
- region: centre.pays
- }, function(res) {
- var result = res[0];
- var center = result.geometry.location;
-
- var mapOptions = {
- zoom: parseInt(mapSettings.zoom),
- center: center,
- mapTypeControlOptions: {
- mapTypeIds: [google.maps.MapTypeId.ROADMAP]
- },
- styles: mapStyles,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var map = new google.maps.Map(document.getElementById('map1'),
- mapOptions);
-
- Application.markers1.unshift(Application.coordonnees1);
-
- for (var i = 0; i < Application.markers1.length; i++) {
- m = Application.markers1[i];
-
- addMarker(m, map);
- }
- });
-
-
- var mapSettings2 = Application.map2;
- var centre2 = mapSettings2.centre;
- var coder2 = new google.maps.Geocoder();
- coder2.geocode({
- address: centre2.adresse + ' - ' + centre2.ville,
- region: centre2.pays
- }, function(res) {
- var result = res[0];
- var center = result.geometry.location;
-
- var mapOptions = {
- zoom: parseInt(mapSettings2.zoom),
- center: center,
- mapTypeControlOptions: {
- mapTypeIds: [google.maps.MapTypeId.ROADMAP]
- },
- styles: mapStyles,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
-
- var map = new google.maps.Map(document.getElementById('map2'),
- mapOptions);
-
- Application.markers2.unshift(Application.coordonnees2);
-
- for (var i = 0; i < Application.markers2.length; i++) {
- m = Application.markers2[i];
-
- addMarker(m, map);
- }
- });
+ // Set up all maps identified by the class "googleMap"
+ $('.googleMap').each(function(){
+
+ var mapID = $(this).data('id'); // Get the ID of the map (matches the Application settings)
+ //fb(mapID);
+ var mapName = 'map' + mapID; // Map name, eg. map1
+ var markerName = 'marker' + mapID; // Marker name, eg. marker1
+ var coordonneesName = 'coordonnees' + mapID; // Coordonnees name, eg. coordonnees1
+
+ var mapSettings = Application[mapName];
+ var centre = mapSettings.centre;
+ var coder = new google.maps.Geocoder();
+ coder.geocode({
+ address: centre.adresse + ' - ' + centre.ville,
+ region: centre.pays
+ }, function(res) {
+ var result = res[0];
+ var center = result.geometry.location;
+
+ var mapOptions = {
+ scrollwheel: false,
+ zoom: parseInt(mapSettings.zoom),
+ center: center,
+ mapTypeControlOptions: {
+ mapTypeIds: [google.maps.MapTypeId.ROADMAP]
+ },
+ styles: mapStyles,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+
+ var map = new google.maps.Map(document.getElementById(mapName), mapOptions);
+
+ // Removed the below loop - it isn't needed if only one marker is placed per office / map
+ //var markers = Application[markerName];
+ //if(markers === undefined) { markers = new Array; }
+ //markers.unshift(Application[coordonneesName]);
+ //
+ //for (var i = 0; i < markers.length; i++) {
+ // m = markers[i];
+ // addMarker(m, map);
+ //}
+
+ addMarker(Application[coordonneesName], map); // Only ever one marker per map so replacing the loop above
+
+ });
+ });
}
google.maps.event.addDomListener(window, 'load', initMaps);
init: function (initFilter) {
var $this = this;
- // Run filter based on any previous settings
- $this.filter(initFilter);
+ // Clear filter first...
+ $this.filter('none'); // Dummy value so nothing is selected
// Set up Isotope
this.container.isotope({
// }
});
+ // Show the container now Isotope is active
+ this.container.css('display', 'block');
+
+ // Now run filter based on any previous settings
+ $this.filter(initFilter);
+
// Reveal all items after init for onload animation
// https://github.com/metafizzy/isotope/issues/733#issuecomment-52868221
//var iso = this.container.data('isotope');
min-width: 480px;
padding-right: 25px;
margin: 25px 0;
+
+ @media screen and (max-width: 1048px) {
+ width: 100%;
+ }
}
// .bloc-holder .sousbloc .texte {
-.title.margin{
- margin-bottom: 40px;
-}
+//.title.margin{
+// margin-bottom: 40px;
+//}
+
-#casestudies-list {
+.casestudies-list {
//min-width: 980px;
- max-width: 980px;
- margin: 0 auto;
- padding: 0 0 50px 0;
+ //max-width: 980px;
+ //margin: 0 auto;
+ padding-bottom: 50px;
overflow: hidden;
+ // Settings specific to the isotope grid
+ &.grid {
+ display: none; // Hidden until Isotope is ready
+
+ img {
+ margin-top: 0;
+ }
+ }
+
a {
display:inline-block;
margin:0;
//height:auto;
display: block;
background-color: #ccc;
- margin:0 0 10px 0;
+ margin-top: 13.333333%; // 40/300 - 40px margin at full size
+ margin-bottom: 10px;
+ max-width: 100%;
+ height: auto;
}
h2,h3{
white-space: nowrap;
// Styling for related case studies at the bottom of the case study detail page
&.related a {
- margin-right: 40px;
+ margin-right: 3.5%; // 2 gutters
+ width: 31%; // 3 cols
&:last-of-type{
margin-right: 0;
}
+
+ h2 {
+ @media screen and (max-width: 1048px){
+ font-size: 28px;
+ }
+
+ @media screen and (max-width: 890px){
+ font-size: 24px;
+ }
+
+ @media screen and (max-width: 780px){
+ font-size: 20px;
+ }
+ }
}
.blocmargin {
margin-right:40px;
}
- .spacer {
- clear: left;
- height:20px;
- }
+// .spacer {
+// clear: left;
+// height:20px;
+// }
}
-#casestudies-detail-content {
+.casestudies-detail-content {
background-color: #3885E0;
}
\ No newline at end of file
}
/* Case studies detail visuel */
- #casestudies-detail-visuel {
+ .casestudies-detail-visuel {
padding-bottom:50px;
+ overflow: hidden;
a {
background-color: #3885e0;
}
.visuel-holder {
- min-width: 980px;
- max-width: 980px;
- width:100%;
- margin: 0 auto;
- overflow:hidden;
+// min-width: 980px;
+// max-width: 980px;
+// width:100%;
+// margin: 0 auto;
+// overflow:hidden;
}
.visuel-holder .visuel {
- width:980px;
- height:400px;
+// width:980px;
+// height:400px;
padding-bottom: 20px;
}
- #casestudies-detail-content {
+ .casestudies-detail-content {
text-align: center;
background-color: #0194d5;
padding: 50px 0 0px 0;
-
.detail-text {
color: #fff;
- width:640px;
+ max-width:708px; // 640 + 34*2
margin:auto;
position: relative;
z-index: 10;
}
.detail-visuel {
- padding: 0px 0 50px 0;
- z-index: 1;
+// padding: 0px 0 50px 0;
+// z-index: 1;
+ padding-left: 34px;
+ padding-right: 34px;
+ max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images
+ margin: 0 auto;
+
+ img {
+ min-width: 462px; // 530 - 34*2
+ display: block; // Stops strange gap under image when right at the bottom
+ }
}
.detail-video-background {
box-sizing: inherit;
}
+img.responsive {
+ max-width: 100%;
+ height: auto;
+}
.content,.cubeit-content{
- max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side
- margin:0 auto;
- padding: 0 34px;
- position:relative;
+ max-width: 1048px; // = 980+(34*2) - Allow room for the 34px padding on each side
+ min-width: 530px; // Be careful of this setting and affecting the viewport initial-scale
+ margin:0 auto;
+ padding-right: 34px;
+ padding-left: 34px;
+ position:relative;
+
// @media screen and (max-width: 980 + (34*2)px) {
// padding: 0;
a.but {
display: inline-block;
color:#fff;
+ background-color: #2874ce;
clear:both;
border-radius: 2px;
padding: 10px 15px 12px;
.main-holder {
width:100%;
- padding: 0px 20px 50px 20px;
+ padding: 0 20px 50px 20px;
}
ul{
list-style:none;
.title {
margin: 0 auto;
- padding: 40px 0 0 0;
+ padding-top: 40px;
h1 {
text-align: left;
font-size: 56px;
.dotclear{
h3,h4{
- font-weight: 500;
+ font-weight: 400;
}
p{
line-height: 1.56em;
/* Contact Title */
-#contact-title {
- min-width: 980px;
- max-width: 980px;
- margin: 0 auto;
- padding: 50px 0 50px 0;
+.contact-title {
+// min-width: 980px;
+// max-width: 980px;
+// margin: 0 auto;
+ padding-top: 50px;
+ padding-bottom: 50px;
+
+ h1 {
+ text-align: left;
+ font-weight: 300;
+ font-size: 56px;
+ }
}
-#contact-title h1 {
- text-align: left;
- font-weight: 300;
- font-size: 56px;
+.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 {
+ 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 .contact-texte {
+.contact-informations {
+
+ padding-bottom: 50px;
+ overflow: hidden;
+
+ .contact-texte {
background-image: url('../images/picto_footer_mail.svg');
- background-repeat: no-repeat;
- background-position:0px 10px;
+ background-repeat: no-repeat;
+ background-position: 0px 10px;
font-weight: 300;
- padding-left:60px;
+ padding-left: 60px;
padding-bottom: 50px;
-}
+ }
-#contact-informations .col .titre {
+ .titre {
padding-bottom: 20px;
font-size: 32px;
-}
+ }
-#contact-informations .col .adresse {
+ .adresse {
background-image: url('../images/picto_geoloc.svg');
- background-repeat: no-repeat;
- background-position:0px 0px;
- padding-left:60px;
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ padding-left: 60px;
padding-bottom: 50px;
-}
+ }
-#contact-informations .col .numeros {
+ .numeros {
background-image: url('../images/picto_tel.svg');
- background-repeat: no-repeat;
- background-position:0px 0px;
- padding-left:60px;
+ background-repeat: no-repeat;
+ background-position: 0px 0px;
+ padding-left: 60px;
padding-bottom: 50px;
+ }
}
-/* Contact maps */
-#contact-maps {
- overflow:hidden;
- padding: 0 0 50px 0;
-}
+/* Google Maps */
-#map1 {
- width: 47.5%;
- float:left;
- height: 390px;
-}
-#map2 {
- width: 50.5%;
- float:right;
- height: 390px;
-}
+.googleMap {
+ height: 390px;
+ clear: both;
-/* Contact description */
-#contact-informations,
-#contact-description {
- min-width: 980px;
- max-width: 980px;
- margin: 0 auto;
- overflow: hidden;
- padding: 0 0 50px 0;
+ // To make the map semi-responsive:
+ //padding-bottom: 37.3%; // Sets height relative to width
+ //min-height: 300px; // Stops it getting too short
}
-.col {
- float:left;
- margin-right: 20px;
- width: 47%;
+// By default, hide the mobile map link button
+.but.mobile {
+ display: none;
}
-.col .dotclear {
- width:95%;
+@media screen and (max-height: 530px), screen and (max-width: 530px) {
+
+ .half-full:last-child {
+ padding-top: 0;
+
+ .numeros {
+ padding-bottom: 5px;
+ }
+ }
+
+ .but.mobile {
+ display: inline-block;
+ }
+
+ // Hide the maps for mobile
+ .googleMap {
+ display: none;
+ }
+
}
\ No newline at end of file
}
////////////////////////
-// @TODO tidy this up...
+// @TODO tidy this up... and remove old .menu-link classes
-a.menu-link {
- display: none;
- &:hover {
- color: #84ae1e;
- }
+.nav-icon {
+ display: none;
}
+
+
+///////
+
+//a.menu-link {
+// display: none;
+//
+// &:hover {
+// color: #84ae1e;
+// }
+//}
+
.js nav[role=navigation] {
max-height: none;
}
@media screen and (max-width: 890px) {
+ // Nav-icon from: http://w3bits.com/animated-menu-icon-css/
+ .nav-icon {
+ //margin: 1em;
+ width: 34px;
+ position: absolute;
+ top: 3px;
+ right: 0;
+ padding: 2em 34px; // 34px is to push it away from the right margin and keep aligned with right edge
+ box-sizing: content-box;
+ display: inline-block;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .nav-icon:after,
+ .nav-icon:before,
+ .nav-icon div {
+ background-color: #3885e0;
+ border-radius: 3px;
+ content: '';
+ display: block;
+ height: 4px;
+ margin: 6px 0;
+ transition: all .3s ease-in-out;
+ }
+
+ .nav-icon.active:after,
+ .nav-icon.active:before,
+ .nav-icon.active div {
+ background-color: #fff;
+ }
+ .nav-icon.active {
+ opacity: 0.7;
+ }
+
+
+ // Nav icon animation
+ .nav-icon.active:before {
+ transform: translateY(10px) rotate(135deg);
+ }
+
+ .nav-icon.active:after {
+ transform: translateY(-10px) rotate(-135deg);
+ }
+
+ .nav-icon.active div {
+ transform: scale(0);
+ transition: all .15s ease-in-out;
+ }
+
+
+
+////////
+
#header.content {
padding: 0;
}
//margin: 0 -20px; // To offset the 20px margin from .content
}
- a.menu-link {
- position: absolute;
- top: 0;
- right: 5%;
- padding: 0.5em;
-// background: #3885e0;
-// border-radius: 2px;
- font: bold 36px sans-serif;
- color: #3885e0;
- text-transform: uppercase;
- display: inline-block;
- }
+// a.menu-link {
+// position: absolute;
+// top: 0;
+// right: 0;
+// padding: 0.5em 34px 0.5em 0.5em; // 34px is to push it away from the right margin and keep aligned with right edge
+//// background: #3885e0;
+//// border-radius: 2px;
+// font: bold 36px sans-serif;
+// color: #3885e0;
+// text-transform: uppercase;
+// display: inline-block;
+// }
nav[role=navigation] {
clear: both;
transition: all 0.3s ease-out;
margin: 0 auto;
padding: 0 0 50px 0;
+ display: none; // Hidden initially until Isotope activates
+
a,a:hover {
color:#000;
display:inline-block;
projects / cubedesigners-v7.git / commitdiff