mirror_php/humhub
1
0
Fork 0
mirror of https://github.com/humhub/humhub.git synced 2025-01-17 14:18:27 +01:00
Code Issues Projects Releases Wiki Activity

Fix show-more gradient does not consider actual background color.

Browse Source
This commit is contained in:
buddh4 2020-02-18 13:24:03 +01:00
parent 72d7844dbb
commit e4a358b308
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/js/humhub/humhub.ui.showMore.js
View File

@ -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({