From: vincent@cubedesigners.com Date: Mon, 11 Jul 2016 17:12:51 +0000 (+0000) Subject: done #535 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b04047312ed06c574b5a5919f25c4e27034309c1;p=fluidbook-v3.git done #535 @4 --- diff --git a/framework/application/forms/CMS/Sub/Exemples/Category.php b/framework/application/forms/CMS/Sub/Exemples/Category.php index d5c2bb5..b7e401c 100644 --- a/framework/application/forms/CMS/Sub/Exemples/Category.php +++ b/framework/application/forms/CMS/Sub/Exemples/Category.php @@ -12,6 +12,10 @@ class Fluidbook_Form_CMS_Sub_Exemples_Category extends CubeIT_Form_List_Model { $title->setLabel('Nom'); $this->addElementLocalized($title, false); + $link = new Zend_Form_Element_Text('linklabel'); + $link->setLabel('Label du lien « voir d\'autres ... »'); + $this->addElementLocalized($link, false); + $sortorder = new CubeIT_Form_Element_Int('sortorder'); $sortorder->setLabel('Ordre'); $this->addElement($sortorder); diff --git a/framework/application/models/Reference/Category.php b/framework/application/models/Reference/Category.php index 8f38b6d..ebf6617 100644 --- a/framework/application/models/Reference/Category.php +++ b/framework/application/models/Reference/Category.php @@ -6,15 +6,17 @@ * Date: 24/06/2016 * Time: 16:38 */ -class Fluidbook_Model_Reference_Category extends CubeIT_Model_Data_Table{ +class Fluidbook_Model_Reference_Category extends CubeIT_Model_Data_Table { protected static $_table = 'exemples_categories'; protected $name; protected $sortorder; + protected $linklabel; public static function getSchema($schema) { $table = parent::getSchema($schema); $table->addColumn('name', 'text'); + $table->addColumn('linklabel', 'text'); $table->addColumn('sortorder', 'integer'); return $table; } diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php index c56db67..d122843 100644 --- a/framework/application/views/helpers/Exemples.php +++ b/framework/application/views/helpers/Exemples.php @@ -1,6 +1,10 @@ headScript()->addScriptAndStyle('220-exemples'); $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find(); + $this->_categories = Fluidbook_Model_Reference_Category::factory()->find(); $max_featured = floor($nb / 5); $normal_per_featured = 4; @@ -43,16 +48,16 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $publications = ''; for ($i = 0; $i < $max_featured; $i++) { if ($i % 2 == 0) { - $publications .= $this->_publication($exemples[$featured[$i]], true); + $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true); } for ($j = 0; $j < $normal_per_featured; $j++) { $k = ($i * $normal_per_featured) + $j; if ($j == 2 && $i % 2 == 1) { - $publications .= $this->_publication($exemples[$featured[$i]], true); + $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true); } else if ($j == 2 && $i % 2 == 0) { - $publications .= $this->link('', '#', array('class' => 'empty')); + $publications .= $this->htmlElement('', 'article', array('class' => 'empty')); } - $publications .= $this->_publication($exemples[$normal[$k]], false); + $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 4) + $j, false); } } @@ -66,19 +71,20 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { * @param $f Fluidbook_Model_Reference * @param bool $featured */ - protected function _publication($f, $featured = false) { + protected function _publication($f, $category, $i, $featured = false) { if (null === $f) { return; } $f = $f->unserialize(); $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'); } + $image = CubeIT_Util_Cms::extractFile($f->getImage()); if (!$image && $f->getFluidbookId()) { @@ -89,11 +95,40 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { 'class' => 'img') ); } - $attrs = array(); + $attrs = array('data-j' => ++$this->_j, 'data-i' => $i); if ($featured) { $attrs['class'] = 'featured'; } - return $this->link($res, $f->getUrl(), $attrs); + $res .= $this->_rollover($f, $category); + return $this->htmlElement($res, 'article', $attrs); + } + + protected function _rollover($f, $category) { + $res = ''; + if ($f->getUrl()) { + $res = $this->link(__('Voir le Fluidbook'), $f->getUrl(), array('class' => 'button')); + } + if ($category == 3) { + $firstCat = 0; + foreach ($f->getCategories() as $c) { + if ($c == 3) { + continue; + } + $firstCat = $c; + break; + } + if ($firstCat != 0 && isset($this->_categories[$firstCat])) { + $cat = $this->_categories[$firstCat]->unserialize(); + $pages = CubeIT_Util_Cms::findPagesByContent('category', $cat->getId()); + shuffle($pages); + + if (count($pages) > 0) { + $res .= $this->link($cat->getLinklabel(), 'internal:' . $pages[0], array('class' => 'others')); + } + } + + } + return $this->htmlElement($res, 'div', array('class' => 'more')); } } \ No newline at end of file diff --git a/js/220-exemples.js b/js/220-exemples.js index ed7c72a..cefccff 100644 --- a/js/220-exemples.js +++ b/js/220-exemples.js @@ -5,9 +5,9 @@ function load_exemples() { resizeExemples(); $(".publications").masonry({ - itemSelector: "a", + itemSelector: "article", fitWidth: true, - columnWidth: "a:not(.featured)", + columnWidth: "article:not(.featured)", transitionDuration: 0, }); @@ -17,10 +17,10 @@ function resizeExemples() { var ww = $('main').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 article.featured').css({width: (ww / 2), height: ww / 2}); + $('.publications article:not(.featured)').css({width: (ww / 4), height: ww / 4}); $(".publications").masonry({ - itemSelector: "a", + itemSelector: "article", }); @@ -28,7 +28,7 @@ function resizeExemples() { var w = parseInt($(this).data('width')); var h = parseInt($(this).data('height')); - var container = $(this).closest('a'); + var container = $(this).closest('article'); var cw = $(container).outerWidth() * 0.8; var ch = $(container).outerHeight() * 0.6; diff --git a/less/220-exemples.less b/less/220-exemples.less index e09f7e2..5fec862 100644 --- a/less/220-exemples.less +++ b/less/220-exemples.less @@ -2,7 +2,7 @@ .exemples { .publications { - a { + article { &.empty { display: none; width: 0 !important; @@ -15,7 +15,6 @@ font-family: @opensans; font-size: 14px; - position: relative; color: #343c44; .img { @@ -38,6 +37,11 @@ margin-bottom: 12px; } + p, h3 { + position: relative; + z-index: 4; + } + &:nth-of-type(even) { background-color: #fff; } @@ -45,7 +49,7 @@ background-color: @color-light-grey; } - button { + .button { background-color: transparent; color: #343c44; border: 0; @@ -53,14 +57,16 @@ font-family: @montserrat; font-weight: 300; font-size: 12px; - float: right; line-height: 18px; - margin-bottom: 50px; cursor: pointer; transition: @transition-time-buttons color; - &:hover { - color: @color-green; - } + float: none; + + margin-top: -27px; + display: inline-block; + + .border-button-fill(#fff, rgba(231, 92, 123, 1)); + .longarrow-button(20px, 40px, 18px); } &.featured { @@ -85,11 +91,42 @@ img { height: auto; } - button { - margin-left: 20px; - margin-top: 5px; - .border-button-fill(#fff, rgba(231, 92, 123, 1)); - .longarrow-button(20px, 40px, 18px); + + .more { + padding-top: 50%; + } + } + + .more { + display: none; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(52, 60, 68, .8); + color: #fff; + z-index: 3; + text-align: center; + padding-top: 45%; + a.others { + display: block; + color: #fff; + text-transform: uppercase; + font-family: @montserrat; + font-size: 12px; + font-weight: 300; + margin-top: 35px; + text-decoration: none; + } + } + + &:hover { + .more { + display: block; + } + p, h3 { + color: #ffffff; } } }