From 720f3e303b22f2f32e4ba2ac78e4bff585e6e336 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 8 Jul 2016 16:27:44 +0000
Subject: [PATCH] Responsive behaviour for footer. Done #538 @2.5

---
 .../views/scripts/common/footer.phtml         |  4 +-
 less/001-variables.less                       |  1 +
 less/002-common.less                          |  1 +
 less/102-footer.less                          | 88 ++++++++++++++++---
 4 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index 267eb42..b124920 100644
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -42,11 +42,13 @@ $res .= '</div>'; // .workshop
 $res .= '</footer>';
 
 $res .= '<footer class="legal">';
-$res .= $this->markupDotclear($this->option('footer'));
+
 $res .= '<div class="locale-nav">';
 $res .= $this->localeNavigation(true, CubeIT_View_Helper_LocaleNavigation::BIGRAMME);
 $res .= '</div>'; // .locale-nav
 
+$res .= $this->markupDotclear($this->option('footer'));
+
 $res .= '</footer>'; // footer.legal
 
 echo $res;
\ No newline at end of file
diff --git a/less/001-variables.less b/less/001-variables.less
index 8142d5d..17c215c 100644
--- a/less/001-variables.less
+++ b/less/001-variables.less
@@ -24,6 +24,7 @@
 @mobile-breakpoint: 1024px;
 @desktop-min-width: 1200px;
 @content-max-width: 1680px;
+@content-min-width: 320px;
 
 // -- transition times
 @transition-time-buttons: 200ms;
diff --git a/less/002-common.less b/less/002-common.less
index 756e39f..e458e8a 100644
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -13,6 +13,7 @@ body {
 	font-family: @body-font;
 	font-size: 14px;
 	line-height: 26/14;
+	min-width: @content-min-width;
 }
 
 main {
diff --git a/less/102-footer.less b/less/102-footer.less
index 9b1dec4..52b17c2 100644
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -5,6 +5,12 @@ footer {
 	max-width: @content-max-width;
 	margin: 0 auto;
 
+	// Flexbox setup
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	flex-wrap: wrap;
+
 	a {
 		color: #fff;
 		text-decoration: none;
@@ -21,11 +27,15 @@ footer.site {
 	background-color: @color-footer-bg-primary;
 	padding: 75px 85px 75px 42px;
 
-	// Flexbox setup
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	flex-wrap: wrap;
+	@media @m1024 {
+		padding: 40px;
+	}
+	@media @m900 {
+		justify-content: flex-start;
+	}
+	@media @m768 {
+		padding: 30px;
+	}
 
 	// Footer containers
 	& > div {
@@ -38,6 +48,15 @@ footer.site {
 
 	.contact-details {
 		flex-grow: 4; // Increase space bias for this block
+
+		img {
+			max-width: 100%;
+			height: auto;
+		}
+
+		@media @m900 {
+			flex-basis: 100%;
+		}
 	}
 
 	address {
@@ -50,6 +69,14 @@ footer.site {
 
 	.footer-social {
 		text-align: center;
+
+		@media @m1280 {
+			order: 5; // Send to end
+			flex-basis: 100%;
+			margin-top: 20px;
+			padding: 0 0 0 40px;
+			text-align: left;
+		}
 	}
 
 	.social-link {
@@ -75,14 +102,28 @@ footer.site {
 
 	.workshop {
 		text-align: right;
+
+		@media @m1024 {
+			flex-basis: 100%;
+			margin-top: 20px;
+			padding-left: 40px;
+			text-align: left;
+		}
 	}
 	.workshop-link {
 		.rounded-button();
 		.border-button(#fff, #fff);
-		.longarrow-button(20px, 65px, 19px);
+		.longarrow-button(20px, 62px, 19px);
 		border-radius: 26px;
 		text-transform: uppercase;
 		font-size: 12px;
+
+		@media @m1280 {
+			.longarrow-button(20px, 30px, 13px, 2px);
+		}
+		@media @m1024 {
+			.longarrow-button(20px, 54px, 16px, 0);
+		}
 	}
 }
 
@@ -90,6 +131,13 @@ footer.site {
 	line-height: 32/14;
 	flex-grow: 2;
 
+	@media @m900 {
+		padding-left: 40px;
+		padding-right: 0;
+		flex-grow: 0 !important;
+		margin-top: 20px;
+	}
+
 	.menu-title {
 		text-transform: uppercase;
 		font-family: @montserrat;
@@ -105,15 +153,35 @@ footer.site {
 footer.legal {
 	background-color: @color-footer-bg-secondary;
 	color: #5c6268;
-	padding: 40px 85px;
+	padding: 20px 85px;
 	font-size: 14px;
 	position: relative;
+	align-items: center;
+	flex-wrap: nowrap;
+
+	@media @m900 {
+		padding-right: 45px;
+	}
+	@media @m768 {
+		padding-left: 70px;
+	}
+	@media @m640 {
+		flex-wrap: wrap;
+	}
 }
 
 .locale-nav {
-	position: absolute;
-	top: 21px;
-	right: 85px;
+	text-align: right;
+	order: 2;
+	white-space: nowrap;
+	padding-left: 30px;
+
+	@media @m640 {
+		order: 0; // back to source order
+		padding-left: 0;
+		padding-bottom: 20px;
+		text-align: left;
+	}
 
 	a {
 		display: inline-block;
-- 
2.39.5