diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php
index 2d12bc3deebb746935a187cc151ad44e1d477add..7c7073f4b01fb67ee1139093482c64d85aabb6e2 100644
--- a/app/Helpers/components_helper.php
+++ b/app/Helpers/components_helper.php
@@ -316,3 +316,19 @@ if (! function_exists('relative_time')) {
}
// ------------------------------------------------------------------------
+
+if (! function_exists('explicit_badge')) {
+ function explicit_badge(bool $isExplicit, string $class = ''): string
+ {
+ if (! $isExplicit) {
+ return '';
+ }
+
+ $explicitLabel = lang('Common.explicit');
+ return <<<CODE_SAMPLE
+ <span class="px-1 text-xs font-semibold leading-tight tracking-wider uppercase border md:border-white/50 {$class}">{$explicitLabel}</span>
+ CODE_SAMPLE;
+ }
+}
+
+// ------------------------------------------------------------------------
diff --git a/themes/cp_app/episode/_layout.php b/themes/cp_app/episode/_layout.php
index ba9291fde6130181d9c00f2a228f60e0e9077fec..8fb8aeca96c9c13c272b38d64f1d7e3a6d6066ef 100644
--- a/themes/cp_app/episode/_layout.php
+++ b/themes/cp_app/episode/_layout.php
@@ -81,7 +81,10 @@
<div class="absolute top-0 left-0 w-full h-full bg-center bg-no-repeat bg-cover blur-lg mix-blend-overlay filter grayscale" style="background-image: url('<?= $episode->podcast->banner->small_url ?>');"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-background-header to-transparent"></div>
<div class="z-10 flex flex-col items-start gap-y-2 gap-x-4 sm:flex-row">
- <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
+ <div class="relative">
+ <?= explicit_badge($episode->parental_advisory === 'explicit', 'rounded absolute left-0 bottom-0 ml-2 mb-2 bg-black/75 text-accent-contrast') ?>
+ <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
+ </div>
<div class="flex flex-col items-start text-white">
<?= episode_numbering($episode->number, $episode->season_number, 'text-sm leading-none font-semibold px-1 py-1 text-white/90 border !no-underline border-subtle', true) ?>
<h1 class="inline-flex items-baseline max-w-md mt-2 text-2xl font-bold sm:leading-none sm:text-3xl font-display line-clamp-2"><?= $episode->title ?></h1>
diff --git a/themes/cp_app/episode/_partials/card.php b/themes/cp_app/episode/_partials/card.php
index ed915ac8f1d2d818bf51e7448a3e8f573a5158c5..22de5e04c22788a5d4b9c686538297dc1d09c291 100644
--- a/themes/cp_app/episode/_partials/card.php
+++ b/themes/cp_app/episode/_partials/card.php
@@ -12,7 +12,7 @@
<?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold border-subtle text-skin-muted px-1 border mr-2 !no-underline', true) ?>
<?= relative_time($episode->published_at, 'text-xs whitespace-nowrap text-skin-muted') ?>
</div>
- <h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
+ <h2 class="flex-1 mt-1 font-semibold leading-tight line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
</div>
<play-episode-button
id="<?= $episode->id ?>"
diff --git a/themes/cp_app/home.php b/themes/cp_app/home.php
index 7947a61e4eb6b1dbcb158328f74d94efd7d3e940..b217e82fafea5680a19d3f16ab72357a83ad7c94 100644
--- a/themes/cp_app/home.php
+++ b/themes/cp_app/home.php
@@ -61,9 +61,10 @@
<article class="text-white">
<div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
<div class="w-full h-full overflow-hidden bg-header">
+ <?= explicit_badge($podcast->parental_advisory === 'explicit', 'absolute top-0 left-0 z-10 rounded bg-black/75 ml-2 mt-2') ?>
<img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform bg-header aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
</div>
- <div class="absolute bottom-0 left-0 z-20 px-4 pb-2">
+ <div class="absolute bottom-0 left-0 z-20 w-full px-4 pb-2">
<h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>
<p class="text-sm opacity-75">@<?= $podcast->handle ?></p>
</div>
diff --git a/themes/cp_app/podcast/_layout.php b/themes/cp_app/podcast/_layout.php
index 0f77aa72412473c6a1b42be8e436232a0a32e9e6..417f39531fd594ce29a29855d113fc8db9fcf63a 100644
--- a/themes/cp_app/podcast/_layout.php
+++ b/themes/cp_app/podcast/_layout.php
@@ -47,11 +47,14 @@
<div class="absolute bottom-0 left-0 w-full h-full backdrop-gradient mix-blend-multiply"></div>
<div class="z-10 flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
<img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" loading="lazy" />
- <div class="relative flex flex-col text-white -top-2 sm:top-0 md:top-2">
+ <div class="relative flex flex-col text-white -top-3 sm:top-0 md:top-2">
<h1 class="text-lg font-bold leading-none line-clamp-2 md:leading-none md:text-2xl font-display"><?= $podcast->title ?><span class="ml-1 font-sans text-base font-normal">@<?= $podcast->handle ?></span></h1>
- <span class="text-xs"><?= lang('Podcast.followers', [
- 'numberOfFollowers' => $podcast->actor->followers_count,
- ]) ?></span>
+ <div class="">
+ <?= explicit_badge($podcast->parental_advisory === 'explicit', 'mr-1') ?>
+ <span class="text-xs"><?= lang('Podcast.followers', [
+ 'numberOfFollowers' => $podcast->actor->followers_count,
+ ]) ?></span>
+ </div>
</div>
</div>
<div class="z-10 inline-flex items-center self-end mt-2 mr-2 sm:mb-4 sm:mr-4 gap-x-2">
@@ -59,18 +62,18 @@
<button class="p-2 text-red-600 bg-white rounded-full shadow hover:text-red-500 focus:ring-accent" data-toggle="funding-links" data-toggle-class="hidden" data-tooltip="bottom" title="<?= lang('Podcast.sponsor') ?>"><Icon glyph="heart"></Icon></button>
<?php endif; ?>
<?= anchor_popup(
- route_to('follow', $podcast->handle),
- icon(
- 'social/castopod',
- 'mr-2 text-xl text-black/75 group-hover:text-black',
- ) . lang('Podcast.follow'),
- [
- 'width' => 420,
- 'height' => 620,
- 'class' =>
- 'group inline-flex items-center px-4 text-xs tracking-wider font-semibold text-black uppercase rounded-full leading-8 shadow focus:ring-accent bg-white',
- ],
- ) ?>
+ route_to('follow', $podcast->handle),
+ icon(
+ 'social/castopod',
+ 'mr-2 text-xl text-black/75 group-hover:text-black',
+ ) . lang('Podcast.follow'),
+ [
+ 'width' => 420,
+ 'height' => 620,
+ 'class' =>
+ 'group inline-flex items-center px-4 text-xs tracking-wider font-semibold text-black uppercase rounded-full leading-8 shadow focus:ring-accent bg-white',
+ ],
+ ) ?>
</div>
</header>
<?= $this->include('podcast/_partials/navigation') ?>