Adjust recommendations presentation

assets/style.css

@@ -29,14 +29,6 @@ body {
 .wrapper div > :last-child {
   margin-bottom: 0;
 }
-.recommendations {
-  display: flex;
-  flex-direction: row;
-  gap: 1em;
-  width: min-content;
-  margin: auto;
-  object-fit: fill;
-}
 
 header {
   border-bottom: 1px solid;
@@ -94,7 +86,7 @@ main .wrapper .subpage {
   grid-template-columns: 250px auto 250px;
 }
 
-main .wrapper img:not(div.recommendations img),
+main .wrapper img,
 main .wrapper table {
   width: 100%;
 }
@@ -147,7 +139,7 @@ main .wrapper .results img {
   object-fit: cover;
 }
 
-main .wrapper .tracks a,
+main .wrapper .tracks table a,
 main .wrapper .sidebar a {
   font-weight: bold;
 }

pages/release.php

@@ -12,7 +12,6 @@
   $document = htmlqp(encode_document(curl_exec($ch)));
   $json = json_decode($document->find("script[data-tralbum]")->attr("data-tralbum"));
   $additional = json_decode($document->find("script[type=\"application/ld+json\"]")->text());
-  $recommendations = $document->find("li.recommended-album");
 
   $title = $json->current->title;
 ?>
@@ -38,6 +37,7 @@
     if ($description) $description = current(array_filter($description, fn($property) => $property->name === 'digital_release_description'));
     if ($description) $description = $description->value;
     $text = $about ?? $description;
+
     echo_sidebar($image, $text);
 
     echo "<div class=\"tracks\">";
@@ -84,13 +84,26 @@
     echo "</table>";
 
     $lyrics = $json->current->lyrics;
-    if ($lyrics) echo "<p>" . nl2br($json->current->lyrics) . "</p>";
-    echo "<p><b>Recommendations:</b></p>";
-    echo "<div class=\"recommendations\">";
-    foreach ($recommendations as $ra){
-      $image = convert_link(resize_link($ra->find("img.album-art")->attr("src"), 3));
-      echo_item(convert_link($ra->find("a.album-link")->attr("href")), $image, "<br>" . $ra->attr("data-albumtitle"), "by " . $ra->attr("data-artist"));
-    }
+
+    if ($lyrics) {
+      echo "<p><b>Lyrics</b></p>";
+      echo "<p>" . nl2br($json->current->lyrics) . "</p>";
+    };
+
+    $recommendations = $document->find(".recommended-album");
+
+    echo "<p><b>Recommendations</b></p>";
+    echo "<div class=\"results\">";
+
+    foreach ($recommendations as $recommendation) {
+      $link = convert_link($recommendation->find(".album-link")->attr("href"));
+      $image = convert_link(resize_link($recommendation->find("img")->attr("src"), 9));
+      $text = $recommendation->attr("data-albumtitle");
+      $description = "by " . $recommendation->attr("data-artist");
+
+      echo_item($link, $image, $text, $description);
+    };
+
     echo "</div>";
 
     echo "</div>";