104 lines
3.6 KiB
PHP
104 lines
3.6 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Liste des Albums - Dix heures</title>
|
|
<link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
|
|
|
|
</head>
|
|
<body>
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Liste des Albums</h1>
|
|
|
|
<!-- Liste des albums -->
|
|
<div class="columns is-multiline">
|
|
<?php foreach ($albums as $album): ?>
|
|
<div class="column is-one-quarter">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->name ?>">
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-4"><?= anchor("albums/view/{$album->id}", $album->name) ?></p>
|
|
<p class="subtitle is-6"><?= $album->artistName ?> - <?= $album->year ?></p>
|
|
<?php if ($is_logged_in): ?>
|
|
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
|
|
<input type="hidden" name="itemId" value="<?= $album->id ?>">
|
|
<input type="hidden" name="itemType" value="album">
|
|
<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>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-image {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.album-title, .artist-title, .music-title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* Limite à 2 lignes */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 3em; /* Ajuste en fonction de la taille de la police */
|
|
}
|
|
|
|
.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>
|