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
+
$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'),
$video->setLabel('Vidéo');\r
$video->setOrder(25);\r
$this->addElement($video);\r
+\r
+ $logos = new CubeIT_Form_Element_File_Image('client_logos');\r
+ $logos->setLabel('Client Logos');\r
+ $logos->setOrder(70);\r
+ $this->addElement($logos);\r
}\r
-}
\ No newline at end of file
+}\r
--- /dev/null
+<?php\r
+\r
+class Fluidbook_Form_CMS_Sub_Home_Mobile extends Fluidbook_Form_CMS_Sub_Home_Block {\r
+ public function init() {\r
+ parent::init();\r
+ }\r
+}\r
$blocs = array(\r
'intro',\r
'features',\r
- 'customers',\r
+ 'mobile',\r
'services',\r
- 'references'\r
+ 'references',\r
+ 'customers',\r
);\r
\r
foreach ($blocs as $bloc) {\r
+\r
+ if (empty($this->{$bloc}['title'])) continue; // Skip sections with no title set\r
+\r
$viewHelper = 'home' . ucfirst($bloc);\r
$res .= $this->$viewHelper($this->{$bloc});\r
}\r
\r
return $res;\r
}\r
-}
\ No newline at end of file
+}\r
\r
$this->data = $data;\r
\r
- $res = $this->_leftText('h1');\r
-\r
+ $res = $this->_leftText('h1');\r
$arrow = $this->link(null, '#', ['class' => 'scroll-arrow']);\r
+ $logos = $this->logos($data['client_logos'], 'div');\r
\r
- return $this->_layer($res, 'intro', [], $arrow);\r
+ return $this->_layer($res, 'intro', [], $arrow, $logos);\r
}\r
\r
\r
{\r
public $data;\r
\r
- protected function _layer($content, $class, $attributes = array(), $outerContent = '')\r
+ protected function _layer($content, $class, $attributes = array(), $extraContent = '', $outerContent = '')\r
{\r
\r
$section = $class;\r
$attributes = $this->_mergeAttributes($attributes, $defaultAttributes);\r
\r
$content = $this->htmlElement($content, 'div', array('class' => 'content-inner'));\r
- $content .= $outerContent;\r
+ $content .= $extraContent;\r
$content = $this->backgroundBlock($content, $this->data, ['class' => ['content-wrapper', 'no-shrink', 'fullheight']]);\r
\r
- return $this->htmlElement($content, 'section', $attributes);\r
+ return $this->htmlElement($content . $outerContent, 'section', $attributes);\r
}\r
\r
protected function _leftText($title_element = 'h2')\r
--- /dev/null
+<?php\r
+\r
+class Fluidbook_View_Helper_HomeMobile extends Fluidbook_View_Helper_HomeLayer {\r
+ /**\r
+ * @return string\r
+ */\r
+ public function homeMobile($data) {\r
+\r
+ $this->headScript()->addScriptAndStyle('212-home-mobile');\r
+\r
+ $this->data = $data;\r
+\r
+ $res = $this->_leftText();\r
+\r
+ return $this->_layer($res, 'mobile');\r
+ }\r
+}\r
$res .= '</div>'; // .text\r
\r
$res .= '<div class="carousel">';\r
- $res .= '<div class="window-top-wrapper">';\r
- // $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"\r
- // viewBox="0 0 755 24" xml:space="preserve">\r
- // <style type="text/css">\r
- // .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#475462;}\r
- // .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#151E26;}\r
- // </style>\r
- // <path class="st0" d="M0,24V5c0-2.8,2.2-5,5-5h745c2.8,0,5,2.2,5,5v19"/>\r
- // <circle class="st1" cx="16" cy="12" r="3"/>\r
- // <circle class="st1" cx="26" cy="12" r="3"/>\r
- // <circle class="st1" cx="36" cy="12" r="3"/>\r
- // </svg>';\r
- // $res .= '<span></span><span></span><span></span>'; // Dot elements\r
- $res .= '</div>'; // .window-top-wrapper\r
- $res .= '<img src="/images/home/window-top.png" class="window-top" alt="Window header">';\r
$res .= '<div class="services-examples">';\r
\r
foreach ($data['examples'] as $example) {\r
/**\r
* @return string\r
*/\r
- public function logos($logos) {\r
+ public function logos($logos, $wrapper_element = 'section') {\r
$images = CubeIT_Util_Cms::extractFiles($logos);\r
if (!count($images)) {\r
return;\r
\r
$res = '';\r
foreach ($images as $image) {\r
- $res .= $this->htmlElement($this->imageCms($image), 'div', ['class' => 'i']) . ' '; // Space needed for the justify\r
+ $img = $this->imageCms($image, '', null, null, ['class' => 'logos-image']);\r
+ $res .= $this->htmlElement($img, 'div', ['class' => 'logos-item']);\r
}\r
\r
- $res = $this->htmlElement($res, 'div', ['class' => 'c']);\r
- return $this->htmlElement($res, 'section', ['class' => 'logos content-wrapper grid wrap']);\r
+ $res = $this->htmlElement($res, 'div', ['class' => 'logos-grid']);\r
+ return $this->htmlElement($res, $wrapper_element, ['class' => 'logos-wrapper grid']);\r
}\r
-}
\ No newline at end of file
+}\r
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');
}
@import "000-imports";\r
\r
.logos {\r
- &.content-wrapper {\r
+ &-wrapper {\r
+ background-color: @color-light-grey;\r
padding-top: 3%;\r
padding-bottom: 3%;\r
}\r
\r
- background-color: @color-light-grey;\r
-\r
- .c {\r
- display: inline-block;\r
+ &-grid {\r
+ display: flex;\r
+ align-items: center;\r
+ justify-content: center;\r
width: 100%;\r
- text-align: justify;\r
- padding-left: 70px;\r
- padding-right: 70px;\r
- margin: 0 auto;\r
- line-height: 0;\r
-\r
- @media @m900 {\r
- padding-left: 0;\r
- padding-right: 0;\r
- }\r
+ margin: -1em 0; // Offset vertical padding on .logos-item so we only have spacing between multiple rows\r
+ padding: 0 70px;\r
\r
- &:after {\r
- content: "";\r
- display: inline-block;\r
- width: 100%;\r
- height: 0;\r
+ @media (max-width: 1299px) {\r
+ padding: 0;\r
}\r
\r
- .i {\r
- width: 120px;\r
- height: 45px;\r
- display: inline-block;\r
- text-align: center;\r
+ @media @m640 {\r
+ flex-wrap: wrap;\r
\r
- img {\r
- vertical-align: middle;\r
- max-width: 100%;\r
- max-height: 100%;\r
+ .logos-item {\r
+ flex-basis: 33%; // Switch to 3 cols instead of 5\r
}\r
}\r
}\r
-}
\ No newline at end of file
+\r
+ &-item {\r
+ flex: 1 1 auto; // Equal width columns covering available total width\r
+ display: flex; // Enable flex here to allow easier centering of images\r
+ justify-content: center;\r
+ align-items: center;\r
+ padding: 1em; // Controls minimum space between items\r
+ }\r
+\r
+ &-image {\r
+ width: 100%;\r
+ height: 100%;\r
+ max-width: 120px;\r
+ max-height: 45px;\r
+ }\r
+}\r
@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;
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();
padding-top: 70px;
}
}
-}
\ No newline at end of file
+}
}
}
-// 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%;
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
list-style-type: none;
text-align: center;
padding-top: 30px;
+ max-width: 700px;
+ margin: 0 auto;
li {
display: inline-block;
}
}
-}
\ No newline at end of file
+}
--- /dev/null
+@import "000-imports";
+
+.mobile {
+
+ .title {
+ max-width: 50%;
+
+ @media @m900 {
+ max-width: none;
+
+ }
+ }
+
+ .content-inner {
+ @media @m900 {
+ padding-bottom: 85%;
+ }
+ }
+
+}
projects / fluidbook-v3.git / commitdiff