1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-05 19:42:38 +02:00

Show more/less on big video description

This commit is contained in:
Daniel 2021-07-26 14:24:03 -03:00
parent 4511bef455
commit 4aa18d55f7
5 changed files with 67 additions and 54 deletions

View file

@ -162,14 +162,18 @@ if ($obj->BigVideo && empty($_GET['showOnly'])) {
title="<?php echo $videoRow['title']; ?>">
<strong><?php echo $videoRow['title']; ?></strong>
</a>
<div class="mainAreaDescriptionContainer">
<p class="mainAreaDescription" itemprop="description"><?php
if (strpos($videoRow['description'], '<br') !== false || strpos($videoRow['description'], '<p') !== false) {
echo $videoRow['description'];
} else {
echo nl2br(textToLink(htmlentities($videoRow['description'])));
}
?></p>
<div class="descriptionArea">
<div class="descriptionAreaPreContent">
<div class="descriptionAreaContent">
<?php
echo Video::htmlDescription($videoRow['description']);
?>
</div>
</div>
<button onclick="$(this).closest('.descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default descriptionAreaShowMoreBtn" style="display: none; ">
<span class="showMore"><i class="fas fa-caret-down"></i> <?php echo __("Show More"); ?></span>
<span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span>
</button>
</div>
<div class="text-muted galeryDetails">
<div>

View file

@ -1173,3 +1173,33 @@ li.dropdown-submenu > ul > li > a{
a:hover{
text-decoration: none;
}
.descriptionArea .descriptionAreaPreContent{
max-height: 200px;
overflow: hidden;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
.descriptionAreaPreContent{
margin-bottom: 10px;
}
.descriptionArea.expanded .descriptionAreaPreContent{
max-height: 1500px;
overflow: auto;
transition: max-height 0.25s ease-in;
}
.descriptionAreaShowMoreBtn{
margin-top: -10px;
}
.descriptionArea .showMore{
display: block;
}
.descriptionArea .showLess{
display: none;
}
.descriptionArea.expanded .showMore{
display: none;
}
.descriptionArea.expanded .showLess{
display: block;
}

View file

@ -1212,7 +1212,21 @@ function tabsCategoryDocumentHeightChanged() {
return false;
}
function checkDescriptionArea(){
$(".descriptionArea").each(function (index) {
if ($(this).height() < $(this).find('.descriptionAreaContent').height()) {
$(this).find('.descriptionAreaShowMoreBtn').show();
}
});
}
$(document).ready(function () {
checkDescriptionArea();
setInterval(function(){// check for the carousel
checkDescriptionArea();
},3000);
Cookies.set('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone, {
path: '/',
expires: 365

View file

@ -333,38 +333,6 @@ if (!empty($video['users_id']) && User::hasBlockedUser($video['users_id'])) {
$modeYouTubeTimeLog['After head'] = microtime(true) - $modeYouTubeTime;
$modeYouTubeTime = microtime(true);
?>
<style>
#descriptionArea #descriptionAreaPreContent{
max-height: 200px;
overflow: hidden;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
#descriptionAreaPreContent{
margin-bottom: 30px;
}
#descriptionArea.expanded #descriptionAreaPreContent{
max-height: 1500px;
overflow: auto;
transition: max-height 0.25s ease-in;
}
#descriptionAreaShowMoreBtn{
position: absolute;
bottom: 0;
}
#descriptionArea .showMore{
display: block;
}
#descriptionArea .showLess{
display: none;
}
#descriptionArea.expanded .showMore{
display: none;
}
#descriptionArea.expanded .showLess{
display: block;
}
</style>
</head>
<body class="<?php echo $global['bodyClass']; ?>">

View file

@ -280,15 +280,15 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
if ($video['type'] !== 'notfound' && $video['type'] !== 'article') {
?>
<div class="col-xs-4 col-sm-2 col-lg-2 text-right"><strong><?php echo __("Description"); ?>:</strong></div>
<div class="col-xs-8 col-sm-10 col-lg-10" itemprop="description" id="descriptionArea">
<div id="descriptionAreaPreContent">
<div id="descriptionAreaContent">
<div class="col-xs-8 col-sm-10 col-lg-10 descriptionArea" itemprop="description">
<div class="descriptionAreaPreContent">
<div class="descriptionAreaContent">
<?php
echo Video::htmlDescription($video['description']);
?>
</div>
</div>
<button onclick="$('#descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default" id="descriptionAreaShowMoreBtn" style="display: none; ">
<button onclick="$(this).closest('.descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default descriptionAreaShowMoreBtn" style="display: none; ">
<span class="showMore"><i class="fas fa-caret-down"></i> <?php echo __("Show More"); ?></span>
<span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span>
</button>
@ -302,9 +302,6 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
</div>
<script>
$(document).ready(function () {
if ($('#descriptionArea').height() < $('#descriptionAreaContent').height()) {
$('#descriptionAreaShowMoreBtn').show();
}
<?php
if (empty($advancedCustom->showShareMenuOpenByDefault)) {
?>