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; ?>
</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'
] ?>" />

View File

@ -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>

View File

@ -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; ?>