wip responsive #487 @1.5

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index d1228432867fea4fb725428667fc8693138a4773..575395c97be546f1ac54da2727afe195b58fb848 100644 (file)
--- 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\r
         */\r
        public function exemples($category, $title, $nb) {\r
-               $this->headScript()->addMasonry()->addJQueryTransform();\r
-               $this->headScript()->addScriptAndStyle('220-exemples');\r
+               $this->headScript()\r
+                       ->addMasonry()\r
+                       ->addJQueryTransform()\r
+                       ->addTinysort()\r
+                       ->addScriptAndStyle('220-exemples');\r
 \r
                $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find();\r
                $this->_categories = Fluidbook_Model_Reference_Category::factory()->find();\r
@@ -45,25 +48,26 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
 \r
                $res = $this->htmlElement($title, 'h2', array('class' => 'title col-2'));\r
 \r
+               $e = 0;\r
+\r
                $publications = '';\r
                for ($i = 0; $i < $max_featured; $i++) {\r
                        if ($i % 2 == 0) {\r
-                               $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true);\r
+                               $publications .= $this->_publication($exemples[$featured[$i]], $category, 1 + $i * 7, true);\r
                        }\r
                        for ($j = 0; $j < $normal_per_featured; $j++) {\r
                                $k = ($i * $normal_per_featured) + $j;\r
                                if ($j == 2 && $i % 2 == 1) {\r
-                                       $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true);\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'));\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 * 4) + $j, false);\r
+                               $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 6) + $j + 2 + $e, false);\r
                        }\r
-\r
                }\r
 \r
                $res .= $this->htmlElement($publications, 'div', array('class' => 'publications col-6'));\r
-\r
                return $this->htmlElement($res, 'section', array('class' => "exemples content-wrapper grid wrap"));\r
        }\r
 \r
@@ -84,7 +88,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                        $res .= $this->htmlElement($f->getText(), 'p');\r
                }\r
 \r
-\r
                $image = CubeIT_Util_Cms::extractFile($f->getImage());\r
 \r
                if (!$image && $f->getFluidbookId()) {\r

diff --git a/js/220-exemples.js b/js/220-exemples.js
index cefccff7b5986ccf9289d736cea5782d81475785..9dc69a86ad3550f99504cf31940249778185ee69 100644 (file)
--- a/js/220-exemples.js
+++ b/js/220-exemples.js
@@ -1,29 +1,49 @@
 registerLoader(load_exemples);\r
 \r
+var sort = '';\r
+\r
 function load_exemples() {\r
     $(window).on('cubeitresize', resizeExemples);\r
     resizeExemples();\r
-\r
-    $(".publications").masonry({\r
-        itemSelector: "article",\r
-        fitWidth: true,\r
-        columnWidth: "article:not(.featured)",\r
-        transitionDuration: 0,\r
-    });\r
-\r
 }\r
 \r
 function resizeExemples() {\r
-    var ww = $('main').width() * 0.9;\r
+    var ww = $(window).width();\r
+    var mw = Math.floor($('main').width() * 0.9 / 4) * 4;\r
+    var changeSort = false;\r
 \r
-    $(".publications").css('width', ww);\r
-    $('.publications article.featured').css({width: (ww / 2), height: ww / 2});\r
-    $('.publications article:not(.featured)').css({width: (ww / 4), height: ww / 4});\r
+    if (ww > 1280) {\r
+        if (sort != 'j') {\r
+            $('.publications>article').tsort({attr: 'data-j'});\r
+            sort = 'j';\r
+            changeSort = true;\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
+    } else {\r
+        if (sort != 'i') {\r
+            $('.publications>article').tsort({attr: 'data-i'});\r
+            sort = 'i';\r
+            changeSort = true;\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
+        $('.publications article').css({left: '', right: ''});\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
 \r
-\r
     $(".exemple-fluidbook").each(function () {\r
         var w = parseInt($(this).data('width'));\r
         var h = parseInt($(this).data('height'));\r
@@ -42,7 +62,6 @@ function resizeExemples() {
 \r
         var left = ((cw / 0.8) - w) / 2;\r
 \r
-\r
         $(this).css({width: w, height: h, left: left, fontSize: (w / 600) * 10});\r
     });\r
 }\r

diff --git a/less/001-variables.less b/less/001-variables.less
index 17c215ccd5ecbbce9388cbddfe571a16823f9e12..f442cca60bda281f3dda24a850a10f227e2ac689 100644 (file)
--- 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 5fec862197412ecf323c3eb5114100f5cab7be0e..eef29538c7129d154319de838e5e1b781caee0bd 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -17,6 +17,8 @@
                        font-size: 14px;\r
                        color: #343c44;\r
 \r
+                       width: 100px;\r
+\r
                        .img {\r
                                width: 80%;\r
                                height: 55%;\r
@@ -72,22 +74,49 @@
                        &.featured {\r
                                color: #fff;\r
                                background-color: transparent;\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
+                               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
+\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
                                }\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
+                               @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
+                                       }\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
                                                }\r
                                        }\r
                                }\r
+\r
                                img {\r
                                        height: auto;\r
                                }\r