From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 16 Jan 2015 14:35:36 +0000 (+0000)
Subject: (no commit message)
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4c68b8e5e00eab5a82759f03816bd4f5cbbe011a;p=cubedesigners-v7.git

---

diff --git a/.htaccess b/.htaccess
index 7ee4bae..88807f0 100644
--- a/.htaccess
+++ b/.htaccess
@@ -57,7 +57,8 @@
 	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
 
@@ -71,7 +72,7 @@
 # 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
diff --git a/framework/application/Bootstrap.php b/framework/application/Bootstrap.php
index 12e848d..854d1e1 100644
--- a/framework/application/Bootstrap.php
+++ b/framework/application/Bootstrap.php
@@ -11,6 +11,7 @@ class Bootstrap extends CubeIT_Bootstrap {
 
 	protected function _initRouter($initCms = true) {
 		$router = parent::_initRouter($initCms);
+        $router->addStandardRoute('rss');
 		return $router;
 	}
 
diff --git a/framework/application/controllers/RssController.php b/framework/application/controllers/RssController.php
new file mode 100644
index 0000000..ab24de1
--- /dev/null
+++ b/framework/application/controllers/RssController.php
@@ -0,0 +1,189 @@
+<?php
+
+
+
+class RssController extends CubeIT_Controller_LayoutlessController{
+
+    protected $_queryLimit = 10; // Number of entries to return by default. Set to NULL for no limit.
+
+
+    public function indexAction()  {
+
+    }
+
+    public function newsAction() {
+
+        // Set up the feed with values from the CMS
+        $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));
+        $feed = $this->_initFeed($rss['rss_news_title'], $rss['rss_news_description']);
+
+        $news=CubeIT_Util_Cms::unserialize($this->getOpt('actus'));
+
+//        echo '<pre>'; print_r($news); exit;
+
+        foreach($news['actualites'] as $n) {
+
+            $link = null;
+
+            // Handle links - can be either an external URL or an internal page link. Internal has priority.
+            if(!empty($n['link']['url']) || !empty($n['link']['page'])) {
+                $link = !empty($n['link']['page']) ? CubeIT_View_Helper_Link::internal($n['link']['page']) : $n['link']['url'];
+
+                // Make sure that link is properly formed (mainly for the external URL)
+                if(!Zend_Uri::check($link)) {
+                    $link = 'http://'.$link;
+                }
+            }
+
+            $e = $feed->createEntry();
+
+            $e->setTitle($n['texte']);
+            $e->setDateCreated(strtotime($n['date']));
+            $e->setId($n['date']);
+            if($link) { $e->setLink($link); }
+
+            $feed->addEntry($e);
+
+        }
+
+        echo $feed->export('rss');
+    }
+
+    public function projectsAction() {
+
+        $realisations = Cubedesigners_Model_Realisation::factory()->where('online = ?', 1)
+                                                                  ->order('date DESC')
+                                                                  ->limit($this->_queryLimit)
+                                                                  ->find();
+
+        // Set up the feed with values from the CMS
+        $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));
+        $feed = $this->_initFeed($rss['rss_projects_title'], $rss['rss_projects_description']);
+
+        foreach($realisations as $r){
+
+            //fb($r);
+
+            // Prepare feed data
+            $title = CubeIT_Util_Cms::unserialize($r->getTitre());
+            $description = CubeIT_Util_Cms::unserialize($r->getDescription());
+            $date = $r->getDate();
+            $enclosure = $this->_enclosureDetails(CubeIT_Util_Cms::unserialize($r->getVisuel()));
+
+            // Get the link using the navigation class. "3" is the ID of the realisations / portfolio page
+            $link = CubeIT_View_Helper_Link::internal('3/' . $r->getId());
+
+            $e = $feed->createEntry();
+
+            $e->setTitle($title);
+            //$e->setId($url);
+            $e->setLink($link);
+            $e->setDateCreated($date);
+            if(!empty($description)) { $e->setDescription($description); }
+            if($enclosure) { $e->setEnclosure($enclosure); }
+
+            $feed->addEntry($e);
+
+            // Note: unserialize() automatically returns data for the current locale if it can. A different locale can be specified too.
+            //fb(CubeIT_Util_Cms::unserialize($r->getTitre())); // using magic functions for accessing data from model ->getnameCamelCased();
+
+        }
+
+        echo $feed->export('rss');
+
+    }
+
+    public function casestudiesAction() {
+
+        $studies = Cubedesigners_Model_Casestudy::factory()->where('online = ?', 1)
+                                                           ->order('annee DESC')
+                                                           ->limit($this->_queryLimit)
+                                                           ->find();
+
+        //fb($studies);
+
+        // Set up the feed with values from the CMS
+        $rss = CubeIT_Util_Cms::unserialize($this->getOpt('rss'));
+        $feed = $this->_initFeed($rss['rss_casestudies_title'], $rss['rss_casestudies_description']);
+
+        foreach($studies as $s) {
+
+            // Prepare feed data
+            $title = CubeIT_Util_Cms::unserialize($s->getTitre());
+            $description = CubeIT_Util_Cms::unserialize($s->getDescription());
+            $enclosure = $this->_enclosureDetails(CubeIT_Util_Cms::unserialize($s->getVisuel()));
+            $date = $s->getAnnee();
+
+            // Get the link using the navigation class. "4" is the ID of the case studies page
+            $link = CubeIT_View_Helper_Link::internal('4/' . $s->getId());
+
+            $e = $feed->createEntry();
+
+            $e->setTitle($title);
+            if(!empty($description)) { $e->setDescription($description); }
+            //$e->setId($url);
+            $e->setLink($link);
+            if($enclosure) { $e->setEnclosure($enclosure); }
+            $e->setDateCreated($date);
+
+            $feed->addEntry($e);
+
+        }
+
+        echo $feed->export('rss');
+
+    }
+
+
+    /**
+     * Set up common feed options
+     * @param string $title
+     * @return Zend_Feed_Writer_Feed
+     * @throws Zend_Feed_Exception
+     */
+    protected function _initFeed($title = 'Cubedesigners News', $description = 'The latest updates from Cubedesigners') {
+
+        $feed = new Zend_Feed_Writer_Feed;
+
+        $feed->setTitle($title);
+        $feed->setLink('http://'.$this->getOpt('webhost').'/');
+        $feed->setGenerator(array('name' => 'cubeRSS'));
+        $feed->setDescription($description);
+
+        return $feed;
+
+    }
+
+    /**
+     * Get details for attached imagery on feed items
+     * @param array $images
+     * @return array
+     */
+    protected function _enclosureDetails($images) {
+
+        if(is_array($images)) {
+
+            $baseURL = 'http://' . $this->getOpt('webhost');
+
+            $imageURI = CubeIT_View_Helper_ImageCms::getPath($images[0]); // Just get the first image, even if there are more
+            $imagePath = $_SERVER['DOCUMENT_ROOT'] . $imageURI;
+
+            // Find the MIME type of the file
+            $finfo = finfo_open(FILEINFO_MIME_TYPE);
+            $type = finfo_file($finfo, $imagePath);
+
+            $filesize = filesize($imagePath);
+
+            $image['uri'] = $baseURL . $imageURI;
+            $image['type'] = $type;
+            $image['length'] = $filesize;
+
+            return $image;
+
+        }
+
+        return false;
+
+    }
+
+}
\ No newline at end of file
diff --git a/framework/application/forms/CMS/Sub/Casestudies/Studies.php b/framework/application/forms/CMS/Sub/Casestudies/Studies.php
index 044a5f0..a23c4f0 100644
--- a/framework/application/forms/CMS/Sub/Casestudies/Studies.php
+++ b/framework/application/forms/CMS/Sub/Casestudies/Studies.php
@@ -18,7 +18,8 @@ class Cubedesigners_Form_CMS_Sub_Casestudies_Studies extends CubeIT_Form_List {
 		$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);
 
diff --git a/framework/application/forms/CMS/Sub/RSS.php b/framework/application/forms/CMS/Sub/RSS.php
new file mode 100644
index 0000000..e5f8767
--- /dev/null
+++ b/framework/application/forms/CMS/Sub/RSS.php
@@ -0,0 +1,35 @@
+<?php
+
+
+class Cubedesigners_Form_CMS_Sub_RSS extends CubeIT_Form_SubForm {
+
+    public function init() {
+        parent::init();
+
+        $feeds = array('news' => 'News Feed',
+                       'projects' => 'Projects Feed',
+                       'casestudies' => 'Case Studies Feed');
+
+        foreach($feeds as $feedID => $feedTitle) {
+
+            /* TITLE */
+            $title = new Zend_Form_Element_Text("rss_{$feedID}_title");
+            $title->setLabel("$feedTitle Title");
+            $this->addElementLocalized($title);
+
+            /* DESCRIPTION */
+            $description = new Zend_Form_Element_Textarea("rss_{$feedID}_description");
+            $description->setAttrib('rows', 3);
+            $description->setLabel("$feedTitle Description");
+            $this->addElementLocalized($description);
+
+            /* FEED URL */
+            $url = new Zend_Form_Element_Text("rss_{$feedID}_url");
+            $url->setLabel("$feedTitle URL (used for header RSS links)");
+            $this->addElementLocalized($url);
+
+        }
+
+    }
+
+}
\ No newline at end of file
diff --git a/framework/application/forms/Settings.php b/framework/application/forms/Settings.php
index 585dbfd..60bc68b 100644
--- a/framework/application/forms/Settings.php
+++ b/framework/application/forms/Settings.php
@@ -50,6 +50,11 @@ class Cubedesigners_Form_Settings extends CubeIT_Form_Settings {
 		$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');
diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml
index 5e3b97c..d9e058e 100644
--- a/framework/application/layouts/scripts/layout.phtml
+++ b/framework/application/layouts/scripts/layout.phtml
@@ -1,6 +1,13 @@
 <?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();
 
@@ -11,7 +18,8 @@ $this->headScript()->addIEConditionnals();
 $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'));
diff --git a/framework/application/models/Casestudy.php b/framework/application/models/Casestudy.php
index 1ecdded..8e58b9b 100644
--- a/framework/application/models/Casestudy.php
+++ b/framework/application/models/Casestudy.php
@@ -17,8 +17,8 @@ class Cubedesigners_Model_Casestudy extends CubeIT_Model_Data_Table {
 	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);
diff --git a/framework/application/views/helpers/CasestudiesDetail.php b/framework/application/views/helpers/CasestudiesDetail.php
index dcd517d..d478ddd 100644
--- a/framework/application/views/helpers/CasestudiesDetail.php
+++ b/framework/application/views/helpers/CasestudiesDetail.php
@@ -4,7 +4,7 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 
 	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">';
@@ -12,8 +12,8 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 		$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>';
@@ -30,7 +30,7 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 			$style = 'background-color:' . $studie->couleur;
 		}
 
-		$res .= '<div id="casestudies-detail-content" style="' . $style . ';">';
+		$res .= '<div class="casestudies-detail-content" style="' . $style . ';">';
 
 		$blocs = $studie->blocs;
 
@@ -39,7 +39,10 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 			// 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 = '';
@@ -49,7 +52,7 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 
 			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>';
@@ -61,8 +64,15 @@ class Cubedesigners_View_Helper_CasestudiesDetail extends CubeIT_View_Helper_Abs
 				$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;
diff --git a/framework/application/views/helpers/ContactInfos.php b/framework/application/views/helpers/ContactInfos.php
index bda016e..3e9b09b 100644
--- a/framework/application/views/helpers/ContactInfos.php
+++ b/framework/application/views/helpers/ContactInfos.php
@@ -4,13 +4,16 @@ class Cubedesigners_View_Helper_ContactInfos extends Zend_View_Helper_Abstract {
 
     public function contactInfos($texte, $bureaux) {
 
-        $res = '<div class="contact-texte">' . $this->view->markupDotclear($texte) . '</div>';
+        $res = '<div class="content"><div class="contact-texte">' . $this->view->markupDotclear($texte) . '</div></div>';
+
+        //$res.= '<div class="twocols"><div class="cols">';
 
         //$bureaux = $contact['bureaux'];
 
         foreach ($bureaux as $id => $bureau) {
 
-            $res.='<div class="col"  itemscope itemtype="http://schema.org/LocalBusiness">';
+            $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>';
 
@@ -18,6 +21,9 @@ class Cubedesigners_View_Helper_ContactInfos extends Zend_View_Helper_Abstract {
             $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">';
@@ -25,13 +31,20 @@ class Cubedesigners_View_Helper_ContactInfos extends Zend_View_Helper_Abstract {
             $res.='<p itemprop="faxNumber">' . __('Fax') . ' ' . $bureau['coordonnees']['fax'] . '</p>';
             $res.='</div>';
 
+            $res.='</div>'; // .inner
+
+            // 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>';
+            $res.='</div>'; // .half-full
         }
 
+        //$res.= '</div></div>';
+
         return $res;
     }
 
diff --git a/framework/application/views/scripts/common/content.phtml b/framework/application/views/scripts/common/content.phtml
index 1ff9686..4388df7 100644
--- a/framework/application/views/scripts/common/content.phtml
+++ b/framework/application/views/scripts/common/content.phtml
@@ -1,5 +1,12 @@
 <?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">';
@@ -14,3 +21,4 @@ echo '</main>';
 
 echo $this->render('common/footer.phtml');
 echo '</div>';
+//echo '<div id="viewport"></div>';
diff --git a/framework/application/views/scripts/common/header.phtml b/framework/application/views/scripts/common/header.phtml
index eb348f1..3f2698a 100644
--- a/framework/application/views/scripts/common/header.phtml
+++ b/framework/application/views/scripts/common/header.phtml
@@ -19,7 +19,8 @@ if (!is_null($homepage)) {
 		}
 		/* NAVIGATION */
 		$mainMenu = $this->navigation()->findOneById($this->localeDefault() . '/' . CubeIT_Navigation::MAIN);
-		echo '<a href="#menu" class="menu-link">&#9776;</a>';
+//		echo '<a href="#menu" class="menu-link">&#9776;</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>';
diff --git a/framework/application/views/scripts/studies/index.phtml b/framework/application/views/scripts/studies/index.phtml
index 1eff9a4..911d40d 100644
--- a/framework/application/views/scripts/studies/index.phtml
+++ b/framework/application/views/scripts/studies/index.phtml
@@ -7,8 +7,8 @@ $this->headScript()->addScriptAndStyle('casestudies_detail');
 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
diff --git a/framework/application/views/scripts/templates/casestudies.phtml b/framework/application/views/scripts/templates/casestudies.phtml
index 35611e5..375f9bf 100644
--- a/framework/application/views/scripts/templates/casestudies.phtml
+++ b/framework/application/views/scripts/templates/casestudies.phtml
@@ -11,7 +11,7 @@ $this->headScript()->addScriptAndStyle('casestudies');
 		?>
 	</div>
 
-	<div id="casestudies-list">
+	<div id="casestudies-list" class="casestudies-list grid">
 		<?php
 		$datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);
 		echo $this->CasestudiesList($datas);
diff --git a/framework/application/views/scripts/templates/contact.phtml b/framework/application/views/scripts/templates/contact.phtml
index 863d746..8e55d97 100644
--- a/framework/application/views/scripts/templates/contact.phtml
+++ b/framework/application/views/scripts/templates/contact.phtml
@@ -3,29 +3,19 @@ $this->headScript()->addGoogleMaps(array('key' => $this->options['googleapi']));
 $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
diff --git a/framework/application/views/scripts/templates/expertise.phtml b/framework/application/views/scripts/templates/expertise.phtml
index 5ed48f1..7f19282 100644
--- a/framework/application/views/scripts/templates/expertise.phtml
+++ b/framework/application/views/scripts/templates/expertise.phtml
@@ -2,5 +2,5 @@
 
 $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);
diff --git a/js/common.js b/js/common.js
index 7ab2b20..37fb3f0 100644
--- a/js/common.js
+++ b/js/common.js
@@ -5,10 +5,11 @@ function load_commons() {
 	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');
@@ -17,6 +18,11 @@ function load_commons() {
         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() {
@@ -34,10 +40,14 @@ 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
diff --git a/js/contact.js b/js/contact.js
index a3998c0..6983dc9 100644
--- a/js/contact.js
+++ b/js/contact.js
@@ -39,70 +39,52 @@ var mapStyles =
 
 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);
diff --git a/js/taglist.js b/js/taglist.js
index 6b9bb98..04b8aa9 100644
--- a/js/taglist.js
+++ b/js/taglist.js
@@ -29,8 +29,8 @@
 		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({
@@ -55,6 +55,12 @@
 				//		}
 			});
 
+            // 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');
diff --git a/less/agence.less b/less/agence.less
index 0a4138f..bffc8ab 100644
--- a/less/agence.less
+++ b/less/agence.less
@@ -130,6 +130,10 @@
         min-width: 480px;
         padding-right: 25px;
         margin: 25px 0;
+
+        @media screen and (max-width: 1048px) {
+          width: 100%;
+        }
     }
 
 //    .bloc-holder .sousbloc .texte {
diff --git a/less/casestudies.less b/less/casestudies.less
index 47e11c1..85b76eb 100644
--- a/less/casestudies.less
+++ b/less/casestudies.less
@@ -1,14 +1,24 @@
-.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;
@@ -17,7 +27,10 @@
 			//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;
@@ -42,22 +55,37 @@
 
 	// 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
diff --git a/less/casestudies_detail.less b/less/casestudies_detail.less
index 4500320..acbc849 100644
--- a/less/casestudies_detail.less
+++ b/less/casestudies_detail.less
@@ -8,8 +8,9 @@
 	}
 
 	/* Case studies detail visuel */
-	#casestudies-detail-visuel {
+	.casestudies-detail-visuel {
 		padding-bottom:50px;
+        overflow: hidden;
 
 		a {
 			background-color: #3885e0;
@@ -24,16 +25,16 @@
 		}
 
 		.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;
 		}
 
@@ -46,15 +47,14 @@
 
 
 
-	#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;
@@ -73,8 +73,17 @@
 		}
 
 		.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 {
diff --git a/less/common.less b/less/common.less
index 5111ced..bddc56c 100644
--- a/less/common.less
+++ b/less/common.less
@@ -9,12 +9,19 @@ html {
   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;
@@ -67,6 +74,7 @@ a:active {
 a.but {
 	display: inline-block;
 	color:#fff;
+    background-color: #2874ce;
 	clear:both;
 	border-radius: 2px;
 	padding: 10px 15px 12px;
@@ -88,7 +96,7 @@ a.but {
 
 	.main-holder {
 		width:100%;
-		padding: 0px 20px 50px 20px;
+		padding: 0 20px 50px 20px;
 	}
 	ul{
 		list-style:none;
@@ -102,7 +110,7 @@ a.but {
 
 .title {
 	margin: 0 auto;
-	padding: 40px 0 0 0;
+	padding-top: 40px;
 	h1 {
 		text-align: left;
 		font-size: 56px;
@@ -122,7 +130,7 @@ a.but {
 
 .dotclear{
 	h3,h4{
-		font-weight: 500;
+		font-weight: 400;
 	}
 	p{
 		line-height: 1.56em;
diff --git a/less/contact.less b/less/contact.less
index e8b66a5..c176547 100644
--- a/less/contact.less
+++ b/less/contact.less
@@ -1,81 +1,141 @@
 /* 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
diff --git a/less/header.less b/less/header.less
index b61c634..252ff4c 100644
--- a/less/header.less
+++ b/less/header.less
@@ -65,21 +65,86 @@
 }
 
 ////////////////////////
-// @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;
   }
@@ -94,18 +159,18 @@ a.menu-link {
     //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;
diff --git a/less/realisations.less b/less/realisations.less
index 44d5ec9..f44e714 100644
--- a/less/realisations.less
+++ b/less/realisations.less
@@ -4,6 +4,8 @@
     margin: 0 auto;
     padding: 0 0 50px 0;
 
+    display: none; // Hidden initially until Isotope activates
+
     a,a:hover {
         color:#000;
 		display:inline-block;