Add description toggle to info page

* Fixes #1546
This commit is contained in:
JonnyWong16 2021-11-13 21:53:32 -08:00
parent 98d02d0b89
commit 876741b40b
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
3 changed files with 44 additions and 8 deletions

View file

@ -1830,15 +1830,29 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
max-height: 15px;
margin: 0 5px;
}
.summary-content-summary {
.summary-content-text {
overflow: hidden;
color: #eee;
float: left;
position: relative;
clear: both;
height: auto;
max-height: 160px;
padding-bottom: 0px;
padding-bottom: 0;
}
.summary-content-tagline {
font-weight: bold;
}
.summary-content-summary {
height: 60px;
}
.summary-toggle {
display: none;
margin-top: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.summary-toggle a {
color: #999;
}
.summary-content-people-wrapper {
margin-right: 20px;

View file

@ -402,12 +402,15 @@ DOCUMENTATION :: END
</div>
</div>
% if data['tagline']:
<div class="summary-content-summary">
<p><strong> ${data['tagline']} </strong></p>
<div class="summary-content-text summary-content-tagline">
<p>${data['tagline']}</p>
</div>
% endif
<div class="summary-content-summary">
<p> ${data['summary'] | br, n} </p>
<div class="summary-content-text summary-content-summary">
<p>${data['summary'] | br, n}</p>
</div>
<div class="summary-content-text summary-toggle">
<a href="#" class="show-more">Read more &nbsp;<i class="fa fa-chevron-down"></i></a>
</div>
</div>
</div>
@ -997,6 +1000,21 @@ DOCUMENTATION :: END
return '<div class="channel-thumbnail" style="background-image: url(' + $(this).data('img') + ');" />';
}
});
$('.summary-content-summary').hasScrollBar() ? $('.summary-toggle').show() : $('.summary-toggle').hide();
$('.summary-toggle a').on('click', function() {
var $this = $(this);
var $content = $this.parent().prev('div.summary-content-summary');
if ($this.hasClass('show-more')) {
$this.html('Read less &nbsp;<i class="fa fa-chevron-up"></i>').toggleClass('show-more').toggleClass('show-less');
$content.animate({'height': $content[0].scrollHeight});
} else {
$this.html('Read more &nbsp;<i class="fa fa-chevron-down"></i>').toggleClass('show-more').toggleClass('show-less');
$content.animate({'height': '60px'});
}
});
</script>
% if _session['user_group'] == 'admin':
<script>

View file

@ -926,3 +926,7 @@ $('.modal').on('hide.bs.modal', function (e) {
return false;
}
});
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.get(0).clientHeight;
}