Fix Masonry error on mobile and fix #587 @2

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index c7a1cf9bda71b9e59f73afd40c9e9bcdc6b7eab3..82d6a54cc763baa398a66453dcbfe54d869e49ff 100644 (file)
--- a/framework/application/views/helpers/Exemples.php
+++ b/framework/application/views/helpers/Exemples.php
@@ -13,6 +13,7 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                        ->addMasonry()\r
                        ->addJQueryTransform()\r
                        ->addTinysort()\r
+            ->addDotDotDot()\r
                        ->addScriptAndStyle('220-exemples');\r
 \r
                $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find();\r
@@ -95,7 +96,7 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $res .= $this->htmlElement($f->getTitle(), 'h3');\r
                if ($featured && !is_array($f->getText())) {\r
 \r
-                       $res .= $this->htmlElement($f->getText(), 'p');\r
+                       $res .= $this->htmlElement($f->getText(), 'p', ['class' => 'feature-description']);\r
                }\r
 \r
                $image = CubeIT_Util_Cms::extractFile($f->getImage());\r

diff --git a/js/220-exemples.js b/js/220-exemples.js
index e5e10eefca576bdfdbeae692eee7bea6bb247ae9..b9ff7789a8c52d5d65ba33f1d84c562db98475f1 100644 (file)
--- a/js/220-exemples.js
+++ b/js/220-exemples.js
@@ -1,8 +1,11 @@
-registerLoader(load_exemples);\r
+registerLoader(load_exemples, true);\r
 \r
 var sort = '';\r
 \r
 function load_exemples() {\r
+\r
+    $('.feature-description').dotdotdot({});\r
+\r
     $(window).on('fluidbookresize', resizeExemples);\r
     resizeExemples();\r
 }\r
@@ -11,6 +14,7 @@ function resizeExemples() {
     var ww = $(window).width();\r
     var mw = Math.floor($('main').width() * 0.9 / 4) * 4;\r
     var changeSort = false;\r
+    var msnry;\r
 \r
     if (ww > 1100) {\r
         if (sort != 'j') {\r
@@ -34,7 +38,12 @@ function resizeExemples() {
 \r
     if (changeSort) {\r
         try {\r
-            $(".publications").css('visibility', 'hidden').masonry('destroy');\r
+            $('.publications').css('visibility', 'hidden');\r
+\r
+            if (msnry) {\r
+                $('.publications').masonry('destroy');\r
+            }\r
+\r
         } catch (e) {\r
             \r
         }\r
@@ -46,7 +55,7 @@ function resizeExemples() {
         return;\r
     }\r
 \r
-    $(".publications").css({width: mw, visibility: 'visible'})\r
+    msnry = $(".publications").css({width: mw, visibility: 'visible'})\r
         .masonry({\r
             itemSelector: "article",\r
             fitWidth: true,\r
@@ -74,4 +83,7 @@ function resizeExemples() {
 \r
         $(this).css({width: w, height: h, left: left, fontSize: (w / 600) * 10});\r
     });\r
+\r
+    // Update ellipsis\r
+    $('.feature-description').trigger('update.dot');\r
 }\r

diff --git a/less/220-exemples.less b/less/220-exemples.less
index d23f1ae4bd8cc870aeed8d1978e14147128dae69..efd53792113d551e465662999cbdbe5f139532d0 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -80,6 +80,11 @@
                                        padding: 25px 30px;\r
                                }\r
 \r
+                               .feature-description {\r
+                                       max-height: 21%;\r
+                                       overflow: hidden; // jQueryDotDotDot should handle the text but this is a fallback\r
+                               }\r
+\r
                                img {\r
                                        height: auto;\r
                                }\r