unleashing flexbox upon thee

frontend/files/records/app.js

@@ -144,34 +144,15 @@ function RecordTemplate({
   </span>`;
 }
 
-function TableRowTemplate({
-  artists,
-  identifier,
-  label,
-  rowNumber,
-  name,
-  year,
-}) {
-  return `<tr class="tRow" id="${rowNumber}">
-    <td class="name">
-      ${name}
-    </td>
-    <td class="artist">${artists.join(", ")}</td>
-    <td class="label">${label}</td>
-    <td class="identifier">${identifier}</td>
-    <td class="year">${year}</td>
-  </tr>`;
+function TableRowTemplate({ name, coverURL }) {
+  return `<div class="record">
+    <img class="cover" src="${coverURL}"/>
+    <span class="name">${name}</span>
+  </div>`;
 }
 
 function TableTemplate(records) {
-  return `<table class="recordTable">
-    <tr>
-      <th data-sort-by="sortName" class="tHeader name">Name</th>
-      <th data-sort-by="sortArtist" class="tHeader artist">Artist(s)</th>
-      <th data-sort-by="label" class="tHeader label">Label</th>
-      <th data-sort-by="identifier" class="tHeader identifier">Identifier</th>
-      <th data-sort-by="year" class="tHeader year">Year</th>
-    </tr>${records.reduce((acc, record) => {
-      return acc.concat(TableRowTemplate(record));
-    }, "")} </table>`;
+  return `<div class="flow">${records.reduce((acc, record) => {
+    return acc.concat(TableRowTemplate(record));
+  }, "")} </div>`;
 }