From 56409b2f395df843e114fc2d51c32d81dc3ab0c1 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 19 Nov 2020 18:26:06 +0000
Subject: [PATCH] WIP #4063 @7

---
 framework/application/configs/application.ini | 14 +++++
 framework/application/forms/CMS/Home.php      |  1 +
 .../application/forms/CMS/Sub/Home/Intro.php  |  7 ++-
 .../application/forms/CMS/Sub/Home/Mobile.php |  7 +++
 framework/application/views/helpers/Home.php  | 10 +++-
 .../application/views/helpers/HomeIntro.php   |  6 +-
 .../application/views/helpers/HomeLayer.php   |  6 +-
 .../application/views/helpers/HomeMobile.php  | 17 ++++++
 .../views/helpers/HomeServices.php            | 15 -----
 framework/application/views/helpers/Logos.php | 11 ++--
 index.php                                     |  2 +
 less/106-logos.less                           | 60 +++++++++----------
 less/211-home-intro.less                      | 13 +++-
 less/214-home-services.less                   | 52 ++--------------
 less/216-home-mobile.less                     | 20 +++++++
 15 files changed, 130 insertions(+), 111 deletions(-)
 create mode 100644 framework/application/forms/CMS/Sub/Home/Mobile.php
 create mode 100644 framework/application/views/helpers/HomeMobile.php
 create mode 100644 less/216-home-mobile.less

diff --git a/framework/application/configs/application.ini b/framework/application/configs/application.ini
index 130d08c..150b72d 100644
--- a/framework/application/configs/application.ini
+++ b/framework/application/configs/application.ini
@@ -101,3 +101,17 @@ locales.fr = dev.fluidbook.com
 locales.en = en.dev.fluidbook.com
 
 database.params.dbname = fluidbookwebv3_dev
+
+[local : production]
+
+dev = true
+firephp = false
+
+webhost = fluidbook.test
+locales.fr = fluidbook.test
+locales.en = en.fluidbook.test
+
+database.params.username = root
+database.params.password =
+database.params.dbname = fluidbook-website
+
diff --git a/framework/application/forms/CMS/Home.php b/framework/application/forms/CMS/Home.php
index 5d9b656..a264328 100644
--- a/framework/application/forms/CMS/Home.php
+++ b/framework/application/forms/CMS/Home.php
@@ -7,6 +7,7 @@ class Fluidbook_Form_CMS_Home extends Fluidbook_Form_CMS {
 		$blocs = array(
 			'intro' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_Intro', 'label' => 'Intro'),
 			'features' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_Features', 'label' => 'Fonctionnalités'),
+			'mobile' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_Mobile', 'label' => 'Mobile First'),
 			'customers' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_Customers', 'label' => 'Clients'),
 			'services' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_Services', 'label' => 'Services'),
 			'references' => array('class' => 'Fluidbook_Form_CMS_Sub_Home_References', 'label' => 'Référeces'),
diff --git a/framework/application/forms/CMS/Sub/Home/Intro.php b/framework/application/forms/CMS/Sub/Home/Intro.php
index cca9784..2b88064 100644
--- a/framework/application/forms/CMS/Sub/Home/Intro.php
+++ b/framework/application/forms/CMS/Sub/Home/Intro.php
@@ -8,5 +8,10 @@ class Fluidbook_Form_CMS_Sub_Home_Intro extends Fluidbook_Form_CMS_Sub_Home_Bloc
 		$video->setLabel('Vidéo');
 		$video->setOrder(25);
 		$this->addElement($video);
+
+        $logos = new CubeIT_Form_Element_File_Image('client_logos');
+        $logos->setLabel('Client Logos');
+        $logos->setOrder(70);
+        $this->addElement($logos);
 	}
-}
\ No newline at end of file
+}
diff --git a/framework/application/forms/CMS/Sub/Home/Mobile.php b/framework/application/forms/CMS/Sub/Home/Mobile.php
new file mode 100644
index 0000000..1346725
--- /dev/null
+++ b/framework/application/forms/CMS/Sub/Home/Mobile.php
@@ -0,0 +1,7 @@
+<?php
+
+class Fluidbook_Form_CMS_Sub_Home_Mobile extends Fluidbook_Form_CMS_Sub_Home_Block {
+	public function init() {
+		parent::init();
+	}
+}
diff --git a/framework/application/views/helpers/Home.php b/framework/application/views/helpers/Home.php
index cfe3b3d..7272b3a 100644
--- a/framework/application/views/helpers/Home.php
+++ b/framework/application/views/helpers/Home.php
@@ -9,12 +9,16 @@ class Fluidbook_View_Helper_Home extends CubeIT_View_Helper_Abstract {
 		$blocs = array(
 			'intro',
 			'features',
-			'customers',
+			'mobile',
 			'services',
-			'references'
+			'references',
+			'customers',
 		);
 
 		foreach ($blocs as $bloc) {
+
+		    if (empty($this->{$bloc}['title'])) continue; // Skip sections with no title set
+
 			$viewHelper = 'home' . ucfirst($bloc);
 			$res .= $this->$viewHelper($this->{$bloc});
 		}
@@ -25,4 +29,4 @@ class Fluidbook_View_Helper_Home extends CubeIT_View_Helper_Abstract {
 
 		return $res;
 	}
-}
\ No newline at end of file
+}
diff --git a/framework/application/views/helpers/HomeIntro.php b/framework/application/views/helpers/HomeIntro.php
index e086376..3d44517 100644
--- a/framework/application/views/helpers/HomeIntro.php
+++ b/framework/application/views/helpers/HomeIntro.php
@@ -10,11 +10,11 @@ class Fluidbook_View_Helper_HomeIntro extends Fluidbook_View_Helper_HomeLayer {
 
         $this->data = $data;
 
-        $res  = $this->_leftText('h1');
-
+        $res = $this->_leftText('h1');
         $arrow = $this->link(null, '#', ['class' => 'scroll-arrow']);
+        $logos = $this->logos($data['client_logos'], 'div');
 
-		return $this->_layer($res, 'intro', [], $arrow);
+		return $this->_layer($res, 'intro', [], $arrow, $logos);
 	}
 
 
diff --git a/framework/application/views/helpers/HomeLayer.php b/framework/application/views/helpers/HomeLayer.php
index 1fb2727..8950013 100644
--- a/framework/application/views/helpers/HomeLayer.php
+++ b/framework/application/views/helpers/HomeLayer.php
@@ -4,7 +4,7 @@ class Fluidbook_View_Helper_HomeLayer extends CubeIT_View_Helper_Abstract
 {
     public $data;
 
-    protected function _layer($content, $class, $attributes = array(), $outerContent = '')
+    protected function _layer($content, $class, $attributes = array(), $extraContent = '', $outerContent = '')
     {
 
         $section = $class;
@@ -19,10 +19,10 @@ class Fluidbook_View_Helper_HomeLayer extends CubeIT_View_Helper_Abstract
         $attributes = $this->_mergeAttributes($attributes, $defaultAttributes);
 
         $content = $this->htmlElement($content, 'div', array('class' => 'content-inner'));
-        $content .= $outerContent;
+        $content .= $extraContent;
         $content = $this->backgroundBlock($content, $this->data, ['class' => ['content-wrapper', 'no-shrink', 'fullheight']]);
 
-        return $this->htmlElement($content, 'section', $attributes);
+        return $this->htmlElement($content . $outerContent, 'section', $attributes);
     }
 
     protected function _leftText($title_element = 'h2')
diff --git a/framework/application/views/helpers/HomeMobile.php b/framework/application/views/helpers/HomeMobile.php
new file mode 100644
index 0000000..df66689
--- /dev/null
+++ b/framework/application/views/helpers/HomeMobile.php
@@ -0,0 +1,17 @@
+<?php
+
+class Fluidbook_View_Helper_HomeMobile extends Fluidbook_View_Helper_HomeLayer {
+	/**
+	 * @return string
+	 */
+	public function homeMobile($data) {
+
+        $this->headScript()->addScriptAndStyle('212-home-mobile');
+
+		$this->data = $data;
+
+		$res = $this->_leftText();
+
+		return $this->_layer($res, 'mobile');
+	}
+}
diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index f109a9a..e08bfc0 100644
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -15,21 +15,6 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
 		$res .= '</div>'; // .text
 
 		$res .= '<div class="carousel">';
-		$res .= '<div class="window-top-wrapper">';
-		//        $res .= '<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-		//	             viewBox="0 0 755 24" xml:space="preserve">
-		//                <style type="text/css">
-		//                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}
-		//                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}
-		//                </style>
-		//                <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>
-		//                <circle class="st1" cx="16" cy="12" r="3"/>
-		//                <circle class="st1" cx="26" cy="12" r="3"/>
-		//                <circle class="st1" cx="36" cy="12" r="3"/>
-		//                </svg>';
-		//        $res .= '<span></span><span></span><span></span>'; // Dot elements
-		$res .= '</div>'; // .window-top-wrapper
-		$res .= '<img src="/images/home/window-top.png" class="window-top" alt="Window header">';
 		$res .= '<div class="services-examples">';
 
 		foreach ($data['examples'] as $example) {
diff --git a/framework/application/views/helpers/Logos.php b/framework/application/views/helpers/Logos.php
index 1e15bcf..3c4b16a 100644
--- a/framework/application/views/helpers/Logos.php
+++ b/framework/application/views/helpers/Logos.php
@@ -4,7 +4,7 @@ class Fluidbook_View_Helper_Logos extends CubeIT_View_Helper_Abstract {
 	/**
 	 * @return string
 	 */
-	public function logos($logos) {
+	public function logos($logos, $wrapper_element = 'section') {
 		$images = CubeIT_Util_Cms::extractFiles($logos);
 		if (!count($images)) {
 			return;
@@ -14,10 +14,11 @@ class Fluidbook_View_Helper_Logos extends CubeIT_View_Helper_Abstract {
 
 		$res = '';
 		foreach ($images as $image) {
-			$res .= $this->htmlElement($this->imageCms($image), 'div', ['class' => 'i']) . ' '; // Space needed for the justify
+		    $img = $this->imageCms($image, '', null, null, ['class' => 'logos-image']);
+			$res .= $this->htmlElement($img, 'div', ['class' => 'logos-item']);
 		}
 
-		$res = $this->htmlElement($res, 'div', ['class' => 'c']);
-		return $this->htmlElement($res, 'section', ['class' => 'logos content-wrapper grid wrap']);
+		$res = $this->htmlElement($res, 'div', ['class' => 'logos-grid']);
+		return $this->htmlElement($res, $wrapper_element, ['class' => 'logos-wrapper grid']);
 	}
-}
\ No newline at end of file
+}
diff --git a/index.php b/index.php
index e495985..1577519 100644
--- a/index.php
+++ b/index.php
@@ -8,6 +8,8 @@ if (strpos($_SERVER['HTTP_HOST'], 'elearning.') !== false) {
     define('APPLICATION_ENV', 'learning');
 } elseif (strpos($_SERVER['HTTP_HOST'], 'dev.') !== false) {
     define('APPLICATION_ENV', 'testing');
+} elseif (strpos($_SERVER['HTTP_HOST'], '.test') !== false) {
+    define('APPLICATION_ENV', 'local');
 } else {
     define('APPLICATION_ENV', 'production');
 }
diff --git a/less/106-logos.less b/less/106-logos.less
index 3ed3600..25889b9 100644
--- a/less/106-logos.less
+++ b/less/106-logos.less
@@ -1,45 +1,45 @@
 @import "000-imports";
 
 .logos {
-	&.content-wrapper {
+	&-wrapper {
+		background-color: @color-light-grey;
 		padding-top: 3%;
 		padding-bottom: 3%;
 	}
 
-	background-color: @color-light-grey;
-
-	.c {
-		display: inline-block;
+	&-grid {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		width: 100%;
-		text-align: justify;
-		padding-left: 70px;
-		padding-right: 70px;
-		margin: 0 auto;
-		line-height: 0;
-
-		@media @m900 {
-			padding-left: 0;
-			padding-right: 0;
-		}
+		margin: -1em 0; // Offset vertical padding on .logos-item so we only have spacing between multiple rows
+		padding: 0 70px;
 
-		&:after {
-			content: "";
-			display: inline-block;
-			width: 100%;
-			height: 0;
+		@media (max-width: 1299px) {
+			padding: 0;
 		}
 
-		.i {
-			width: 120px;
-			height: 45px;
-			display: inline-block;
-			text-align: center;
+		@media @m640 {
+			flex-wrap: wrap;
 
-			img {
-				vertical-align: middle;
-				max-width: 100%;
-				max-height: 100%;
+			.logos-item {
+				flex-basis: 33%; // Switch to 3 cols instead of 5
 			}
 		}
 	}
-}
\ No newline at end of file
+
+	&-item {
+		flex: 1 1 auto; // Equal width columns covering available total width
+		display: flex; // Enable flex here to allow easier centering of images
+		justify-content: center;
+		align-items: center;
+		padding: 1em; // Controls minimum space between items
+	}
+
+	&-image {
+		width: 100%;
+		height: 100%;
+		max-width: 120px;
+		max-height: 45px;
+	}
+}
diff --git a/less/211-home-intro.less b/less/211-home-intro.less
index 04bdb6a..39c6277 100644
--- a/less/211-home-intro.less
+++ b/less/211-home-intro.less
@@ -1,6 +1,13 @@
 @import "000-imports";
 
 section.intro {
+  display: flex;
+  flex-direction: column;
+
+  .content-wrapper {
+    min-height: unset !important;
+    flex: 1; // Take up all remaining height that logos don't use
+  }
 
   a.scroll-arrow {
     display: none;
@@ -8,12 +15,12 @@ section.intro {
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
-    color:transparent !important;
+    color: currentColor !important;
 
     &:after {
       .icon('f');
       font-size: 40px;
-      color: #fff;
+      color: currentColor;
       transform: rotate(90deg);
       display: inline-block;
       .font-thinning-off();
@@ -29,4 +36,4 @@ section.intro {
         padding-top: 70px;
       }
   }
-}
\ No newline at end of file
+}
diff --git a/less/214-home-services.less b/less/214-home-services.less
index 485400c..3eea778 100644
--- a/less/214-home-services.less
+++ b/less/214-home-services.less
@@ -27,52 +27,6 @@ section.services {
   }
 }
 
-// Responsive inline SVG (see: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/)
-//.window-top-wrapper {
-//  padding-top: percentage(24/755); // Intrinsic ratio so SVG scales properly at all sizes
-//  position: relative;
-//  max-width: 755px;
-//  margin: 0 auto;
-//
-//  // CSS version of the header
-//  background-color: #475462;
-//  border-top-right-radius: 5px;
-//  border-top-left-radius: 5px;
-//
-//  span {
-//    position: absolute;
-//    top: percentage(9/24);
-//    width: percentage(6/755);
-//    padding-bottom: percentage(6/755);
-//    border-radius: 50%;
-//    background-color: #151E26;
-//
-//    &:nth-child(1) {
-//      left: percentage(13/755);
-//    }
-//    &:nth-child(2) {
-//      left: percentage(23/755);
-//    }
-//    &:nth-child(3) {
-//      left: percentage(33/755);
-//    }
-//  }
-//
-//  svg {
-//    position: absolute;
-//    top: 0;
-//    left: 0;
-//    width: 100%;
-//    height: 100%;
-//  }
-//}
-
-.window-top {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
 .services-examples {
   position: relative;
   width: 100%;
@@ -108,7 +62,7 @@ section.services {
     height: 100%;
     top: -1px; // Cover rounding errors - better than having a gap
     left: 0;
-    background-color: rgba(52, 60, 68, .8);
+    background-color: rgba(14, 24, 34, 0.8);
     color: #fff;
     z-index: 3;
     //transition: opacity @transition-time-buttons; // Disabled because it causes ugly page rendering shifts during animation
@@ -147,6 +101,8 @@ section.services {
   list-style-type: none;
   text-align: center;
   padding-top: 30px;
+  max-width: 700px;
+  margin: 0 auto;
 
   li {
     display: inline-block;
@@ -174,4 +130,4 @@ section.services {
     }
 
   }
-}
\ No newline at end of file
+}
diff --git a/less/216-home-mobile.less b/less/216-home-mobile.less
new file mode 100644
index 0000000..7de05c1
--- /dev/null
+++ b/less/216-home-mobile.less
@@ -0,0 +1,20 @@
+@import "000-imports";
+
+.mobile {
+
+	.title {
+		max-width: 50%;
+
+		@media @m900 {
+			max-width: none;
+
+		}
+	}
+
+	.content-inner {
+		@media @m900 {
+			padding-bottom: 85%;
+		}
+	}
+
+}
-- 
2.39.5