frontend work | wip #487 @3

diff --git a/framework/application/forms/CMS/Agences.php b/framework/application/forms/CMS/Agences.php
index b76290444f374209866e0039a3e0186b27652985..77222297095de4c22dc4f1456b83246b51383ca7 100644 (file)
--- a/framework/application/forms/CMS/Agences.php
+++ b/framework/application/forms/CMS/Agences.php
@@ -1,5 +1,5 @@
 <?php\r
 \r
-class Fluidbook_Form_CMS_Agences extends Fluidbook_Form_CMS{\r
+class Fluidbook_Form_CMS_Agences extends Fluidbook_Form_CMS_Base{\r
 \r
 }
\ No newline at end of file

diff --git a/framework/application/forms/CMS/Exemples.php b/framework/application/forms/CMS/Exemples.php
index 83030f92738419c532629cd38d0f4c4f1bb0738b..1f69a6e3409ca672b4043bd1a6ce148cebcdbab6 100644 (file)
--- a/framework/application/forms/CMS/Exemples.php
+++ b/framework/application/forms/CMS/Exemples.php
@@ -1,9 +1,17 @@
 <?php\r
 \r
-class Fluidbook_Form_CMS_Exemples extends Fluidbook_Form_CMS {\r
+class Fluidbook_Form_CMS_Exemples extends Fluidbook_Form_CMS_Base {\r
        public function init() {\r
                parent::init();\r
 \r
+               $titre = new Zend_Form_Element_Textarea('title');\r
+               $titre->setLabel('Titre');\r
+               $this->addElement($titre);\r
+\r
+               $category = new Fluidbook_Form_CMS_Sub_Exemples_CategorySelect('category');\r
+               $category->setLabel('Catégorie de références');\r
+               $this->addElement($category);\r
+\r
                $exemples = new Fluidbook_Form_CMS_Element_Exemples('exemples');\r
                $exemples->setLabel('Gestion des exemples');\r
                $this->addElement($exemples);\r

diff --git a/framework/application/forms/CMS/Exemplessub.php b/framework/application/forms/CMS/Exemplessub.php
index af4ddd2b35eaa64135d117b211a9c5c87cd1db8d..93305e670a1672a630c2c40db2145fa57ab3dd04 100644 (file)
--- a/framework/application/forms/CMS/Exemplessub.php
+++ b/framework/application/forms/CMS/Exemplessub.php
@@ -1,5 +1,5 @@
 <?php\r
 \r
-class Fluidbook_Form_CMS_Exemplessub extends Fluidbook_Form_CMS{\r
+class Fluidbook_Form_CMS_Exemplessub extends Fluidbook_Form_CMS_Base{\r
 \r
 }
\ No newline at end of file

diff --git a/framework/application/forms/CMS/Faq.php b/framework/application/forms/CMS/Faq.php
index fc4b55fa175b1a19ae415e5f8756e86accc89c2e..34e1e5691102a1d3e88dc9beee6198465fd7521f 100644 (file)
--- a/framework/application/forms/CMS/Faq.php
+++ b/framework/application/forms/CMS/Faq.php
@@ -1,6 +1,6 @@
 <?php\r
 \r
 \r
-class Fluidbook_Form_CMS_Faq extends Fluidbook_Form_CMS {\r
+class Fluidbook_Form_CMS_Faq extends Fluidbook_Form_CMS_Base {\r
 \r
 }
\ No newline at end of file

diff --git a/framework/application/forms/CMS/Fonctionnalites.php b/framework/application/forms/CMS/Fonctionnalites.php
index 99215aebcd1eb84a717de806dea92005970956b0..718eadf4385963fd644a9428f790685d8cf6f309 100644 (file)
--- a/framework/application/forms/CMS/Fonctionnalites.php
+++ b/framework/application/forms/CMS/Fonctionnalites.php
@@ -1,6 +1,6 @@
 <?php\r
 \r
 \r
-class Fluidbook_Form_CMS_Fonctionnalites extends Fluidbook_Form_CMS {\r
+class Fluidbook_Form_CMS_Fonctionnalites extends Fluidbook_Form_CMS_Base {\r
 \r
 }
\ No newline at end of file

diff --git a/framework/application/forms/CMS/Sub/Exemples/CategorySelect.php b/framework/application/forms/CMS/Sub/Exemples/CategorySelect.php
new file mode 100644 (file)
index 0000000..a449ca0
--- /dev/null
+++ b/framework/application/forms/CMS/Sub/Exemples/CategorySelect.php
@@ -0,0 +1,16 @@
+<?php\r
+\r
+/**\r
+ * Created by IntelliJ IDEA.\r
+ * User: Vincent\r
+ * Date: 29/06/2016\r
+ * Time: 18:21\r
+ */\r
+class Fluidbook_Form_CMS_Sub_Exemples_CategorySelect extends CubeIT_Form_Element_SelectList {\r
+       public function init() {\r
+               parent::init();\r
+\r
+               $this->setBaseForm('Fluidbook_Form_CMS_Sub_Exemples_Category');\r
+       }\r
+\r
+}
\ No newline at end of file

diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml
index 2c0c166c0c7bff4b11421744c5040783d7bfa297..5dc0c51087018dce07b4b1fb1c14fe8de14a2ace 100644 (file)
--- a/framework/application/layouts/scripts/layout.phtml
+++ b/framework/application/layouts/scripts/layout.phtml
@@ -21,7 +21,7 @@ $this->headScript()->addTagHandler(true); // Used by related articles selector i
  */
 
 // Fonts
-$fonts = array('google' => array('families' => array('Open+Sans|Playfair+Display')),
+$fonts = array('google' => array('families' => array('Open+Sans|Playfair+Display|Montserrat')),
                           'custom' => array('families' => array('Montserrat'), 'urls' => array('/css/fonts/Montserrat/Montserrat.css')));
 
 $this->headScript()->addWebFont($fonts);

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index cb55b12d99e10112e2930579228695c8364c7278..aae5468dd5b24ea68b20ec1a0d3fbcdcd78be8e7 100644 (file)
--- a/framework/application/views/helpers/Exemples.php
+++ b/framework/application/views/helpers/Exemples.php
@@ -4,7 +4,9 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
        /**\r
         * @return string\r
         */\r
-       public function exemples($category) {\r
+       public function exemples($category, $title) {\r
+               $this->headScript()->addScriptAndStyle('220-exemples');\r
+               $this->headScript()->addMasonry();\r
 \r
                $exemples = Fluidbook_Model_Reference::factory()->order('date', 'DESC')->find();\r
 \r
@@ -37,17 +39,28 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $featured = array_slice($featured, 0, $max_featured);\r
                $normal = array_slice($normal, 0, $max_normal);\r
 \r
+               $res = $this->htmlElement($title, 'h2', array('class' => 'title col-2'));\r
 \r
-               $res = '';\r
+               $publications = '';\r
                for ($i = 0; $i < $max_featured; $i++) {\r
-                       $res .= $this->_publication($exemples[$featured[$i]], true);\r
+                       if ($i % 2 == 0) {\r
+                               $publications .= $this->_publication($exemples[$featured[$i]], true);\r
+                       }\r
                        for ($j = 0; $j < $normal_per_featured; $j++) {\r
                                $k = ($i * $normal_per_featured) + $j;\r
-                               $res .= $this->_publication($exemples[$normal[$k]], false);\r
+                               if ($j == 2 && $i % 2 == 1) {\r
+                                       $publications .= $this->_publication($exemples[$featured[$i]], true);\r
+                               } else if ($j == 2 && $i % 2 == 0) {\r
+                                       $publications .= $this->link('', '#', array('class' => 'empty'));\r
+                               }\r
+                               $publications .= $this->_publication($exemples[$normal[$k]], false);\r
                        }\r
+\r
                }\r
 \r
-               return $this->htmlElement($res, 'section', array('class' => "exemples"));\r
+               $res .= $this->htmlElement($publications, 'div', array('class' => 'publications col-6'));\r
+\r
+               return $this->htmlElement($res, 'section', array('class' => "exemples content-wrapper grid wrap"));\r
        }\r
 \r
        /**\r
@@ -57,11 +70,17 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
        protected function _publication($f, $featured = false) {\r
                $f = $f->unserialize();\r
 \r
-               $res = $this->htmlElement($f->getTitle(), 'h3');\r
+               $res = '';\r
+               $res .= $this->htmlElement(__('Voir le Fluidbook'), 'button', array('type' => 'button'));\r
+               $res .= $this->htmlElement($f->getTitle(), 'h3');\r
                if ($featured) {\r
                        $res .= $this->htmlElement($f->getText(), 'p');\r
                }\r
-               $res .= $this->htmlElement(__('Voir le Fluidbook'), 'button', array('type' => 'button'));\r
+\r
+               $res .= $this->htmlElement('', 'div',\r
+                       array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($f->getImage(), $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');',\r
+                             'class' => 'img')\r
+               );\r
                $attrs = array();\r
                if ($featured) {\r
                        $attrs['class'] = 'featured';\r

diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php
index 4b05ea0d71b9503756e78450fc0ba6ed772eeb45..628c66cebbabb18e3a7cb54fa1dd2f8a4d55efaa 100644 (file)
--- a/framework/application/views/helpers/IntroBlock.php
+++ b/framework/application/views/helpers/IntroBlock.php
@@ -2,13 +2,15 @@
 
 class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract {
 
-       public function introBlock($intro, $additionnalContent) {
+       public function introBlock($intro, $additionnalContent = '') {
 
                $style = '';
                $extra_attributes = '';
 
-               if ($intro['bg_image']) {
-                       $image_path = CubeIT_View_Helper_ImageCms::getPath($intro['bg_image']);
+               $bgimage=CubeIT_Util_Cms::extractFile($intro['bg_image']);
+
+               if ($bgimage) {
+                       $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage);
 
                        // Work out the ratio of the background image
                        CubeIT_Image::getDimensions($image_path, $image_width, $image_height);
@@ -23,7 +25,7 @@ class Fluidbook_View_Helper_IntroBlock extends CubeIT_View_Helper_Abstract {
                }
 
 
-               $res = '<div class="content-wrapper no-shrink" style="' . $style . '"' . $extra_attributes . '>';
+               $res = '<div class="intro content-wrapper no-shrink" style="' . $style . '"' . $extra_attributes . '>';
 
                $res .= '<div class="grid">';
                $res .= '<div class="col-2">';

diff --git a/framework/application/views/scripts/templates/exemples.phtml b/framework/application/views/scripts/templates/exemples.phtml
index 80fc927326da6c7eb1e524ecb29478e659b5168d..8341ac009326f515c7382df563e9c65fa8ba116a 100644 (file)
--- a/framework/application/views/scripts/templates/exemples.phtml
+++ b/framework/application/views/scripts/templates/exemples.phtml
@@ -1,3 +1,3 @@
 <?php\r
-\r
-echo $this->exemples(1);
\ No newline at end of file
+echo $this->introBlock($this->intro, '');\r
+echo $this->exemples(1, $this->title);
\ No newline at end of file

diff --git a/js/220-exemples.js b/js/220-exemples.js
new file mode 100644 (file)
index 0000000..890042e
--- /dev/null
+++ b/js/220-exemples.js
@@ -0,0 +1,24 @@
+registerLoader(load_exemples);\r
+\r
+function load_exemples() {\r
+    $(window).on('cubeitresize', resizeExemples);\r
+    resizeExemples();\r
+\r
+    $(".publications").masonry({\r
+        itemSelector: "a",\r
+        fitWidth: true,\r
+        columnWidth: "a:not(.featured)",\r
+        transitionDuration: 0,\r
+    });\r
+\r
+}\r
+\r
+function resizeExemples() {\r
+    var ww = $(window).width() * 0.9;\r
+    $(".publications").css('width', ww);\r
+    $('.publications a.featured').css({width: (ww / 2), height: ww / 2});\r
+    $('.publications a:not(.featured)').css({width: (ww / 4), height: ww / 4});\r
+    $(".publications").masonry({\r
+        itemSelector: "a",\r
+    });\r
+}\r

diff --git a/less/002-common.less b/less/002-common.less
index c45c5c4cc701284fffb08a55de05c01e694a9e3e..753d6ba96aea25e7f0b85bddfbec66328d0d633b 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -3,6 +3,7 @@
 html {\r
        box-sizing: border-box;\r
 }\r
+\r
 *, *:before, *:after {\r
        box-sizing: inherit;\r
 }\r
@@ -21,13 +22,15 @@ main {
 }\r
 \r
 // Main heading style\r
-h1.title {\r
-       color: @color-text;\r
-       font-family: @playfair;\r
-       font-size: 60px;\r
-       font-weight: 400;\r
-       line-height: 1.3;\r
-       .divider(85px);\r
+h1, h2 {\r
+       &.title {\r
+               color: @color-text;\r
+               font-family: @playfair;\r
+               font-size: 60px;\r
+               font-weight: 400;\r
+               line-height: 1.3;\r
+               .divider(85px);\r
+       }\r
 }\r
 \r
 a {\r
@@ -49,9 +52,9 @@ a {
        min-width: @desktop-min-width;\r
 }\r
 \r
-.cubeit-content{\r
+.cubeit-content {\r
        width: 90%;\r
-       margin:0 auto;\r
+       margin: 0 auto;\r
 }\r
 \r
 // Simple Flexbox Grid\r
@@ -59,14 +62,40 @@ a {
        display: flex;\r
        padding-left: 5%;\r
        padding-right: 5%;\r
+       &.wrap {\r
+               flex-wrap: wrap;\r
+       }\r
 }\r
+\r
 .col {\r
        flex: 1 0 auto;\r
 }\r
+\r
 // Grid contains 6 columns without gutters\r
-.col-1 { flex-basis: percentage(1/6); }\r
-.col-2 { flex-basis: percentage(2/6); }\r
-.col-3 { flex-basis: percentage(3/6); }\r
-.col-4 { flex-basis: percentage(4/6); }\r
-.col-5 { flex-basis: percentage(5/6); }\r
-.col-6 { flex-basis: percentage(6/6); }\r
+.col-1 {\r
+       flex-basis: percentage(1/6);\r
+}\r
+\r
+.col-2 {\r
+       flex-basis: percentage(2/6);\r
+}\r
+\r
+.col-3 {\r
+       flex-basis: percentage(3/6);\r
+}\r
+\r
+.col-4 {\r
+       flex-basis: percentage(4/6);\r
+}\r
+\r
+.col-5 {\r
+       flex-basis: percentage(5/6);\r
+}\r
+\r
+.col-6 {\r
+       flex-basis: percentage(6/6);\r
+}\r
+\r
+.intro {\r
+       background-size: 1680px auto;\r
+}
\ No newline at end of file

diff --git a/less/003-mixins.less b/less/003-mixins.less
index 99469621035dd22e216aa566a3d8886be2ebeeac..4234b35c3bd590af41ba834a46060e88f8554c27 100644 (file)
--- a/less/003-mixins.less
+++ b/less/003-mixins.less
@@ -43,6 +43,19 @@
        }
 }
 
+.border-button-fill(@border-color,@color-text) {
+       transition: all 200ms;
+
+       border-color: @border-color;
+       color: @border-color;
+
+       &:hover {
+               background-color:@border-color;
+               color: @color-text;
+       }
+}
+
+
 .background-button(@base-color) {
        transition: all 200ms;
 

diff --git a/less/220-exemples.less b/less/220-exemples.less
new file mode 100644 (file)
index 0000000..26cf80a
--- /dev/null
+++ b/less/220-exemples.less
@@ -0,0 +1,91 @@
+@import "000-imports";\r
+\r
+.exemples {\r
+       .publications {\r
+               a {\r
+                       &.empty {\r
+                               display: none;\r
+                               width: 0 !important;\r
+                               height: 0 !important;\r
+                       }\r
+                       display: inline-block;\r
+                       text-decoration: none;\r
+                       padding: 25px 30px;\r
+\r
+                       font-family: @opensans;\r
+                       font-size: 14px;\r
+                       position: relative;\r
+                       color: #343c44;\r
+\r
+                       .img {\r
+                               width: 80%;\r
+                               height: 55%;\r
+                               position: absolute;\r
+                               left: 10%;\r
+                               right: 10%;\r
+                               bottom: 10%;\r
+                               background-size: contain;\r
+                               background-position: 50% 100%;\r
+                       }\r
+\r
+                       h3 {\r
+                               font-family: @montserrat;\r
+                               font-size: 14px;\r
+                               font-weight: 400;\r
+                               text-transform: uppercase;\r
+                               line-height: 18px;\r
+                               margin-bottom:12px;\r
+                       }\r
+\r
+                       &:nth-of-type(even) {\r
+                               background-color: #fff;\r
+                       }\r
+                       &:nth-of-type(odd) {\r
+                               background-color: #f3f3f3;\r
+                       }\r
+\r
+                       button {\r
+                               background-color: transparent;\r
+                               color: #343c44;\r
+                               border: 0;\r
+                               text-transform: uppercase;\r
+                               font-family: @montserrat;\r
+                               font-weight: 300;\r
+                               font-size: 12px;\r
+                               float: right;\r
+                               line-height: 18px;\r
+                               margin-bottom: 50px;\r
+                               cursor: pointer;\r
+                       }\r
+\r
+                       &.featured {\r
+                               color: #fff;\r
+                               background-color: transparent;\r
+                               &:nth-of-type(odd) {\r
+                                       background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
+                                       button{\r
+                                               .border-button-fill(#fff,rgba(231, 92, 123, 1));\r
+                                       }\r
+                               }\r
+                               &:nth-child(7n+2) {\r
+                                       background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
+                                       button{\r
+                                               .border-button-fill(#fff,#f6786e);\r
+                                       }\r
+                               }\r
+                               img {\r
+                                       height: auto;\r
+                               }\r
+                               button{\r
+                                       color:#fff;\r
+                                       border:1px solid #fff;\r
+                                       padding:16px 20px;\r
+                                       margin-left:20px;\r
+                                       margin-top: 5px;\r
+\r
+\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+}
\ No newline at end of file