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:
parent
4511bef455
commit
4aa18d55f7
5 changed files with 67 additions and 54 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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']; ?>">
|
||||
|
|
|
@ -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)) {
|
||||
?>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue