From e4a358b308763fe746228f229ff3d6c248670955 Mon Sep 17 00:00:00 2001
From: buddh4 <julian.harrer@humhub.com>
Date: Tue, 18 Feb 2020 13:24:03 +0100
Subject: [PATCH] Fix show-more gradient does not consider actual background
 color.

---
 static/js/humhub/humhub.ui.showMore.js | 32 +++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/static/js/humhub/humhub.ui.showMore.js b/static/js/humhub/humhub.ui.showMore.js
index 1ca4502dfc..8a96866932 100644
--- a/static/js/humhub/humhub.ui.showMore.js
+++ b/static/js/humhub/humhub.ui.showMore.js
@@ -40,6 +40,7 @@ humhub.module('ui.showMore', function (module, require, $) {
                 this.$.after($(module.templates.showMore));
                 this.$collapseButton = this.$.siblings('.showMore');
                 this.$gradient = this.$.siblings('.showMoreGradient');
+                this.$gradient.children().css({background: 'linear-gradient(rgba(251,251,251,0), '+determineBackground(this.$)+')'});
             }
 
             // Init collapse button
@@ -61,6 +62,35 @@ humhub.module('ui.showMore', function (module, require, $) {
         }
     };
 
+    var determineBackground = function($node) {
+        var bc;
+        var defColor = '#ffff';
+
+        if(!$node || !$node.length) {
+            return defColor;
+        }
+
+        while (isTransparent(bc = $node.css("background-color"))) {
+            if ($node.is("body")) {
+                return defColor;
+            }
+            $node = $node.parent();
+        }
+
+        return bc;
+    };
+
+    var isTransparent = function(color) {
+        switch ((color || "").replace(/\s+/g, '').toLowerCase()) {
+            case "transparent":
+            case "":
+            case "rgba(0,0,0,0)":
+                return true;
+            default:
+                return false;
+        }
+    };
+
     CollapseContent.prototype.collapse = function () {
         this.$.css({'display': 'block', 'max-height': this.collapseAt + 'px'});
         this.$collapseButton.html('<i class="fa fa-arrow-down"></i> ' + this.options.readMoreText);
@@ -84,7 +114,7 @@ humhub.module('ui.showMore', function (module, require, $) {
     };
 
     module.templates = {
-        showMore: '<div class="showMoreGradient" style="position:relative;cursor:pointer"><div style="bottom: 0;height: 40px;position: absolute;background: linear-gradient(rgba(251,251,251,0), #ffff);z-index: 30;width: 100%;"></div></div><a  class="showMore" href="#" style="display:block;margin: 5px 0;"></a>'
+        showMore: '<div class="showMoreGradient" style="position:relative;cursor:pointer"><div style="bottom: 0;height: 40px;position: absolute;z-index: 30;width: 100%;"></div></div><a  class="showMore" href="#" style="display:block;margin: 5px 0;"></a>'
     };
 
     module.export({