62 lines
2.7 KiB
PHP
62 lines
2.7 KiB
PHP
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title is-4 has-text-dark">Liste des musiques</h1>
|
|
<div class="columns is-multiline">
|
|
<?php foreach ($musics as $music): ?>
|
|
<div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="data:image/jpeg;base64,<?= base64_encode($music->jpeg) ?>" alt="<?= $music->trackName ?>">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-4 music-title"><?= anchor("music/view/{$music->trackId}", $music->trackName) ?></p>
|
|
<p class="subtitle is-6"><?= "{$music->year} - {$music->artistName} - {$music->albumName}" ?></p>
|
|
<?php if (isset($is_logged_in) && $is_logged_in): ?>
|
|
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
|
|
<input type="hidden" name="itemId" value="<?= $music->trackId ?>">
|
|
<input type="hidden" name="itemType" value="song">
|
|
<button type="submit" class="button is-link">Ajouter à la playlist</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<nav class="pagination" role="navigation" aria-label="pagination">
|
|
<?= $pagination ?>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<style>
|
|
.pagination a, .pagination span {
|
|
padding: 8px 12px;
|
|
margin: 0 2px;
|
|
border-radius: 4px;
|
|
border: 1px solid #b02dff; /* Couleur violet clair */
|
|
color: #b02dff; /* Couleur violet clair */
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pagination a:hover {
|
|
background-color: #f3e8ff; /* Couleur violet très clair */
|
|
border-color: #a86bff; /* Couleur violet moyen */
|
|
}
|
|
|
|
.pagination .is-current {
|
|
background-color: #8a4dff; /* Couleur violet de Bulma */
|
|
border-color: #8a4dff; /* Couleur violet de Bulma */
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|