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

app/Resources/styles/seeMore.css

+2 −2
Original line number Diff line number Diff line
@@ -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))

    );

  }

app/Views/Components/SeeMore.php

+1 −1
Original line number Diff line number Diff line
@@ -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>

themes/cp_app/episode/_layout.php

+1 −1
Original line number Diff line number Diff line
@@ -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>