From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 28 Oct 2019 11:07:24 +0000 (+0000)
Subject: Fix #3165 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a7db08012fcada4c895800f3670a98cacd7d10f1;p=ccgm.git

Fix #3165 @0.5
---

diff --git a/js/research.js b/js/research.js
index 6b38887..923d951 100644
--- 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 44c152b..e7e4897 100644
--- 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;