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