From 9e8995dc6e039032cc65f87895cf770f99e8b244 Mon Sep 17 00:00:00 2001 From: Yassine Doghri <yassine@doghri.fr> Date: Mon, 12 Apr 2021 10:08:05 +0000 Subject: [PATCH] fix(persons): prevent overflow of persons list by adding horizontal scroll add js tootip to show persons info --- app/Views/podcast/_partials/header.php | 8 ++++++-- app/Views/podcast/episode.php | 18 ++++++++++-------- app/Views/podcast/episode_authenticated.php | 8 ++++---- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/app/Views/podcast/_partials/header.php b/app/Views/podcast/_partials/header.php index 9e706df1b6..1002dea9f9 100644 --- a/app/Views/podcast/_partials/header.php +++ b/app/Views/podcast/_partials/header.php @@ -54,16 +54,18 @@ <?php endforeach; ?> </div> <?php if (!empty($persons)): ?> - <div class="flex mb-6 space-x-2"> + <div class="flex w-full mb-6 space-x-2 overflow-y-auto"> <?php foreach ($persons as $person): ?> <?php if ($person['information_url']): ?> <a href="<?= $person[ 'information_url' - ] ?>" target="_blank" rel="noreferrer noopener"> + ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0"> <img src="<?= $person['thumbnail_url'] ?>" alt="<?= $person['full_name'] ?>" class="object-cover w-12 h-12 rounded-full" + data-toggle="tooltip" + data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[ 'roles' ] ?>" /> @@ -73,6 +75,8 @@ src="<?= $person['thumbnail_url'] ?>" alt="<?= $person['full_name'] ?>" class="object-cover w-12 h-12 rounded-full" + data-toggle="tooltip" + data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[ 'roles' ] ?>" /> diff --git a/app/Views/podcast/episode.php b/app/Views/podcast/episode.php index 33dbffa450..464e24415f 100644 --- a/app/Views/podcast/episode.php +++ b/app/Views/podcast/episode.php @@ -120,27 +120,29 @@ ) ?> <?php endif; ?> <?php if ($episodePersons): ?> - <div class="flex space-x-2"> + <div class="flex w-full space-x-2 overflow-y-auto"> <?php foreach ($episodePersons as $person): ?> <?php if ($person['information_url']): ?> <a href="<?= $person[ 'information_url' - ] ?>" target="_blank" rel="noreferrer noopener"> + ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0"> <img src="<?= $person[ 'thumbnail_url' ] ?>" alt="<?= $person[ 'full_name' -] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[ - 'full_name' -] ?>] <?= $person['roles'] ?>" /></a> +] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" +data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[ + 'roles' +] ?>" /></a> <?php else: ?> <img src="<?= $person[ 'thumbnail_url' ] ?>" alt="<?= $person[ 'full_name' -] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[ - 'full_name' -] ?>] <?= $person['roles'] ?>" /> +] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" +data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[ + 'roles' +] ?>" /> <?php endif; ?> <?php endforeach; ?> </div> diff --git a/app/Views/podcast/episode_authenticated.php b/app/Views/podcast/episode_authenticated.php index 8d253e1e0f..b8c4b90398 100644 --- a/app/Views/podcast/episode_authenticated.php +++ b/app/Views/podcast/episode_authenticated.php @@ -120,17 +120,17 @@ ) ?> <?php endif; ?> <?php if ($episodePersons): ?> - <div class="flex space-x-2"> + <div class="flex w-full space-x-2 overflow-y-auto"> <?php foreach ($episodePersons as $person): ?> <?php if ($person['information_url']): ?> <a href="<?= $person[ 'information_url' - ] ?>" target="_blank" rel="noreferrer noopener"> + ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0"> <img src="<?= $person[ 'thumbnail_url' ] ?>" alt="<?= $person[ 'full_name' -] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[ +] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" data-placement="bottom" title="[<?= $person[ 'full_name' ] ?>] <?= $person['roles'] ?>" /></a> <?php else: ?> @@ -138,7 +138,7 @@ 'thumbnail_url' ] ?>" alt="<?= $person[ 'full_name' -] ?>" class="object-cover w-12 h-12 rounded-full" title="[<?= $person[ +] ?>" class="object-cover w-12 h-12 rounded-full" data-toggle="tooltip" data-placement="bottom" title="[<?= $person[ 'full_name' ] ?>] <?= $person['roles'] ?>" /> <?php endif; ?> -- GitLab