From 6e9d4a5d8255da4810202216d13cdc97495367a8 Mon Sep 17 00:00:00 2001
From: "Jill \"oatmealine\" Monoids" <oatmealine@disroot.org>
Date: Wed, 20 Oct 2021 19:38:17 +0300
Subject: [PATCH] switch to flexboxes for album display

---
 public/index.css | 25 ++++++++++++++++---------
 public/index.js  | 30 ++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/public/index.css b/public/index.css
index b2fd839..720a46a 100644
--- a/public/index.css
+++ b/public/index.css
@@ -212,6 +212,8 @@ input {
   border-radius: 10px 10px 0px 0px;
   transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
   height: 96px;
+  display: flex;
+  justify-content: space-between;
 }
 .small {
   font-size: medium;
@@ -234,29 +236,34 @@ input {
   height: 100%;
   border-radius: 10px;
   transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
-  margin: none;
-  padding: none;
+  width: 96px;
+  height: 96px;
 }
 .album-image-wrapper {
   transition: 0.1s border ease-out;
-  float: right;
-  max-height: 100%;
-  width: 96px;
-  padding: none;
-  margin: none;
+}
+.album-metadata {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.metadata {
+  height: 100%;
 }
 .link {
   cursor: pointer;
   transition: 0.1s color ease-out, 0.1s filter ease-out;
 }
 .album-download {
-  position: relative;
-  top: 20px;
   width: 32px;
   height: 32px;
   cursor: pointer;
   transition: 0.1s filter ease-out;
 }
+.track .album-download {
+  position: relative;
+  top: 20px;
+}
 .lds-ring {
   display: inline-block;
   position: relative;
diff --git a/public/index.js b/public/index.js
index ea84bab..c4c96d2 100644
--- a/public/index.js
+++ b/public/index.js
@@ -154,7 +154,23 @@ window.onload = () => {
       return;
     }
     document.getElementById('albums').innerHTML = d.data.map(d =>
-      `<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="assets/download.svg"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
+      `
+      <div class="album" id="album-${d.id}">
+        <div class="album-metadata">
+          <span class="metadata">
+            <span class="big">${d.title}</span>
+            <br>
+            <span class="small">by ${d.artist.name}</span>
+          </span>
+          <img class="album-download" width="48" height="48" src="assets/download.svg">
+        </div>
+        <div class="album-image-wrapper">
+          <img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg">
+        </div>
+      </div>
+
+      <div class="album-bottom" id="album-bottom-${d.id}"></div>
+      `
     ).join('<br>');
 
     if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
@@ -180,7 +196,17 @@ window.onload = () => {
         }
 
         document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
-          `<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="assets/download.svg"></span> ${formatTime(d.duration)}</span></div>`
+          `
+          <div class="track" id="track-${d.id}">
+            <span>${d.artist} - ${d.title}</span>
+            <span>
+              <span class="track-download-wrapper">
+                <img class="album-download" width="32" height="32" src="assets/download.svg">
+              </span>
+               ${formatTime(d.duration)}
+            </span>
+          </div>
+          `
         ).join('');
         for (track of document.getElementById('album-bottom-' + id).children) {
           let trackId = track.id.split('-')[1];