2 files changed, 110 insertions, 0 deletions

diff --git a/static/site.css b/static/site.css
index 346c28a3..7a181b9d 100644
--- a/static/site.css
+++ b/static/site.css
@@ -343,6 +343,53 @@ h1 {
     font-size: 0.9em;
 }
 
+.table-listing {
+    display: flex;
+    flex-direction: column;
+}
+
+.table-row {
+    display: flex;
+    align-items: center;
+    margin: 5px;
+}
+
+.table-row img {
+    display: block;
+    height: 60px;
+    width: 60px;
+    padding: 2px;
+}
+
+.table-row-summary {
+    flex-grow: 1;
+    margin-left: 10px;
+}
+
+.table-row-info {
+    color: white;
+    white-space: nowrap;
+}
+
+.table-row-column {
+    width: 100px;
+    text-align: center;
+}
+
+.table-row:hover {
+    text-decoration: none;
+}
+
+.table-row:hover .table-row-name,
+.table-row:hover .table-row-column {
+    text-decoration: underline;
+}
+
+.table-row-summary > .table-row-info:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
 .square {
     position: relative;
     width: 100%;
@@ -360,6 +407,17 @@ h1 {
     height: 100%;
 }
 
+.vertical-square {
+    position: relative;
+    height: 100%;
+}
+
+.vertical-square::after {
+    content: "";
+    display: block;
+    padding-right: 100%;
+}
+
 #content.top-index h1,
 #content.flash-index h1 {
     text-align: center;
@@ -383,6 +441,10 @@ h1 {
     margin-bottom: 0;
 }
 
+#content.top-index p.quick-links {
+    text-align: center;
+}
+
 #intro-menu {
     margin: 24px 0;
     padding: 10px;
diff --git a/upd8.js b/upd8.js
index d86cc022..d6a60a10 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1072,6 +1072,41 @@ function getFlashGridHTML(props) {
     });
 }
 
+function getTableHTML({
+    entries,
+    srcFn,
+    hrefFn,
+    altFn,
+    infoFn = () => [],
+    columnsFn = () => [],
+    lazy = true
+}) {
+    return entries.map(({ item }, i) => fixWS`
+        <a ${classes('table-row', 'box')} href="${hrefFn(item)}" style="${getThemeString(item)}">
+            ${img({
+                src: srcFn(item),
+                alt: altFn(item),
+                lazy: (typeof lazy === 'number' ? i >= lazy : lazy),
+            })}
+            <div class="table-row-summary">
+                <span class="table-row-name">${item.name}</span><br>
+                ${infoFn(item).map(val => `<span class="table-row-info">${val}</span>`).join('\n')}
+            </div>
+            ${columnsFn(item).map(val => `<span class="table-row-column">${val}</span>`).join('\n')}
+        </a>
+    `).join('\n');
+}
+
+function getAlbumTableHTML(props) {
+    return getTableHTML({
+        srcFn: getAlbumCover,
+        hrefFn: album => `${C.ALBUM_DIRECTORY}/${album.directory}/`,
+        altFn: () => 'album cover',
+        infoFn: album => [getDateString(album), s(album.tracks.length, 'track'), getDurationString(getTotalDuration(album.tracks))],
+        ...props
+    });
+}
+
 function getNewReleases(numReleases) {
     const latestFirst = albumData.slice().reverse();
 
@@ -1193,6 +1228,9 @@ function writeMiscellaneousPages() {
                 classes: ['top-index'],
                 content: fixWS`
                     <h1>Albums - Fandom</h1>
+                    <p class="quick-links">View as: <a href="#grid">Grid</a>, <a href="#list">List</a></p>
+                    <p class="quick-links"><a href="list/">More listings!</a></p>
+                    <h2 id="grid">Grid</h2>
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
                             entries: (albumData
@@ -1202,6 +1240,16 @@ function writeMiscellaneousPages() {
                             lazy: 4
                         })}
                     </div>
+                    <h2 id="list">List</h2>
+                    <div class="table-listing">
+                        ${getAlbumTableHTML({
+                            entries: (albumData
+                                .filter(album => album.isFanon)
+                                .reverse()
+                                .map(album => ({item: album}))),
+                            lazy: true
+                        })}
+                    </div>
                 `
             },
             nav: {simple: true}