feat: make episode description more visible on episode pages
- double the height of the episode description on episode pages - reduce overlay fading by 70% to make it more subtle closes #171
This commit is contained in:
parent
f7c3e5bf4a
commit
90533be029
|
@ -5,14 +5,14 @@
|
|||
|
||||
.see-more__content {
|
||||
@apply relative overflow-hidden;
|
||||
height: 5rem;
|
||||
height: var(--content-height);
|
||||
}
|
||||
|
||||
.see-more_content-fade {
|
||||
@apply absolute bottom-0 left-0 w-full h-full pointer-events-none;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
transparent 70%,
|
||||
hsl(var(--color-background-header))
|
||||
);
|
||||
}
|
||||
|
|
|
@ -13,7 +13,7 @@ class SeeMore extends Component
|
|||
$seeMoreLabel = lang('Common.see_more');
|
||||
$seeLessLabel = lang('Common.see_less');
|
||||
return <<<HTML
|
||||
<div class="see-more" style="--line-clamp: 3">
|
||||
<div class="see-more" style="--content-height: 10rem">
|
||||
<input id="see-more-checkbox" type="checkbox" class="see-more__checkbox" aria-hidden="true">
|
||||
<div class="mb-2 see-more__content {$this->class}"><div class="see-more_content-fade"></div>{$this->slot}</div>
|
||||
<label for="see-more-checkbox" class="see-more__label" data-see-more="{$seeMoreLabel}" data-see-less="{$seeLessLabel}" aria-hidden="true"></label>
|
||||
|
|
|
@ -132,7 +132,7 @@
|
|||
</header>
|
||||
<div class="col-start-2 px-8 py-4 text-white bg-header">
|
||||
<h2 class="text-xs font-bold tracking-wider uppercase whitespace-pre-line font-display"><?= lang('Episode.description') ?></h2>
|
||||
<?php if (substr_count($episode->description_markdown, "\n") > 3 || strlen($episode->description) > 250): ?>
|
||||
<?php if (substr_count($episode->description_markdown, "\n") > 6 || strlen($episode->description) > 500): ?>
|
||||
<SeeMore class="max-w-xl prose-sm text-white"><?= $episode->getDescriptionHtml('-+Website+-') ?></SeeMore>
|
||||
<?php else: ?>
|
||||
<div class="max-w-xl prose-sm text-white"><?= $episode->getDescriptionHtml('-+Website+-') ?></div>
|
||||
|
|
Loading…
Reference in New Issue