Skip to content
Snippets Groups Projects
Commit 90533be0 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

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
parent f7c3e5bf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/Resources/styles/seeMore.css
+ 2
− 2
View file @ 90533be0
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
.see-more__content { .see-more__content {
@apply relative overflow-hidden; @apply relative overflow-hidden;
height: 5rem; height: var(--content-height);
} }
.see-more_content-fade { .see-more_content-fade {
@apply absolute bottom-0 left-0 w-full h-full pointer-events-none; @apply absolute bottom-0 left-0 w-full h-full pointer-events-none;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
transparent, transparent 70%,
hsl(var(--color-background-header)) hsl(var(--color-background-header))
); );
} }
......
app/Views/Components/SeeMore.php
+ 1
− 1
View file @ 90533be0
...@@ -13,7 +13,7 @@ class SeeMore extends Component ...@@ -13,7 +13,7 @@ class SeeMore extends Component
$seeMoreLabel = lang('Common.see_more'); $seeMoreLabel = lang('Common.see_more');
$seeLessLabel = lang('Common.see_less'); $seeLessLabel = lang('Common.see_less');
return <<<HTML 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"> <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> <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> <label for="see-more-checkbox" class="see-more__label" data-see-more="{$seeMoreLabel}" data-see-less="{$seeLessLabel}" aria-hidden="true"></label>
......
themes/cp_app/episode/_layout.php
+ 1
− 1
View file @ 90533be0
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
</header> </header>
<div class="col-start-2 px-8 py-4 text-white bg-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> <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> <SeeMore class="max-w-xl prose-sm text-white"><?= $episode->getDescriptionHtml('-+Website+-') ?></SeeMore>
<?php else: ?> <?php else: ?>
<div class="max-w-xl prose-sm text-white"><?= $episode->getDescriptionHtml('-+Website+-') ?></div> <div class="max-w-xl prose-sm text-white"><?= $episode->getDescriptionHtml('-+Website+-') ?></div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment