From 25e8f13d56905a4085cf82933e4b15add1787d96 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Wed, 13 Jul 2016 18:19:53 +0000 Subject: [PATCH] done #487 @5 --- .../application/views/helpers/Exemples.php | 7 +- js/220-exemples.js | 30 ++-- less/220-exemples.less | 146 ++++++++++++------ 3 files changed, 120 insertions(+), 63 deletions(-) diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php index 575395c..196e634 100644 --- a/framework/application/views/helpers/Exemples.php +++ b/framework/application/views/helpers/Exemples.php @@ -59,11 +59,8 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $k = ($i * $normal_per_featured) + $j; if ($j == 2 && $i % 2 == 1) { $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', 'data-j' => ++$this->_j, 'data-i' => ($i * 7) + $j + 2 + $e++)); } - $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 6) + $j + 2 + $e, false); + $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 7) + $j + 2, false); } } @@ -101,6 +98,8 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $attrs = array('data-j' => ++$this->_j, 'data-i' => $i); if ($featured) { $attrs['class'] = 'featured'; + } else { + $attrs['class'] = 'no-featured'; } $res .= $this->_rollover($f, $category); diff --git a/js/220-exemples.js b/js/220-exemples.js index 9dc69a8..83e72f6 100644 --- a/js/220-exemples.js +++ b/js/220-exemples.js @@ -12,11 +12,12 @@ function resizeExemples() { var mw = Math.floor($('main').width() * 0.9 / 4) * 4; var changeSort = false; - if (ww > 1280) { + if (ww > 1100) { if (sort != 'j') { $('.publications>article').tsort({attr: 'data-j'}); sort = 'j'; changeSort = true; + $(".publications").addClass('large').removeClass('small'); } $('.publications article.featured').css({width: (mw / 2), height: mw / 2}); $('.publications article:not(.featured)').css({width: (mw / 4), height: mw / 4}); @@ -25,24 +26,33 @@ function resizeExemples() { $('.publications>article').tsort({attr: 'data-i'}); sort = 'i'; changeSort = true; + $(".publications").addClass('small').removeClass('large'); } $('.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) + try { + $(".publications").css('visibility', 'hidden').masonry('destroy'); + } catch (e) { + + } + $('.publications article').css({left: '', right: ''}); + setTimeout(function () { + resizeExemples(); + }, 10); + return; } - - $(".publications").css('width', mw); - $(".publications").masonry({ - itemSelector: "article", - fitWidth: true, - transitionDuration: 0, - columnWidth: "article:not(.featured)", - }); + $(".publications").css({width: mw, visibility: 'visible'}) + .masonry({ + itemSelector: "article", + fitWidth: true, + transitionDuration: 0, + columnWidth: "article:not(.featured)", + }); $(".exemple-fluidbook").each(function () { var w = parseInt($(this).data('width')); diff --git a/less/220-exemples.less b/less/220-exemples.less index eef2953..0848431 100644 --- a/less/220-exemples.less +++ b/less/220-exemples.less @@ -12,13 +12,16 @@ text-decoration: none; padding: 25px 30px; position: relative; - + background-color: #fff; font-family: @opensans; - font-size: 14px; color: #343c44; width: 100px; + @media @m640 { + padding: 10px 15px; + } + .img { width: 80%; height: 55%; @@ -35,8 +38,12 @@ font-size: 14px; font-weight: 400; text-transform: uppercase; - line-height: 18px; - margin-bottom: 12px; + line-height: 1.3em; + margin-bottom: 0.85em; + + @media @m640 { + font-size: 12px; + } } p, h3 { @@ -44,13 +51,6 @@ z-index: 4; } - &:nth-of-type(even) { - background-color: #fff; - } - &:nth-of-type(odd) { - background-color: @color-light-grey; - } - .button { background-color: transparent; color: #343c44; @@ -74,55 +74,41 @@ &.featured { color: #fff; background-color: transparent; - 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"); - } - } - } + @media @m640 { + padding: 25px 30px; + } - &:nth-child(11n+9) { - background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); - .exemple-fluidbook { - .shadow { - background-image: url("/images/exemples/publications/shadow-orange.png"); - } - } - } + img { + height: auto; } - @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"); - } - } + .more { + padding-top: 50%; + @media @m640 { + padding-top: 60%; } - - &:nth-child(12n+7) { - background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); - .exemple-fluidbook { - .shadow { - background-image: url("/images/exemples/publications/shadow-orange.png"); - } + a.others { + @media @m640 { + display: none; } } } + } - img { - height: auto; - } - + &.no-featured { .more { - padding-top: 50%; + .button { + @media @m640 { + padding: 0px !important; + border: 0; + background-color: transparent !important; + &:after { + display: none; + } + } + } } } @@ -138,6 +124,9 @@ z-index: 3; text-align: center; padding-top: 45%; + @media @m640 { + padding-top: 55%; + } a.others { display: block; color: #fff; @@ -147,6 +136,9 @@ font-weight: 300; margin-top: 35px; text-decoration: none; + @media @m640 { + display: none; + } } } @@ -159,7 +151,63 @@ } } } + + &.large { + article { + &:nth-of-type(10n+3), &:nth-of-type(10n+4), &:nth-of-type(10n+7), &:nth-of-type(10n+9) { + background-color: @color-light-grey; + } + + &.featured { + &:nth-of-type(10n+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(10n+8) { + background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-orange.png"); + } + } + } + } + } + } + + &.small { + article { + &:nth-of-type(5n+3), &:nth-of-type(5n+4) { + background-color: @color-light-grey; + } + &.featured { + &:nth-of-type(10n+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(10n+6) { + background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); + .exemple-fluidbook { + .shadow { + background-image: url("/images/exemples/publications/shadow-orange.png"); + } + } + } + } + } + } } + } .exemple-fluidbook { -- 2.39.5