From b197a19e0716eedc039ce2e6963f76a935a358d9 Mon Sep 17 00:00:00 2001
From: Vince <vi.teissier@gmail.com>
Date: Wed, 5 Jun 2024 08:29:15 +0200
Subject: [PATCH] test changement css 3/?
---
application/views/album_details.php | 36 +++++++++++++++++++----------
application/views/albums_list.php | 30 ++++++++++++++++--------
2 files changed, 45 insertions(+), 21 deletions(-)
diff --git a/application/views/album_details.php b/application/views/album_details.php
index 8e6a707..7f2fb1c 100644
--- a/application/views/album_details.php
+++ b/application/views/album_details.php
@@ -2,19 +2,31 @@
<html>
<head>
<title><?= $album->albumName ?> - Details</title>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>
<body>
- <h1><?= $album->albumName ?></h1>
- <p><strong>Artist:</strong> <?= $album->artistName ?></p>
- <p><strong>Genre:</strong> <?= $album->genreName ?></p>
- <p><strong>Year:</strong> <?= $album->year ?></p>
- <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->albumName ?> Cover">
-
- <h2>Songs</h2>
- <ul>
- <?php foreach ($songs as $song): ?>
- <li><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></li>
- <?php endforeach; ?>
- </ul>
+ <section class="section">
+ <div class="container">
+ <h1 class="title"><?= $album->albumName ?></h1>
+ <div class="columns">
+ <div class="column is-one-third">
+ <figure class="image">
+ <img src="data:image/jpeg;base64,<?= base64_encode($album->jpeg) ?>" alt="<?= $album->albumName ?> Cover">
+ </figure>
+ </div>
+ <div class="column">
+ <p><strong>Artist:</strong> <?= $album->artistName ?></p>
+ <p><strong>Genre:</strong> <?= $album->genreName ?></p>
+ <p><strong>Year:</strong> <?= $album->year ?></p>
+ </div>
+ </div>
+ <h2 class="title is-4">Songs</h2>
+ <ul>
+ <?php foreach ($songs as $song): ?>
+ <li><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></li>
+ <?php endforeach; ?>
+ </ul>
+ </div>
+ </section>
</body>
</html>
diff --git a/application/views/albums_list.php b/application/views/albums_list.php
index 74225f6..d1c70a7 100644
--- a/application/views/albums_list.php
+++ b/application/views/albums_list.php
@@ -1,15 +1,27 @@
-<h5>Liste des Albums</h5>
-<section class="list">
+<h5 class="title is-5">Liste des Albums</h5>
+<section class="columns is-multiline">
<?php
foreach($albums as $album){
- echo "<div><article>";
- echo "<header class='short-text'>";
- echo anchor("albums/view/{$album->id}","{$album->name}");
- echo "</header>";
- echo '<img src="data:image/jpeg;base64,'.base64_encode($album->jpeg).'" />';
- echo "<footer class='short-text'>{$album->year} - {$album->artistName}</footer>
- </article></div>";
+ echo "<div class='column is-one-quarter'>";
+ echo "<article class='card'>";
+ echo "<div class='card-image'>";
+ echo '<figure class="image is-4by3">';
+ echo '<img src="data:image/jpeg;base64,'.base64_encode($album->jpeg).'" alt="'.$album->name.'">';
+ echo '</figure>';
+ echo "</div>";
+ echo "<div class='card-content'>";
+ echo "<div class='media'>";
+ echo "<div class='media-content'>";
+ echo "<p class='title is-4'>";
+ echo anchor("albums/view/{$album->id}", "{$album->name}");
+ echo "</p>";
+ echo "<p class='subtitle is-6'>{$album->year} - {$album->artistName}</p>";
+ echo "</div>";
+ echo "</div>";
+ echo "</div>";
+ echo "</article>";
+ echo "</div>";
}
?>
</section>