Unverified Commit 9e8995dc authored by Yassine Doghri's avatar Yassine Doghri
Browse files

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

add js tootip to show persons info
parent 388fb42b

app/Views/podcast/_partials/header.php

+6 −2
Original line number Diff line number Diff line
@@ -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'

] ?>" />

app/Views/podcast/episode.php

+10 −8
Original line number Diff line number Diff line
@@ -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>

app/Views/podcast/episode_authenticated.php

+4 −4
Original line number Diff line number Diff line
@@ -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; ?>