fix(persons): prevent overflow of persons list by adding horizontal scroll

add js tootip to show persons info
This commit is contained in:
Yassine Doghri 2021-04-12 10:08:05 +00:00
parent 388fb42b3e
commit 9e8995dc6e
No known key found for this signature in database
GPG Key ID: 3E7F89498B960C9F
3 changed files with 20 additions and 14 deletions

View File

@ -54,16 +54,18 @@
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
<?php if (!empty($persons)): ?> <?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 foreach ($persons as $person): ?>
<?php if ($person['information_url']): ?> <?php if ($person['information_url']): ?>
<a href="<?= $person[ <a href="<?= $person[
'information_url' 'information_url'
] ?>" target="_blank" rel="noreferrer noopener"> ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
<img <img
src="<?= $person['thumbnail_url'] ?>" src="<?= $person['thumbnail_url'] ?>"
alt="<?= $person['full_name'] ?>" alt="<?= $person['full_name'] ?>"
class="object-cover w-12 h-12 rounded-full" class="object-cover w-12 h-12 rounded-full"
data-toggle="tooltip"
data-placement="bottom"
title="[<?= $person['full_name'] ?>] <?= $person[ title="[<?= $person['full_name'] ?>] <?= $person[
'roles' 'roles'
] ?>" /> ] ?>" />
@ -73,6 +75,8 @@
src="<?= $person['thumbnail_url'] ?>" src="<?= $person['thumbnail_url'] ?>"
alt="<?= $person['full_name'] ?>" alt="<?= $person['full_name'] ?>"
class="object-cover w-12 h-12 rounded-full" class="object-cover w-12 h-12 rounded-full"
data-toggle="tooltip"
data-placement="bottom"
title="[<?= $person['full_name'] ?>] <?= $person[ title="[<?= $person['full_name'] ?>] <?= $person[
'roles' 'roles'
] ?>" /> ] ?>" />

View File

@ -120,27 +120,29 @@
) ?> ) ?>
<?php endif; ?> <?php endif; ?>
<?php if ($episodePersons): ?> <?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 foreach ($episodePersons as $person): ?>
<?php if ($person['information_url']): ?> <?php if ($person['information_url']): ?>
<a href="<?= $person[ <a href="<?= $person[
'information_url' 'information_url'
] ?>" target="_blank" rel="noreferrer noopener"> ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
<img src="<?= $person[ <img src="<?= $person[
'thumbnail_url' 'thumbnail_url'
] ?>" alt="<?= $person[ ] ?>" alt="<?= $person[
'full_name' '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"
'full_name' data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[
] ?>] <?= $person['roles'] ?>" /></a> 'roles'
] ?>" /></a>
<?php else: ?> <?php else: ?>
<img src="<?= $person[ <img src="<?= $person[
'thumbnail_url' 'thumbnail_url'
] ?>" alt="<?= $person[ ] ?>" alt="<?= $person[
'full_name' '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"
'full_name' data-placement="bottom" title="[<?= $person['full_name'] ?>] <?= $person[
] ?>] <?= $person['roles'] ?>" /> 'roles'
] ?>" />
<?php endif; ?> <?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>

View File

@ -120,17 +120,17 @@
) ?> ) ?>
<?php endif; ?> <?php endif; ?>
<?php if ($episodePersons): ?> <?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 foreach ($episodePersons as $person): ?>
<?php if ($person['information_url']): ?> <?php if ($person['information_url']): ?>
<a href="<?= $person[ <a href="<?= $person[
'information_url' 'information_url'
] ?>" target="_blank" rel="noreferrer noopener"> ] ?>" target="_blank" rel="noreferrer noopener" class="flex-shrink-0">
<img src="<?= $person[ <img src="<?= $person[
'thumbnail_url' 'thumbnail_url'
] ?>" alt="<?= $person[ ] ?>" alt="<?= $person[
'full_name' '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' 'full_name'
] ?>] <?= $person['roles'] ?>" /></a> ] ?>] <?= $person['roles'] ?>" /></a>
<?php else: ?> <?php else: ?>
@ -138,7 +138,7 @@
'thumbnail_url' 'thumbnail_url'
] ?>" alt="<?= $person[ ] ?>" alt="<?= $person[
'full_name' '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' 'full_name'
] ?>] <?= $person['roles'] ?>" /> ] ?>] <?= $person['roles'] ?>" />
<?php endif; ?> <?php endif; ?>