done #487 @5

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index 575395c97be546f1ac54da2727afe195b58fb848..196e63416fb660cf669587a2a4c9b0fbb291de34 100644 (file)
--- 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;\r
                                if ($j == 2 && $i % 2 == 1) {\r
                                        $publications .= $this->_publication($exemples[$featured[$i]], $category, 1 + $i * 7, true);\r
-                                       $publications .= $this->htmlElement('', 'article', array('class' => 'empty', 'data-i' => ($i * 7) + $j + 2 + $e++));\r
-                               } else if ($j == 2 && $i % 2 == 0) {\r
-                                       $publications .= $this->htmlElement('', 'article', array('class' => 'empty', 'data-j' => ++$this->_j, 'data-i' => ($i * 7) + $j + 2 + $e++));\r
                                }\r
-                               $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 6) + $j + 2 + $e, false);\r
+                               $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 7) + $j + 2, false);\r
                        }\r
                }\r
 \r
@@ -101,6 +98,8 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $attrs = array('data-j' => ++$this->_j, 'data-i' => $i);\r
                if ($featured) {\r
                        $attrs['class'] = 'featured';\r
+               } else {\r
+                       $attrs['class'] = 'no-featured';\r
                }\r
 \r
                $res .= $this->_rollover($f, $category);\r

diff --git a/js/220-exemples.js b/js/220-exemples.js
index 9dc69a86ad3550f99504cf31940249778185ee69..83e72f670ea8bc81eb6e81af9c11278195b95011 100644 (file)
--- 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;\r
     var changeSort = false;\r
 \r
-    if (ww > 1280) {\r
+    if (ww > 1100) {\r
         if (sort != 'j') {\r
             $('.publications>article').tsort({attr: 'data-j'});\r
             sort = 'j';\r
             changeSort = true;\r
+            $(".publications").addClass('large').removeClass('small');\r
         }\r
         $('.publications article.featured').css({width: (mw / 2), height: mw / 2});\r
         $('.publications article:not(.featured)').css({width: (mw / 4), height: mw / 4});\r
@@ -25,24 +26,33 @@ function resizeExemples() {
             $('.publications>article').tsort({attr: 'data-i'});\r
             sort = 'i';\r
             changeSort = true;\r
+            $(".publications").addClass('small').removeClass('large');\r
         }\r
         $('.publications article.featured').css({width: mw, height: mw});\r
         $('.publications article:not(.featured)').css({width: (mw / 2), height: mw / 2,});\r
     }\r
 \r
     if (changeSort) {\r
-        fb('new sort ' + sort)\r
+        try {\r
+            $(".publications").css('visibility', 'hidden').masonry('destroy');\r
+        } catch (e) {\r
+            \r
+        }\r
+\r
         $('.publications article').css({left: '', right: ''});\r
+        setTimeout(function () {\r
+            resizeExemples();\r
+        }, 10);\r
+        return;\r
     }\r
 \r
-\r
-    $(".publications").css('width', mw);\r
-    $(".publications").masonry({\r
-        itemSelector: "article",\r
-        fitWidth: true,\r
-        transitionDuration: 0,\r
-        columnWidth: "article:not(.featured)",\r
-    });\r
+    $(".publications").css({width: mw, visibility: 'visible'})\r
+        .masonry({\r
+            itemSelector: "article",\r
+            fitWidth: true,\r
+            transitionDuration: 0,\r
+            columnWidth: "article:not(.featured)",\r
+        });\r
 \r
     $(".exemple-fluidbook").each(function () {\r
         var w = parseInt($(this).data('width'));\r

diff --git a/less/220-exemples.less b/less/220-exemples.less
index eef29538c7129d154319de838e5e1b781caee0bd..0848431ec93304bbee30cdfc83d5ee0e96be074e 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -12,13 +12,16 @@
                        text-decoration: none;\r
                        padding: 25px 30px;\r
                        position: relative;\r
-\r
+                       background-color: #fff;\r
                        font-family: @opensans;\r
-                       font-size: 14px;\r
                        color: #343c44;\r
 \r
                        width: 100px;\r
 \r
+                       @media @m640 {\r
+                               padding: 10px 15px;\r
+                       }\r
+\r
                        .img {\r
                                width: 80%;\r
                                height: 55%;\r
@@ -35,8 +38,12 @@
                                font-size: 14px;\r
                                font-weight: 400;\r
                                text-transform: uppercase;\r
-                               line-height: 18px;\r
-                               margin-bottom: 12px;\r
+                               line-height: 1.3em;\r
+                               margin-bottom: 0.85em;\r
+\r
+                               @media @m640 {\r
+                                       font-size: 12px;\r
+                               }\r
                        }\r
 \r
                        p, h3 {\r
@@ -44,13 +51,6 @@
                                z-index: 4;\r
                        }\r
 \r
-                       &:nth-of-type(even) {\r
-                               background-color: #fff;\r
-                       }\r
-                       &:nth-of-type(odd) {\r
-                               background-color: @color-light-grey;\r
-                       }\r
-\r
                        .button {\r
                                background-color: transparent;\r
                                color: #343c44;\r
@@ -74,55 +74,41 @@
                        &.featured {\r
                                color: #fff;\r
                                background-color: transparent;\r
-\r
                                width: 200px;\r
 \r
-                               @media @s1280 {\r
-                                       &:nth-of-type(11n+1) {\r
-                                               background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
-                                               .exemple-fluidbook {\r
-                                                       .shadow {\r
-                                                               background-image: url("/images/exemples/publications/shadow-rose.png");\r
-                                                       }\r
-                                               }\r
-                                       }\r
+                               @media @m640 {\r
+                                       padding: 25px 30px;\r
+                               }\r
 \r
-                                       &:nth-child(11n+9) {\r
-                                               background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
-                                               .exemple-fluidbook {\r
-                                                       .shadow {\r
-                                                               background-image: url("/images/exemples/publications/shadow-orange.png");\r
-                                                       }\r
-                                               }\r
-                                       }\r
+                               img {\r
+                                       height: auto;\r
                                }\r
 \r
-                               @media @m1280 {\r
-                                       &:nth-of-type(12n+1) {\r
-                                               background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
-                                               .exemple-fluidbook {\r
-                                                       .shadow {\r
-                                                               background-image: url("/images/exemples/publications/shadow-rose.png");\r
-                                                       }\r
-                                               }\r
+                               .more {\r
+                                       padding-top: 50%;\r
+                                       @media @m640 {\r
+                                               padding-top: 60%;\r
                                        }\r
-\r
-                                       &:nth-child(12n+7) {\r
-                                               background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
-                                               .exemple-fluidbook {\r
-                                                       .shadow {\r
-                                                               background-image: url("/images/exemples/publications/shadow-orange.png");\r
-                                                       }\r
+                                       a.others {\r
+                                               @media @m640 {\r
+                                                       display: none;\r
                                                }\r
                                        }\r
                                }\r
+                       }\r
 \r
-                               img {\r
-                                       height: auto;\r
-                               }\r
-\r
+                       &.no-featured {\r
                                .more {\r
-                                       padding-top: 50%;\r
+                                       .button {\r
+                                               @media @m640 {\r
+                                                       padding: 0px !important;\r
+                                                       border: 0;\r
+                                                       background-color: transparent !important;\r
+                                                       &:after {\r
+                                                               display: none;\r
+                                                       }\r
+                                               }\r
+                                       }\r
                                }\r
                        }\r
 \r
@@ -138,6 +124,9 @@
                                z-index: 3;\r
                                text-align: center;\r
                                padding-top: 45%;\r
+                               @media @m640 {\r
+                                       padding-top: 55%;\r
+                               }\r
                                a.others {\r
                                        display: block;\r
                                        color: #fff;\r
@@ -147,6 +136,9 @@
                                        font-weight: 300;\r
                                        margin-top: 35px;\r
                                        text-decoration: none;\r
+                                       @media @m640 {\r
+                                               display: none;\r
+                                       }\r
                                }\r
                        }\r
 \r
@@ -159,7 +151,63 @@
                                }\r
                        }\r
                }\r
+\r
+               &.large {\r
+                       article {\r
+                               &:nth-of-type(10n+3), &:nth-of-type(10n+4), &:nth-of-type(10n+7), &:nth-of-type(10n+9) {\r
+                                       background-color: @color-light-grey;\r
+                               }\r
+\r
+                               &.featured {\r
+                                       &:nth-of-type(10n+1) {\r
+                                               background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
+                                               .exemple-fluidbook {\r
+                                                       .shadow {\r
+                                                               background-image: url("/images/exemples/publications/shadow-rose.png");\r
+                                                       }\r
+                                               }\r
+                                       }\r
+\r
+                                       &:nth-child(10n+8) {\r
+                                               background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
+                                               .exemple-fluidbook {\r
+                                                       .shadow {\r
+                                                               background-image: url("/images/exemples/publications/shadow-orange.png");\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               &.small {\r
+                       article {\r
+                               &:nth-of-type(5n+3), &:nth-of-type(5n+4) {\r
+                                       background-color: @color-light-grey;\r
+                               }\r
+                               &.featured {\r
+                                       &:nth-of-type(10n+1) {\r
+                                               background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
+                                               .exemple-fluidbook {\r
+                                                       .shadow {\r
+                                                               background-image: url("/images/exemples/publications/shadow-rose.png");\r
+                                                       }\r
+                                               }\r
+                                       }\r
+\r
+                                       &:nth-child(10n+6) {\r
+                                               background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
+                                               .exemple-fluidbook {\r
+                                                       .shadow {\r
+                                                               background-image: url("/images/exemples/publications/shadow-orange.png");\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
        }\r
+\r
 }\r
 \r
 .exemple-fluidbook {\r