Fix #3165 @0.5

diff --git a/js/research.js b/js/research.js
index 6b38887f150b14372773101fc5df0d01820d4104..923d9517c56cc97602266e91f75934ecfb424f1c 100644 (file)
--- a/js/research.js
+++ b/js/research.js
@@ -1,23 +1,19 @@
-TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_research();';
+window.onload = function() {
 
-function load_research() {
-
-  var maxHeight = 100, // 20px line height so 100 is 5 lines
-      more = 'Lire la suite',
+  var more = 'Lire la suite',
       less = 'Réduire';
 
   $('.study-description').each(function() {
-    var originalHeight = $(this).height();
+
+    // Get max-height from CSS (set here to avoid content shift before and after JS loads)
+    // There will still be a small movement when the toggle link is added but that is hard to avoid
+    var maxHeight = parseInt($(this).css('maxHeight'));
+
+    var originalHeight = $(this).find('> *').outerHeight(true);
 
     $(this).data('height', originalHeight); // Keep full height so we can animate to this when revealing
 
     if (originalHeight > maxHeight) {
-
-      $(this).css({
-        'maxHeight': maxHeight,
-        'overflow': 'hidden',
-        'transition': 'max-height 0.4s' // animate when max-height changes
-      });
       $(this).after('<a href="#" class="toggle-description" data-less="'+ less +'" data-more="'+ more +'">'+ more +'</a>')
     }
   });
@@ -35,8 +31,8 @@ function load_research() {
       $description.css('maxHeight', $description.data('height'));
     } else {
       $link.text($link.data('more'));
-      $description.css('maxHeight', maxHeight);
+      $description.attr('style', '');
     }
   });
 
-}
+};

diff --git a/less/research.less b/less/research.less
index 44c152bfc17afb6e5c2c91dbea429b719f7f6a05..e7e48974ea08cc5233800acf86efe9a54eefe670 100644 (file)
--- a/less/research.less
+++ b/less/research.less
@@ -45,6 +45,10 @@
   padding-bottom: 1.5em;
   border-bottom: 1px solid #0EA6DB;
   margin-bottom: 2em;
+
+  p {
+    margin-top: 0 !important;
+  }
 }
 
 .study {
@@ -56,10 +60,6 @@
   &-details {
     flex: 1 1 36%;
 
-    p {
-      margin-top: 0 !important;
-    }
-
     strong {
       color: #0EA6DB;
       font-weight: 500;
@@ -74,6 +74,12 @@
     margin-bottom: 0.75em;
   }
 
+  &-description {
+    overflow: hidden;
+    max-height: 100px; // 20px line height so 100 is 5 lines
+    transition: max-height 0.4s;
+  }
+
   &-contact {
     display: inline-block;
     background-color: #0EA6DB;