From fcc03d1b807979d399d117610a3758a37a000a25 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Wed, 29 Jun 2016 18:47:45 +0000 Subject: [PATCH] frontend work | wip #487 @3 --- framework/application/forms/CMS/Agences.php | 2 +- framework/application/forms/CMS/Exemples.php | 10 +- .../application/forms/CMS/Exemplessub.php | 2 +- framework/application/forms/CMS/Faq.php | 2 +- .../application/forms/CMS/Fonctionnalites.php | 2 +- .../forms/CMS/Sub/Exemples/CategorySelect.php | 16 ++++ .../application/layouts/scripts/layout.phtml | 2 +- .../application/views/helpers/Exemples.php | 33 +++++-- .../application/views/helpers/IntroBlock.php | 10 +- .../views/scripts/templates/exemples.phtml | 4 +- js/220-exemples.js | 24 +++++ less/002-common.less | 59 +++++++++--- less/003-mixins.less | 13 +++ less/220-exemples.less | 91 +++++++++++++++++++ 14 files changed, 236 insertions(+), 34 deletions(-) create mode 100644 framework/application/forms/CMS/Sub/Exemples/CategorySelect.php create mode 100644 js/220-exemples.js create mode 100644 less/220-exemples.less diff --git a/framework/application/forms/CMS/Agences.php b/framework/application/forms/CMS/Agences.php index b762904..7722229 100644 --- a/framework/application/forms/CMS/Agences.php +++ b/framework/application/forms/CMS/Agences.php @@ -1,5 +1,5 @@ setLabel('Titre'); + $this->addElement($titre); + + $category = new Fluidbook_Form_CMS_Sub_Exemples_CategorySelect('category'); + $category->setLabel('Catégorie de références'); + $this->addElement($category); + $exemples = new Fluidbook_Form_CMS_Element_Exemples('exemples'); $exemples->setLabel('Gestion des exemples'); $this->addElement($exemples); diff --git a/framework/application/forms/CMS/Exemplessub.php b/framework/application/forms/CMS/Exemplessub.php index af4ddd2..93305e6 100644 --- a/framework/application/forms/CMS/Exemplessub.php +++ b/framework/application/forms/CMS/Exemplessub.php @@ -1,5 +1,5 @@ setBaseForm('Fluidbook_Form_CMS_Sub_Exemples_Category'); + } + +} \ No newline at end of file diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml index 2c0c166..5dc0c51 100644 --- 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 cb55b12..aae5468 100644 --- 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 { /** * @return string */ - public function exemples($category) { + public function exemples($category, $title) { + $this->headScript()->addScriptAndStyle('220-exemples'); + $this->headScript()->addMasonry(); $exemples = Fluidbook_Model_Reference::factory()->order('date', 'DESC')->find(); @@ -37,17 +39,28 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $featured = array_slice($featured, 0, $max_featured); $normal = array_slice($normal, 0, $max_normal); + $res = $this->htmlElement($title, 'h2', array('class' => 'title col-2')); - $res = ''; + $publications = ''; for ($i = 0; $i < $max_featured; $i++) { - $res .= $this->_publication($exemples[$featured[$i]], true); + if ($i % 2 == 0) { + $publications .= $this->_publication($exemples[$featured[$i]], true); + } for ($j = 0; $j < $normal_per_featured; $j++) { $k = ($i * $normal_per_featured) + $j; - $res .= $this->_publication($exemples[$normal[$k]], false); + if ($j == 2 && $i % 2 == 1) { + $publications .= $this->_publication($exemples[$featured[$i]], true); + } else if ($j == 2 && $i % 2 == 0) { + $publications .= $this->link('', '#', array('class' => 'empty')); + } + $publications .= $this->_publication($exemples[$normal[$k]], false); } + } - return $this->htmlElement($res, 'section', array('class' => "exemples")); + $res .= $this->htmlElement($publications, 'div', array('class' => 'publications col-6')); + + return $this->htmlElement($res, 'section', array('class' => "exemples content-wrapper grid wrap")); } /** @@ -57,11 +70,17 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { protected function _publication($f, $featured = false) { $f = $f->unserialize(); - $res = $this->htmlElement($f->getTitle(), 'h3'); + $res = ''; + $res .= $this->htmlElement(__('Voir le Fluidbook'), 'button', array('type' => 'button')); + $res .= $this->htmlElement($f->getTitle(), 'h3'); if ($featured) { $res .= $this->htmlElement($f->getText(), 'p'); } - $res .= $this->htmlElement(__('Voir le Fluidbook'), 'button', array('type' => 'button')); + + $res .= $this->htmlElement('', 'div', + array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($f->getImage(), $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');', + 'class' => 'img') + ); $attrs = array(); if ($featured) { $attrs['class'] = 'featured'; diff --git a/framework/application/views/helpers/IntroBlock.php b/framework/application/views/helpers/IntroBlock.php index 4b05ea0..628c66c 100644 --- 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 = '
'; + $res = '
'; $res .= '
'; $res .= '
'; diff --git a/framework/application/views/scripts/templates/exemples.phtml b/framework/application/views/scripts/templates/exemples.phtml index 80fc927..8341ac0 100644 --- a/framework/application/views/scripts/templates/exemples.phtml +++ b/framework/application/views/scripts/templates/exemples.phtml @@ -1,3 +1,3 @@ exemples(1); \ No newline at end of file +echo $this->introBlock($this->intro, ''); +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 index 0000000..890042e --- /dev/null +++ b/js/220-exemples.js @@ -0,0 +1,24 @@ +registerLoader(load_exemples); + +function load_exemples() { + $(window).on('cubeitresize', resizeExemples); + resizeExemples(); + + $(".publications").masonry({ + itemSelector: "a", + fitWidth: true, + columnWidth: "a:not(.featured)", + transitionDuration: 0, + }); + +} + +function resizeExemples() { + var ww = $(window).width() * 0.9; + $(".publications").css('width', ww); + $('.publications a.featured').css({width: (ww / 2), height: ww / 2}); + $('.publications a:not(.featured)').css({width: (ww / 4), height: ww / 4}); + $(".publications").masonry({ + itemSelector: "a", + }); +} diff --git a/less/002-common.less b/less/002-common.less index c45c5c4..753d6ba 100644 --- a/less/002-common.less +++ b/less/002-common.less @@ -3,6 +3,7 @@ html { box-sizing: border-box; } + *, *:before, *:after { box-sizing: inherit; } @@ -21,13 +22,15 @@ main { } // Main heading style -h1.title { - color: @color-text; - font-family: @playfair; - font-size: 60px; - font-weight: 400; - line-height: 1.3; - .divider(85px); +h1, h2 { + &.title { + color: @color-text; + font-family: @playfair; + font-size: 60px; + font-weight: 400; + line-height: 1.3; + .divider(85px); + } } a { @@ -49,9 +52,9 @@ a { min-width: @desktop-min-width; } -.cubeit-content{ +.cubeit-content { width: 90%; - margin:0 auto; + margin: 0 auto; } // Simple Flexbox Grid @@ -59,14 +62,40 @@ a { display: flex; padding-left: 5%; padding-right: 5%; + &.wrap { + flex-wrap: wrap; + } } + .col { flex: 1 0 auto; } + // Grid contains 6 columns without gutters -.col-1 { flex-basis: percentage(1/6); } -.col-2 { flex-basis: percentage(2/6); } -.col-3 { flex-basis: percentage(3/6); } -.col-4 { flex-basis: percentage(4/6); } -.col-5 { flex-basis: percentage(5/6); } -.col-6 { flex-basis: percentage(6/6); } +.col-1 { + flex-basis: percentage(1/6); +} + +.col-2 { + flex-basis: percentage(2/6); +} + +.col-3 { + flex-basis: percentage(3/6); +} + +.col-4 { + flex-basis: percentage(4/6); +} + +.col-5 { + flex-basis: percentage(5/6); +} + +.col-6 { + flex-basis: percentage(6/6); +} + +.intro { + background-size: 1680px auto; +} \ No newline at end of file diff --git a/less/003-mixins.less b/less/003-mixins.less index 9946962..4234b35 100644 --- 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 index 0000000..26cf80a --- /dev/null +++ b/less/220-exemples.less @@ -0,0 +1,91 @@ +@import "000-imports"; + +.exemples { + .publications { + a { + &.empty { + display: none; + width: 0 !important; + height: 0 !important; + } + display: inline-block; + text-decoration: none; + padding: 25px 30px; + + font-family: @opensans; + font-size: 14px; + position: relative; + color: #343c44; + + .img { + width: 80%; + height: 55%; + position: absolute; + left: 10%; + right: 10%; + bottom: 10%; + background-size: contain; + background-position: 50% 100%; + } + + h3 { + font-family: @montserrat; + font-size: 14px; + font-weight: 400; + text-transform: uppercase; + line-height: 18px; + margin-bottom:12px; + } + + &:nth-of-type(even) { + background-color: #fff; + } + &:nth-of-type(odd) { + background-color: #f3f3f3; + } + + button { + background-color: transparent; + color: #343c44; + border: 0; + text-transform: uppercase; + font-family: @montserrat; + font-weight: 300; + font-size: 12px; + float: right; + line-height: 18px; + margin-bottom: 50px; + cursor: pointer; + } + + &.featured { + color: #fff; + background-color: transparent; + &:nth-of-type(odd) { + background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%); + button{ + .border-button-fill(#fff,rgba(231, 92, 123, 1)); + } + } + &:nth-child(7n+2) { + background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); + button{ + .border-button-fill(#fff,#f6786e); + } + } + img { + height: auto; + } + button{ + color:#fff; + border:1px solid #fff; + padding:16px 20px; + margin-left:20px; + margin-top: 5px; + + + } + } + } + } +} \ No newline at end of file -- 2.39.5