Update styling of public-facing podcast pages.
This commit is contained in:
Buster Neece
parent
0695b9408e
commit
0dc3cd47df
|
|
@ -38,86 +38,59 @@ $sections->append(
|
|||
HTML
|
||||
);
|
||||
?>
|
||||
<div class="d-flex align-items-center justify-content-center" style="height: 100dvh;">
|
||||
<section class="card" role="region" style="width: 500px;">
|
||||
<div class="card-body">
|
||||
<div class="d-flex mb-3">
|
||||
<div class="flex-fill">
|
||||
<h1 class="card-title mb-1">
|
||||
<?= $this->e($podcast->getTitle()) ?>
|
||||
</h1>
|
||||
<h2 class="card-subtitle mb-3">
|
||||
<?= $this->e($episode->getTitle()) ?>
|
||||
</h2>
|
||||
|
||||
<section id="content" role="main" class="d-flex align-items-stretch" style="height: 100vh;">
|
||||
<div class="container pt-5 pb-5 h-100" style="flex: 1;">
|
||||
<div id="station_podcast_episode">
|
||||
<div class="row mb-4">
|
||||
<h1 class="mx-auto"><?= $this->e($podcast->getTitle()) ?></h1>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class="badge text-bg-dark">
|
||||
<?= $publishedAt->format('d. M. Y') ?>
|
||||
</span>
|
||||
|
||||
<div class="row justify-content-center mb-4">
|
||||
<a href="<?= $podcastEpisodesLink ?>" class="btn btn-primary me-2"><span class="material-icons">chevron_left</span><?= __(
|
||||
'Back'
|
||||
) ?></a>
|
||||
<a href="<?= $feedLink ?>" class="btn btn-warning" target="_blank"><span
|
||||
class="material-icons">rss_feed</span> <?= __(
|
||||
'RSS Feed'
|
||||
) ?></a>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-4">
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="card">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-3 col-lg-2">
|
||||
<img src="<?= $router->named(
|
||||
'api:stations:podcast:episode:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId() . '|' . $episode->getArtUpdatedAt(),
|
||||
]
|
||||
); ?>" class="card-img img-fluid" alt="<?= $this->e($podcast->getTitle()) ?>">
|
||||
</div>
|
||||
|
||||
<div class="col-9 col-lg-10">
|
||||
<div class="card-body d-flex flex-column h-100">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-6">
|
||||
<span class="badge badge-pill badge-dark" data-toggle="tooltip"
|
||||
data-placement="right" data-html="true"
|
||||
title="<span class='material-icons'>schedule</span> <?= $publishedAt->format(
|
||||
'H:i'
|
||||
) ?>"><?= $publishedAt->format('d. M. Y') ?></span>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ($episode->getExplicit()) : ?>
|
||||
<div class="col-6 text-right">
|
||||
<span class="badge badge-pill badge-danger"><?= __('Explicit') ?></span>
|
||||
</div>
|
||||
<?php
|
||||
endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3 mb-3">
|
||||
<div class="col">
|
||||
<h2 class="card-title text-center"><?=$this->e($episode->getTitle()) ?></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio src="<?=$episodeAudioSrc ?>" controls class="mt-auto" style="width: 100%;"></audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
if ($episode->getExplicit()) : ?>
|
||||
<span class="badge text-bg-danger"><?= __('Explicit') ?></span>
|
||||
<?php
|
||||
endif; ?>
|
||||
</div>
|
||||
|
||||
<p class="card-text"><?= $this->e($episode->getDescription()) ?></p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ps-2" style="max-width: 128px;">
|
||||
<img src="<?= $router->named(
|
||||
'api:stations:podcast:episode:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId() . '|' . $episode->getArtUpdatedAt(),
|
||||
]
|
||||
); ?>" class="card-img img-fluid"
|
||||
alt="<?= $this->e($podcast->getTitle()) ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary">
|
||||
<h5 class="card-title text-center"><?=__('Description') ?></h5>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<audio src="<?= $episodeAudioSrc ?>" controls style="width: 100%;"></audio>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="card-text"><?=$this->e($episode->getDescription()) ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="<?= $podcastEpisodesLink ?>" class="btn btn-sm btn-primary">
|
||||
<i class="material-icons">chevron_left</i>
|
||||
<span><?= __('Back') ?></span>
|
||||
</a>
|
||||
<a href="<?= $feedLink ?>" class="btn btn-sm btn-warning" target="_blank">
|
||||
<i class="material-icons">rss_feed</i>
|
||||
<span><?= __('RSS Feed') ?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,87 +25,94 @@ $sections->append(
|
|||
);
|
||||
?>
|
||||
|
||||
<section id="content" role="main" class="d-flex align-items-stretch" style="height: 100vh;">
|
||||
<div class="container pt-5 pb-5 h-100" style="flex: 1;">
|
||||
<div id="station_podcast_episodes">
|
||||
<div class="row">
|
||||
<h1 class="mx-auto"><?= __('Episodes') ?></h1>
|
||||
<div class="d-flex align-items-center justify-content-center" style="height: 100dvh;">
|
||||
<section class="card" role="region" style="width: 500px;">
|
||||
<div class="card-body">
|
||||
<h1 class="card-title mb-1">
|
||||
<?= $this->e($podcast->getTitle()) ?>
|
||||
</h1>
|
||||
<h2 class="card-subtitle mb-3">
|
||||
<?= __('Episodes') ?>
|
||||
</h2>
|
||||
|
||||
<div class="buttons mb-3">
|
||||
<a href="<?= $podcastsLink ?>" class="btn btn-sm btn-primary">
|
||||
<i class="material-icons">chevron_left</i>
|
||||
<span><?= __('Back') ?></span>
|
||||
</a>
|
||||
<a href="<?= $feedLink ?>" class="btn btn-sm btn-warning" target="_blank">
|
||||
<i class="material-icons">rss_feed</i>
|
||||
<span><?= __('RSS Feed') ?></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<h2 class="mx-auto"><?= $this->e($podcast->getTitle()) ?></h2>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-4">
|
||||
<a href="<?= $podcastsLink ?>" class="btn btn-primary me-2"><span
|
||||
class="material-icons">chevron_left</span><?= __(
|
||||
'Back'
|
||||
) ?></a>
|
||||
<a href="<?= $feedLink ?>" class="btn btn-warning" target="_blank"><span
|
||||
class="material-icons">rss_feed</span> <?= __(
|
||||
'RSS Feed'
|
||||
) ?></a>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<?php
|
||||
/** @var App\Entity\PodcastEpisode $episode */
|
||||
foreach ($episodes as $episode) : ?>
|
||||
<?php
|
||||
/** @var App\Entity\PodcastEpisode $episode */ ?>
|
||||
<?php
|
||||
foreach ($episodes as $episode) : ?>
|
||||
<?php
|
||||
$episodePageLink = $router->named('public:podcast:episode',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId(),
|
||||
]
|
||||
) ?>
|
||||
<div class="col-12 col-lg-8 mb-4">
|
||||
<div class="card">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-md-4">
|
||||
<a href="<?=$this->e($episodePageLink)?>" title="<?=__('View Details')?>">
|
||||
<img src="<?=$router->named('api:stations:podcast:episode:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId(
|
||||
) . '|' . $episode->getArtUpdatedAt(),
|
||||
]
|
||||
);?>" class="card-img img-fluid" alt="<?=$this->e($podcast->getTitle())?>">
|
||||
</a>
|
||||
</div>
|
||||
$episodePageLink = $router->named(
|
||||
'public:podcast:episode',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId(),
|
||||
]
|
||||
) ?>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="flex-shrink-0 pe-2" style="max-width: 128px">
|
||||
<a href="<?= $this->e($episodePageLink) ?>" title="<?= __('View Details') ?>">
|
||||
<img src="<?= $router->named(
|
||||
'api:stations:podcast:episode:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
'episode_id' => $episode->getId() . '|' . $episode->getArtUpdatedAt(),
|
||||
]
|
||||
); ?>" class="card-img img-fluid" alt="<?= $this->e($podcast->getTitle()) ?>">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<h5 class="card-title"><?= $this->e($episode->getTitle()) ?></h5>
|
||||
<p class="card-text"><?= $this->e($episode->getDescription()) ?></p>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card-body d-flex flex-column h-100">
|
||||
<h5 class="card-title"><?=$this->e($episode->getTitle())?></h5>
|
||||
<?php
|
||||
if ($episode->getExplicit()) : ?>
|
||||
<p class="card-text">
|
||||
<i class="material-icons" aria-hidden="true">warning</i>
|
||||
<small class="text-muted"><?= __('Contains explicit content') ?></small>
|
||||
</p>
|
||||
<?php
|
||||
endif; ?>
|
||||
|
||||
<p class="card-text"><?=$this->e($episode->getDescription())?></p>
|
||||
<p class="card-text">
|
||||
<?php
|
||||
$publishedAt = CarbonImmutable::createFromTimestamp(
|
||||
$episode->getCreatedAt()
|
||||
); ?>
|
||||
<?php
|
||||
if ($episode->getPublishAt() !== null) : ?>
|
||||
<?php
|
||||
$publishedAt = CarbonImmutable::createFromTimestamp(
|
||||
$episode->getPublishAt()
|
||||
); ?>
|
||||
<?php
|
||||
endif; ?>
|
||||
<span class="badge badge-pill badge-dark" data-toggle="tooltip"
|
||||
data-placement="right" data-html="true"
|
||||
title="<span class='material-icons'>schedule</span> <?= $publishedAt->format(
|
||||
'H:i'
|
||||
) ?>"><?= $publishedAt->format('d. M. Y') ?></span>
|
||||
</p>
|
||||
|
||||
<?php
|
||||
if ($episode->getExplicit()) : ?>
|
||||
<p class="card-text">
|
||||
<i class="material-icons" aria-hidden="true">warning</i>
|
||||
<small class="text-muted"><?=__('Contains explicit content') ?></small>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<p class="card-text">
|
||||
<?php $publishedAt = CarbonImmutable::createFromTimestamp($episode->getCreatedAt()); ?>
|
||||
<?php if ($episode->getPublishAt() !== null) : ?>
|
||||
<?php $publishedAt = CarbonImmutable::createFromTimestamp($episode->getPublishAt()); ?>
|
||||
<?php endif; ?>
|
||||
<span class="badge badge-pill badge-dark" data-toggle="tooltip" data-placement="right" data-html="true" title="<span class='material-icons'>schedule</span> <?=$publishedAt->format('H:i') ?>"><?=$publishedAt->format('d. M. Y') ?></span>
|
||||
</p>
|
||||
|
||||
<a href="<?=$this->e($episodePageLink) ?>" class="btn btn-primary btn-block mt-auto"><?=__('View Details') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-buttons">
|
||||
<a href="<?= $this->e($episodePageLink) ?>" class="btn btn-primary">
|
||||
<?= __('View Details') ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,101 +9,85 @@ $this->layout('minimal', [
|
|||
$this->fetch('frontend/public/partials/station-custom', ['station' => $station]);
|
||||
|
||||
?>
|
||||
<section id="content" role="main" class="d-flex align-items-stretch" style="height: 100vh;">
|
||||
<div class="container pt-5 pb-5 h-100" style="flex: 1;">
|
||||
<div id="station_podcasts">
|
||||
<div class="row mb-4">
|
||||
<h1 class="mx-auto"><?= $this->e($station->getName()) ?></h1>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center" style="height: 100dvh;">
|
||||
<section class="card" role="region" style="width: 500px;">
|
||||
<div class="card-body">
|
||||
<h1 class="card-title mb-3">
|
||||
<?= $this->e($station->getName()) ?>
|
||||
</h1>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<?php
|
||||
/** @var App\Entity\Podcast $podcast */
|
||||
foreach ($podcasts as $podcast) : ?>
|
||||
<?php
|
||||
/** @var App\Entity\Podcast $podcast */ ?>
|
||||
$episodesPageLink = (string)$router->named(
|
||||
'public:podcast:episodes',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
]
|
||||
) ?>
|
||||
<?php
|
||||
foreach ($podcasts as $podcast) : ?>
|
||||
<?php
|
||||
$episodesPageLink = (string)$router->named(
|
||||
'public:podcast:episodes',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
]
|
||||
) ?>
|
||||
<?php
|
||||
$feedLink = (string)$router->named(
|
||||
'public:podcast:feed',
|
||||
['station_id' => $station->getId(), 'podcast_id' => $podcast->getId()]
|
||||
) ?>
|
||||
<div class="col col-md-10 mb-4">
|
||||
<div class="card">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-md-4">
|
||||
<a href="<?=$this->e($episodesPageLink)?>" title="<?=__('Episodes')?>">
|
||||
<img src="<?=$router->named(
|
||||
'api:stations:podcast:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
]
|
||||
);?>" class="card-img img-fluid" alt="<?=$this->e($podcast->getTitle())?>">
|
||||
</a>
|
||||
</div>
|
||||
$feedLink = (string)$router->named(
|
||||
'public:podcast:feed',
|
||||
['station_id' => $station->getId(), 'podcast_id' => $podcast->getId()]
|
||||
) ?>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="flex-shrink-0 pe-2" style="max-width: 128px">
|
||||
<a href="<?= $this->e($episodesPageLink) ?>" title="<?= __('Episodes') ?>">
|
||||
<img src="<?= $router->named(
|
||||
'api:stations:podcast:art',
|
||||
[
|
||||
'station_id' => $station->getId(),
|
||||
'podcast_id' => $podcast->getId(),
|
||||
]
|
||||
); ?>" class="card-img img-fluid" alt="<?= $this->e($podcast->getTitle()) ?>">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-fill">
|
||||
<h5 class="card-subtitle"><?= $this->e($podcast->getTitle()) ?></h5>
|
||||
<p class="card-text"><?= $this->e($podcast->getDescription()) ?></p>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card-body d-flex flex-column h-100">
|
||||
<h5 class="card-title"><?=$this->e($podcast->getTitle())?></h5>
|
||||
<p class="card-text">
|
||||
<small class="text-muted"><?= __('Language') ?>: <?= strtoupper(
|
||||
$podcast->getLanguage()
|
||||
) ?></small>
|
||||
<br/>
|
||||
<small class="text-muted"><?= __('Categories') ?>: <?= implode(
|
||||
$podcast->getCategories()->map(
|
||||
function ($category) {
|
||||
$title = $category->getTitle();
|
||||
$subtitle = $category->getSubTitle();
|
||||
|
||||
<p class="card-text"><?=$this->e($podcast->getDescription())?></p>
|
||||
return (!empty($subtitle))
|
||||
? $title . ' - ' . $subtitle
|
||||
: $title;
|
||||
}
|
||||
)->getValues()
|
||||
); ?></small>
|
||||
</p>
|
||||
|
||||
<p class="card-text">
|
||||
<small class="text-muted"><?=__('Language')?>: <?=strtoupper(
|
||||
$podcast->getLanguage()
|
||||
)?></small>
|
||||
<br/>
|
||||
<small class="text-muted"><?=__('Categories')?>: <?=implode(
|
||||
$podcast->getCategories()->map(
|
||||
function ($category) {
|
||||
$title = $category->getTitle();
|
||||
$subtitle = $category->getSubTitle();
|
||||
<div class="buttons">
|
||||
<a href="<?= $episodesPageLink ?>" class="btn btn-primary">
|
||||
<?= __('Episodes') ?>
|
||||
</a>
|
||||
|
||||
return (!empty($subtitle))
|
||||
? $title . ' - ' . $subtitle
|
||||
: $title;
|
||||
}
|
||||
)->getValues()
|
||||
);?></small>
|
||||
</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<a href="<?=$feedLink?>" class="btn btn-warning btn-sm" target="_blank"><span class="material-icons">rss_feed</span> <?=__(
|
||||
'RSS Feed'
|
||||
)?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<a href="<?=$episodesPageLink?>" class="btn btn-primary btn-block"><?=__(
|
||||
'Episodes'
|
||||
)?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="<?= $feedLink ?>" class="btn btn-warning"
|
||||
target="_blank">
|
||||
<i class="material-icons">rss_feed</i>
|
||||
<span><?= __('RSS Feed') ?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php
|
||||
endforeach; ?>
|
||||
|
||||
<?php if (count($podcasts) === 0) : ?>
|
||||
<div class="col col-md-10 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title text-center"><?=__('No entries found.') ?></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php
|
||||
if (count($podcasts) === 0) : ?>
|
||||
<p class="card-text"><?= __('No entries found.') ?></p>
|
||||
<?php
|
||||
endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue