wip #7846 @4:00

diff --git a/framework/application/forms/CMS/Sub/Home/Block.php b/framework/application/forms/CMS/Sub/Home/Block.php
index 89055c4481fdcb9cb7f46fde6de23bdab801ef5d..5f558822352e1c5f082cd62769bbfd46028025cf 100644 (file)
--- a/framework/application/forms/CMS/Sub/Home/Block.php
+++ b/framework/application/forms/CMS/Sub/Home/Block.php
@@ -49,7 +49,7 @@ class Fluidbook_Form_CMS_Sub_Home_Block extends CubeIT_Form_SubForm {
 
         $backgroundImage = new CubeIT_Form_Element_File_Image('backgroundmobileimage');
         $backgroundImage->setLabel('Image de fond (variante mobile)');
-        $backgroundImage->setMaxItems(1);
+        $backgroundImage->setMaxItems(5);
         $backgroundImage->setOrder(61);
         $this->addElement($backgroundImage);
        }

diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index e08bfc07fcb7872b6a44b9bfdd2c693af4b3e505..4b41bae0abb8983e5ae88cd3d772aee1c50402db 100644 (file)
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -14,19 +14,17 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
                $res .= $this->_leftText();\r
                $res .= '</div>'; // .text\r
 \r
-               $res .= '<div class="carousel">';\r
-               $res .= '<div class="services-examples">';\r
-\r
-               foreach ($data['examples'] as $example) {\r
-                       $img = $this->imageProcess($example['image'], $example['title'], 810, 506, [], 'C', 'C', 'M', false, 'auto', null, 82);\r
-                       $rollover = $this->_rollover($example);\r
-                       $res .= $this->htmlElement($img . $rollover, 'div', ['data-title' => $example['title']]);\r
-               }\r
-\r
-               $res .= '</div>'; // .services-examples\r
-               $res .= '<ul class="services-examples-nav" style="color: ' . $data['themecolor'] . '"></ul>'; // Populated by JS\r
-               $res .= '</div>'; // .carousel\r
-\r
+        $res .= '<div class="video-container">';\r
+        $res .= '<div class="video-wrapper">';\r
+        $res .= '<div class="clay_ipad">';\r
+        $res .= '<img src="/images/services/Pencil.png" class="pencil" />';\r
+        $res .= '<img src="/images/services/Eraser.png" class="eraser" />';\r
+        $res .= '<video width="100" loop muted autoplay><source src="/images/services/Showreel_Fluidbook_v0.mp4" /></video>';\r
+        $res .= '<img src="/images/services/ipad.png" class="layer" />';\r
+        $res .= '</div>'; // Ipad container\r
+        $res .= '</div>'; // Video wrapper\r
+        $res .= '<img src="/images/services/Ruler.png" class="ruler" />';\r
+        $res .= '</div>'; // Video container\r
 \r
                return $this->_layer($res, 'services');\r
        }\r

diff --git a/images/services/Eraser.png b/images/services/Eraser.png
new file mode 100644 (file)
index 0000000..6e3156b
Binary files /dev/null and b/images/services/Eraser.png differ

diff --git a/images/services/Pencil.png b/images/services/Pencil.png
new file mode 100644 (file)
index 0000000..7f8c836
Binary files /dev/null and b/images/services/Pencil.png differ

diff --git a/images/services/Ruler.png b/images/services/Ruler.png
new file mode 100644 (file)
index 0000000..d03ba40
Binary files /dev/null and b/images/services/Ruler.png differ

diff --git a/images/services/Showreel_Fluidbook_v0.mp4 b/images/services/Showreel_Fluidbook_v0.mp4
new file mode 100644 (file)
index 0000000..fc0c9f9
Binary files /dev/null and b/images/services/Showreel_Fluidbook_v0.mp4 differ

diff --git a/images/services/ipad.png b/images/services/ipad.png
new file mode 100644 (file)
index 0000000..da6382c
Binary files /dev/null and b/images/services/ipad.png differ

diff --git a/less/210-home.less b/less/210-home.less
index 89a8a0142fbf89ea4d0bdace7b622fee5e23f8cf..b11293bc44502fe85ccfc13082271998c37ebf70 100644 (file)
--- a/less/210-home.less
+++ b/less/210-home.less
@@ -1,6 +1,11 @@
 @import "000-imports";\r
 \r
 .home {\r
+  .intro .picture {\r
+    background-color: #f2f6ff;\r
+    opacity: 0;\r
+  }\r
+\r
   .content-wrapper {\r
     &.fullheight {\r
       position: relative;\r
@@ -19,15 +24,103 @@
 \r
     // Make picture element behave like a background image so it doesn't overlap\r
     // the header area (image itself should have necessary whitespace included)\r
-    .picture {\r
-      opacity: 0;\r
-    }\r
 \r
     .picture picture img {\r
       height: 100%; // Needed along with width:100% so that object-fit works\r
       object-fit: contain;\r
       object-position: bottom right;\r
     }\r
+\r
+    .video-container {\r
+      position: absolute;\r
+      top: 0;\r
+      left: 0;\r
+      display: flex;\r
+      justify-content: flex-end;\r
+      width: 100%;\r
+      height: 100%;\r
+      padding: 0 8%;\r
+\r
+      @media @m900 {\r
+        position: relative;\r
+        padding: 100px 5% 100px;\r
+      }\r
+\r
+      .video-wrapper {\r
+        display: flex;\r
+        align-items: center;\r
+        justify-content: flex-end;\r
+        position: relative;\r
+\r
+        @media @m900 {\r
+          flex-direction: column;\r
+        }\r
+      }\r
+\r
+      .ruler {\r
+        position: absolute;\r
+        width: 266px;\r
+        bottom: -12vh;\r
+        right: 0;\r
+\r
+        @media @m900 {\r
+          bottom: 15px;\r
+          right: -5%;\r
+        }\r
+      }\r
+\r
+      .clay_ipad {\r
+        //padding-bottom: 36.20%;\r
+        width: 50%;\r
+        position: relative;\r
+        height: auto;\r
+        display: flex;\r
+        //overflow: hidden;\r
+        @media @m900 {\r
+          width: 100%;\r
+        }\r
+\r
+        video {\r
+          width: 96.3%;\r
+          position: absolute;\r
+          top: 50%;\r
+          height: 96%;\r
+          object-fit: cover;\r
+          transform: translate(-50%, -50%);\r
+          left: 50%;\r
+        }\r
+\r
+        .layer {\r
+          width: 100%;\r
+          position: relative;\r
+        }\r
+\r
+        .eraser {\r
+          position: absolute;\r
+          top: 7px;\r
+          transform: translate(100%, -100%);\r
+          width: 100%;\r
+          right: -10px;\r
+          max-width: 80px;\r
+\r
+          @media @m900 {\r
+            max-width: 59px;\r
+          }\r
+        }\r
+\r
+        .pencil {\r
+          position: absolute;\r
+          top: -48px;\r
+          right: 10px;\r
+          width: 100%;\r
+          max-width: 230px;\r
+\r
+          @media @m900 {\r
+            max-width: 200px;\r
+          }\r
+        }\r
+      }\r
+    }\r
 }\r
 \r
   .content-inner {\r