From: vincent@cubedesigners.com Date: Tue, 12 Jul 2016 17:20:35 +0000 (+0000) Subject: wip responsive #487 @1.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d8aee0c90a2320efaab5dc0baf0de381eebd3e38;p=fluidbook-v3.git wip responsive #487 @1.5 --- diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php index d122843..575395c 100644 --- a/framework/application/views/helpers/Exemples.php +++ b/framework/application/views/helpers/Exemples.php @@ -9,8 +9,11 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { * @return string */ public function exemples($category, $title, $nb) { - $this->headScript()->addMasonry()->addJQueryTransform(); - $this->headScript()->addScriptAndStyle('220-exemples'); + $this->headScript() + ->addMasonry() + ->addJQueryTransform() + ->addTinysort() + ->addScriptAndStyle('220-exemples'); $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find(); $this->_categories = Fluidbook_Model_Reference_Category::factory()->find(); @@ -45,25 +48,26 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $res = $this->htmlElement($title, 'h2', array('class' => 'title col-2')); + $e = 0; + $publications = ''; for ($i = 0; $i < $max_featured; $i++) { if ($i % 2 == 0) { - $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true); + $publications .= $this->_publication($exemples[$featured[$i]], $category, 1 + $i * 7, 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]], $category, $i * 4, true); + $publications .= $this->_publication($exemples[$featured[$i]], $category, 1 + $i * 7, true); + $publications .= $this->htmlElement('', 'article', array('class' => 'empty', 'data-i' => ($i * 7) + $j + 2 + $e++)); } else if ($j == 2 && $i % 2 == 0) { - $publications .= $this->htmlElement('', 'article', array('class' => 'empty')); + $publications .= $this->htmlElement('', 'article', array('class' => 'empty', 'data-j' => ++$this->_j, 'data-i' => ($i * 7) + $j + 2 + $e++)); } - $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 4) + $j, false); + $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 6) + $j + 2 + $e, false); } - } $res .= $this->htmlElement($publications, 'div', array('class' => 'publications col-6')); - return $this->htmlElement($res, 'section', array('class' => "exemples content-wrapper grid wrap")); } @@ -84,7 +88,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $res .= $this->htmlElement($f->getText(), 'p'); } - $image = CubeIT_Util_Cms::extractFile($f->getImage()); if (!$image && $f->getFluidbookId()) { diff --git a/js/220-exemples.js b/js/220-exemples.js index cefccff..9dc69a8 100644 --- a/js/220-exemples.js +++ b/js/220-exemples.js @@ -1,29 +1,49 @@ registerLoader(load_exemples); +var sort = ''; + function load_exemples() { $(window).on('cubeitresize', resizeExemples); resizeExemples(); - - $(".publications").masonry({ - itemSelector: "article", - fitWidth: true, - columnWidth: "article:not(.featured)", - transitionDuration: 0, - }); - } function resizeExemples() { - var ww = $('main').width() * 0.9; + var ww = $(window).width(); + var mw = Math.floor($('main').width() * 0.9 / 4) * 4; + var changeSort = false; - $(".publications").css('width', ww); - $('.publications article.featured').css({width: (ww / 2), height: ww / 2}); - $('.publications article:not(.featured)').css({width: (ww / 4), height: ww / 4}); + if (ww > 1280) { + if (sort != 'j') { + $('.publications>article').tsort({attr: 'data-j'}); + sort = 'j'; + changeSort = true; + } + $('.publications article.featured').css({width: (mw / 2), height: mw / 2}); + $('.publications article:not(.featured)').css({width: (mw / 4), height: mw / 4}); + } else { + if (sort != 'i') { + $('.publications>article').tsort({attr: 'data-i'}); + sort = 'i'; + changeSort = true; + } + $('.publications article.featured').css({width: mw, height: mw}); + $('.publications article:not(.featured)').css({width: (mw / 2), height: mw / 2,}); + } + + if (changeSort) { + fb('new sort ' + sort) + $('.publications article').css({left: '', right: ''}); + } + + + $(".publications").css('width', mw); $(".publications").masonry({ itemSelector: "article", + fitWidth: true, + transitionDuration: 0, + columnWidth: "article:not(.featured)", }); - $(".exemple-fluidbook").each(function () { var w = parseInt($(this).data('width')); var h = parseInt($(this).data('height')); @@ -42,7 +62,6 @@ function resizeExemples() { var left = ((cw / 0.8) - w) / 2; - $(this).css({width: w, height: h, left: left, fontSize: (w / 600) * 10}); }); } diff --git a/less/001-variables.less b/less/001-variables.less index 17c215c..f442cca 100644 --- a/less/001-variables.less +++ b/less/001-variables.less @@ -30,6 +30,7 @@ @transition-time-buttons: 200ms; //-- Break points +@s1280: ~"(min-width: 1280px)"; @m1280: ~"(max-width: 1280px)"; @m1024: ~"(max-width: 1024px)"; @m900: ~"(max-width: 900px)"; diff --git a/less/220-exemples.less b/less/220-exemples.less index 5fec862..eef2953 100644 --- a/less/220-exemples.less +++ b/less/220-exemples.less @@ -17,6 +17,8 @@ font-size: 14px; color: #343c44; + width: 100px; + .img { width: 80%; height: 55%; @@ -72,22 +74,49 @@ &.featured { color: #fff; background-color: transparent; - &:nth-of-type(11n+1) { - background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%); - .exemple-fluidbook { - .shadow { - background-image: url("/images/exemples/publications/shadow-rose.png"); + + width: 200px; + + @media @s1280 { + &:nth-of-type(11n+1) { + background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-rose.png"); + } + } + } + + &:nth-child(11n+9) { + background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-orange.png"); + } } } } - &:nth-child(11n+9) { - background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); - .exemple-fluidbook { - .shadow { - background-image: url("/images/exemples/publications/shadow-orange.png"); + + @media @m1280 { + &:nth-of-type(12n+1) { + background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-rose.png"); + } + } + } + + &:nth-child(12n+7) { + background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-orange.png"); + } } } } + img { height: auto; }