From b93ae2e5929c401feedfd3690d1c8e371bb7c1c6 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 18 Jul 2016 17:16:43 +0000
Subject: [PATCH] Rework footer after feedback from Ludo. Ensure alignment
 matches content with a special offset for the logo. #538 @5

---
 .../views/scripts/common/footer.phtml         | 19 +++-
 less/102-footer.less                          | 90 +++++++++++--------
 2 files changed, 68 insertions(+), 41 deletions(-)

diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index d9370be..a7d9458 100644
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -4,17 +4,21 @@ $this->headScript()->addScriptAndStyle('102-footer');
 
 $res = '<footer class="site">';
 
-$logo = $this->imageCms($this->option('logo'), 'Fluidbook', 258, 64);
+// Wrapper element needed so percentage based padding matches the main content areas
+// Padding needs to be based on a max-width of 1680px, not the actual screen width
+$res .= '<div class="footer-inner">';
+
+$logo = $this->imageCms($this->option('logo'), 'Fluidbook', 180, 45);
 $address = $this->option('address');
 
 // Get translation for country code
 $locale = new Zend_Locale();
-$country = $locale->getTranslation($address['pays'], 'Territory');
+$country = strtoupper($locale->getTranslation($address['pays'], 'Territory'));
 
 $res .= '<div class="contact-details">';
 $res .= $this->link($logo, 'internal:home');
 $res .= '<address>';
-$res .= "{$address['adresse']} - {$address['code_postal']} {$address['ville']} $country";
+$res .= "{$address['adresse']}<br>{$address['code_postal']} {$address['ville']} - $country";
 $res .= '<br>';
 $res .= __('Tél.') . ' ' . $this->linkPhone($address['phone']);
 $res .= '<br>';
@@ -27,6 +31,8 @@ $res .= $this->footerMenu($this->option('footer_menu_main'), __('Plan du site'))
 $quoteLink = $this->linkQuote(__('Demander un devis'));
 $res .= $this->footerMenu($this->option('footer_menu_contact'), __('Contactez-nous'), 'internal:contact', array($quoteLink));
 
+$res .= '<div class="footer-external">';
+
 $res .= '<div class="footer-social">';
 foreach ($this->option('social_networks') as $social) {
 	$res .= '<style type="text/css">';
@@ -35,15 +41,19 @@ foreach ($this->option('social_networks') as $social) {
 	$res .= '<a href="' . $social['url'] . '" id="s-' . $social['icon'] . '" class="social-link fb-' . $social['icon'] . '" target="_blank">';
 	$res .= '</a>';
 }
-$res .= '</div>'; // .footer-social
+$res .= '</div>'; // .footer-external
 
 $res .= '<div class="workshop">';
 $res .= $this->linkCMS($this->option('workshop'), array('class' => 'workshop-link'));
 $res .= '</div>'; // .workshop
 
+$res .= '</div>'; // .external-links
+
+$res .= '</div>'; // .footer-inner
 $res .= '</footer>';
 
 $res .= '<footer class="legal">';
+$res .= '<div class="footer-inner">';
 
 $res .= '<div class="locale-nav">';
 $res .= $this->localeNavigation(true, CubeIT_View_Helper_LocaleNavigation::BIGRAMME);
@@ -51,6 +61,7 @@ $res .= '</div>'; // .locale-nav
 
 $res .= $this->markupDotclear($this->option('footer'));
 
+$res .= '</div>'; // .footer-inner
 $res .= '</footer>'; // footer.legal
 
 echo $res;
\ No newline at end of file
diff --git a/less/102-footer.less b/less/102-footer.less
index 248cd8e..8c28fea 100644
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -3,14 +3,9 @@
 footer {
 	.font-thinning();
 	max-width: @content-max-width;
+    width: 100%;
 	margin: 0 auto;
 
-	// Flexbox setup
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	flex-wrap: wrap;
-
 	a {
 		color: #fff;
 		text-decoration: none;
@@ -22,21 +17,30 @@ footer {
 	}
 }
 
-footer.site {
+.footer-inner {
+  padding-left: 5%;
+  padding-right: 5%;
+
+  // Flexbox setup
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+footer.site .footer-inner {
 	color: #fff;
 	background-color: @color-footer-bg-primary;
-	padding: 75px 85px 75px 42px;
+    padding-top: 80px;
+    padding-bottom: 75px;
 
-	@media @m1024 {
-		padding: 40px;
-	}
 	@media @m900 {
 		justify-content: center;
 		text-align: center;
-		padding: 30px;
+		flex-wrap: wrap;
+        padding: 30px 20px;
 	}
 	@media (max-width: 400px) {
-		padding: 30px 20px;
+
 	}
 
 	// Footer containers
@@ -54,25 +58,34 @@ footer.site {
 	}
 
 	.contact-details {
-		flex-grow: 4; // Increase space bias for this block
+		flex-grow: 3; // Increase space bias for this block
+        flex-shrink: 0;
 
+        // Logo
 		img {
-			max-width: 100%;
-			height: auto;
+          max-width: 100%;
+          height: auto;
+          margin-top: -25px; // Offset by the symbol width to make the alignment based on the "Fluidbook" text alone
+          margin-left: -30px;
 		}
 
+        @media @m1024 {
+          margin-top: 0;
+        }
+
 		@media @m900 {
 			flex-basis: 100%;
 
 			img	{
-				max-width: 120px;
+				max-width: 150px;
+                margin-top: 0;
+                margin-left: -25px;
 			}
 		}
 	}
 
 	address {
 		margin-top: 4px;
-		margin-left: 41px;
 		font-style: normal;
 		font-size: 14px;
 		line-height: 32/14;
@@ -84,18 +97,22 @@ footer.site {
 		}
 	}
 
+    // Wrapper for footer social and workshop links so they are treated as a single flexbox item
+    .footer-external {
+        padding-top: 10px;
+
+        @media @m900 {
+          padding-top: 0;
+          flex-basis: 100%;
+        }
+    }
+
 	.footer-social {
 		text-align: center;
+        margin-bottom: 20px;
 
-		@media @m1280 {
-			order: 5; // Send to end
-			flex-basis: 100%;
-			margin-top: 20px;
-			padding: 0 0 0 40px;
-			text-align: left;
-		}
-		@media @m1024 {
-			order: 0; // Back to original order
+		@media (min-width: 1100px) {
+          float: left;
 		}
 		@media @m900 {
 			text-align: center;
@@ -105,14 +122,11 @@ footer.site {
 	}
 
 	.workshop {
-		text-align: right;
+		text-align: center;
 
-		@media @m1024 {
-			flex-basis: 100%;
-			margin-top: 20px;
-			padding-left: 40px;
-			text-align: left;
-		}
+        @media (min-width: 1100px) {
+          float: right;
+        }
 		@media @m900 {
 			text-align: center;
 			padding-left: 0;
@@ -131,7 +145,7 @@ footer.site {
 			.longarrow-button(20px, 30px, 13px, 2px);
 		}
 		@media @m1024 {
-			.longarrow-button(20px, 54px, 16px, 0);
+			//.longarrow-button(20px, 54px, 16px, 0);
 		}
 		@media @m900 {
 			.longarrow-button(15px, 20px, 11px, 1px);
@@ -175,6 +189,7 @@ footer.site {
 .footer-menu {
 	line-height: 32/14;
 	flex-grow: 2;
+    flex-shrink: 0;
 
 	@media @m900 {
 		padding: 0 20px !important;
@@ -197,10 +212,11 @@ footer.site {
 }
 
 // Copyright and legal bar
-footer.legal {
+footer.legal .footer-inner {
 	background-color: @color-footer-bg-secondary;
 	color: #5c6268;
-	padding: 20px 85px;
+    padding-top: 20px;
+    padding-bottom: 20px;
 	font-size: 14px;
 	position: relative;
 	align-items: center;
-- 
2.39.5