mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-06 03:50:04 +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']; ?>">
|
title="<?php echo $videoRow['title']; ?>">
|
||||||
<strong><?php echo $videoRow['title']; ?></strong>
|
<strong><?php echo $videoRow['title']; ?></strong>
|
||||||
</a>
|
</a>
|
||||||
<div class="mainAreaDescriptionContainer">
|
<div class="descriptionArea">
|
||||||
<p class="mainAreaDescription" itemprop="description"><?php
|
<div class="descriptionAreaPreContent">
|
||||||
if (strpos($videoRow['description'], '<br') !== false || strpos($videoRow['description'], '<p') !== false) {
|
<div class="descriptionAreaContent">
|
||||||
echo $videoRow['description'];
|
<?php
|
||||||
} else {
|
echo Video::htmlDescription($videoRow['description']);
|
||||||
echo nl2br(textToLink(htmlentities($videoRow['description'])));
|
?>
|
||||||
}
|
</div>
|
||||||
?></p>
|
</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>
|
||||||
<div class="text-muted galeryDetails">
|
<div class="text-muted galeryDetails">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -1173,3 +1173,33 @@ li.dropdown-submenu > ul > li > a{
|
||||||
a:hover{
|
a:hover{
|
||||||
text-decoration: none;
|
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;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function checkDescriptionArea(){
|
||||||
|
$(".descriptionArea").each(function (index) {
|
||||||
|
if ($(this).height() < $(this).find('.descriptionAreaContent').height()) {
|
||||||
|
$(this).find('.descriptionAreaShowMoreBtn').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
checkDescriptionArea();
|
||||||
|
setInterval(function(){// check for the carousel
|
||||||
|
checkDescriptionArea();
|
||||||
|
},3000);
|
||||||
|
|
||||||
|
|
||||||
Cookies.set('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone, {
|
Cookies.set('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone, {
|
||||||
path: '/',
|
path: '/',
|
||||||
expires: 365
|
expires: 365
|
||||||
|
|
|
@ -333,38 +333,6 @@ if (!empty($video['users_id']) && User::hasBlockedUser($video['users_id'])) {
|
||||||
$modeYouTubeTimeLog['After head'] = microtime(true) - $modeYouTubeTime;
|
$modeYouTubeTimeLog['After head'] = microtime(true) - $modeYouTubeTime;
|
||||||
$modeYouTubeTime = microtime(true);
|
$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>
|
</head>
|
||||||
|
|
||||||
<body class="<?php echo $global['bodyClass']; ?>">
|
<body class="<?php echo $global['bodyClass']; ?>">
|
||||||
|
|
|
@ -280,15 +280,15 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
|
||||||
if ($video['type'] !== 'notfound' && $video['type'] !== 'article') {
|
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-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 class="col-xs-8 col-sm-10 col-lg-10 descriptionArea" itemprop="description">
|
||||||
<div id="descriptionAreaPreContent">
|
<div class="descriptionAreaPreContent">
|
||||||
<div id="descriptionAreaContent">
|
<div class="descriptionAreaContent">
|
||||||
<?php
|
<?php
|
||||||
echo Video::htmlDescription($video['description']);
|
echo Video::htmlDescription($video['description']);
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
</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="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>
|
<span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -302,9 +302,6 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
if ($('#descriptionArea').height() < $('#descriptionAreaContent').height()) {
|
|
||||||
$('#descriptionAreaShowMoreBtn').show();
|
|
||||||
}
|
|
||||||
<?php
|
<?php
|
||||||
if (empty($advancedCustom->showShareMenuOpenByDefault)) {
|
if (empty($advancedCustom->showShareMenuOpenByDefault)) {
|
||||||
?>
|
?>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue