diff options
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 |
commit | c42861023bd97b355e59bc35e517ee76304df5a9 (patch) | |
tree | 8784f8be39d6feb3a582eb831245343c0d87d3b1 | |
parent | a1c827af7dd988af50369127618368e1c1bec652 (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.css | 47 | ||||
-rw-r--r-- | upd8.js | 48 |
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 |