« get me outta code hell

get rid of list/table code - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
diff options
context:
space:
mode:
author(quasar) nebula <towerofnix@gmail.com>2020-11-09 23:45:55 -0400
committer(quasar) nebula <towerofnix@gmail.com>2020-11-09 23:48:09 -0400
commitc42861023bd97b355e59bc35e517ee76304df5a9 (patch)
tree8784f8be39d6feb3a582eb831245343c0d87d3b1
parenta1c827af7dd988af50369127618368e1c1bec652 (diff)
get rid of list/table code
the code is all fine (if a bit unwieldy) -- the main issue is it just
doesnt fit the site well!! might explore similar ideas in the future but
for now grid and normal <ul/ol>-style listings are just fine
-rw-r--r--static/site.css47
-rw-r--r--upd8.js48
2 files changed, 1 insertions, 94 deletions
diff --git a/static/site.css b/static/site.css
index 7a181b9d..f9e26a7c 100644
--- a/static/site.css
+++ b/static/site.css
@@ -343,53 +343,6 @@ 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%;
diff --git a/upd8.js b/upd8.js
index 2479902f..36d948f8 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1072,41 +1072,6 @@ 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();
 
@@ -1228,9 +1193,7 @@ 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
@@ -1240,16 +1203,6 @@ 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}
@@ -1261,6 +1214,7 @@ function writeMiscellaneousPages() {
                 classes: ['top-index'],
                 content: fixWS`
                     <h1>Albums - Official</h1>
+                    <p class="quick-links"><a href="list/">More listings!</a></p>
                     <div class="grid-listing">
                         ${getAlbumGridHTML({
                             entries: (albumData