From 372681e748f88f8f31f7845d6f0c6f160d0eed96 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 21 Nov 2020 22:02:25 -0400 Subject: tags and a whole lot of data sorry for this commit being so f****u****c*kxng bad --- static/client.js | 55 +++++++++++++++++++++++++------------------ static/site.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 96 insertions(+), 30 deletions(-) (limited to 'static') diff --git a/static/client.js b/static/client.js index 5d706b24..8247a42c 100644 --- a/static/client.js +++ b/static/client.js @@ -38,19 +38,19 @@ function getFlash(el) { } function openAlbum(album) { - location.href = rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/index.html`); + return rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/`); } function openTrack(track) { - location.href = rebase(`${C.TRACK_DIRECTORY}/${track.directory}/index.html`); + return rebase(`${C.TRACK_DIRECTORY}/${track.directory}/`); } function openArtist(artist) { - location.href = rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/index.html`); + return rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/`); } function openFlash(flash) { - location.href = rebase(`${C.FLASH_DIRECTORY}/${flash.directory}/index.html`); + return rebase(`${C.FLASH_DIRECTORY}/${flash.directory}/`); } /* i implemented these functions but we dont actually use them anywhere lol @@ -80,20 +80,20 @@ function openNextTrack() { const { list, index } = getTrackListAndIndex(); if (!list) return; if (index === list.length) return; - openTrack(list[index + 1]); + return openTrack(list[index + 1]); } function openPreviousTrack() { const { list, index } = getTrackListAndIndex(); if (!list) return; if (index === 0) return; - openTrack(list[index - 1]); + return openTrack(list[index - 1]); } function openRandomTrack() { const { list } = getTrackListAndIndex(); if (!list) return; - openTrack(pick(list)); + return openTrack(pick(list)); } function getFlashListAndIndex() { @@ -107,31 +107,30 @@ function getFlashListAndIndex() { function openNextFlash() { const { list, index } = getFlashListAndIndex(); if (index === list.length) return; - openFlash(list[index + 1]); + return openFlash(list[index + 1]); } function openPreviousFlash() { const { list, index } = getFlashListAndIndex(); if (index === 0) return; - openFlash(list[index - 1]); + return openFlash(list[index - 1]); } for (const a of document.body.querySelectorAll('[data-random]')) { a.addEventListener('click', evt => { - try { - switch (a.dataset.random) { - case 'album': return openAlbum(pick(albumData)); - case 'album-in-fandom': return openAlbum(pick(fandomAlbumData)); - case 'album-in-official': openAlbum(pick(officialAlbumData)); - case 'track': return openTrack(pick(allTracks)); - case 'track-in-album': return openTrack(pick(getAlbum(a).tracks)); - case 'track-in-fandom': return openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); - case 'track-in-official': return openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); - case 'artist': return openArtist(pick(artistNames)); - case 'artist-more-than-one-contrib': return openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1))); - } - } finally { - evt.preventDefault(); + setTimeout(() => { + a.href = rebase(C.JS_DISABLED_DIRECTORY); + }); + switch (a.dataset.random) { + case 'album': return a.href = openAlbum(pick(albumData)); + case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData)); + case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData)); + case 'track': return a.href = openTrack(pick(allTracks)); + case 'track-in-album': return a.href = openTrack(pick(getAlbum(a).tracks)); + case 'track-in-fandom': return a.href = openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); + case 'track-in-official': return a.href = openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); + case 'artist': return a.href = openArtist(pick(artistNames)); + case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1))); } }); } @@ -164,3 +163,13 @@ document.addEventListener('keypress', event => { } } }); + +for (const reveal of document.querySelectorAll('.reveal')) { + reveal.addEventListener('click', event => { + if (!reveal.classList.contains('revealed')) { + reveal.classList.add('revealed'); + event.preventDefault(); + event.stopPropagation(); + } + }); +} diff --git a/static/site.css b/static/site.css index 2d47385a..9f6d2171 100644 --- a/static/site.css +++ b/static/site.css @@ -170,6 +170,7 @@ a:hover { #content { padding: 20px; flex-grow: 1; + flex-shrink: 3; } #sidebar > h1, @@ -267,22 +268,25 @@ a:hover { font-weight: normal; } -#cover-art { +#cover-art-container { float: right; width: 40%; max-width: 400px; margin: 0 0 10px 10px; - background-color: #181818; + font-size: 0.8em; } #cover-art img { display: block; width: 100%; height: 100%; - object-fit: cover; } -img { +#cover-art-container p { + margin-top: 5px; +} + +.image-container { border: 2px solid var(--fg-color); box-sizing: border-box; position: relative; @@ -291,7 +295,18 @@ img { background-color: var(--dim-color); color: white; display: inline-block; - object-fit: contain; + width: 100%; + height: 100%; +} + +.image-inner-area { + overflow: hidden; + width: 100%; + height: 100%; +} + +img { + object-fit: cover; /* these unfortunately dont take effect while loading, so... text-align: center; line-height: 2em; @@ -314,6 +329,8 @@ a.box:focus:not(:focus-visible) { a.box img { display: block; + width: 100%; + height: auto; } h1 { @@ -348,6 +365,13 @@ h1 { .grid-item img { width: 100%; height: 100%; + margin-top: auto; + margin-bottom: auto; +} + +.grid-item span { + overflow-wrap: break-word; + hyphens: auto; } .grid-item:hover { @@ -358,12 +382,12 @@ h1 { text-decoration: underline; } -.grid-item span:first-of-type { +.grid-item > span:first-of-type { margin-top: 0.45em; display: block; } -.grid-item:hover span:first-of-type { +.grid-item:hover > span:first-of-type { text-decoration: underline; } @@ -423,6 +447,38 @@ h1 { padding-right: 100%; } +.reveal { + position: relative; +} + +.reveal img { + filter: blur(20px); + opacity: 0.4; +} + +.reveal-text { + color: white; + position: absolute; + top: 15px; + left: 10px; + right: 10px; + text-align: center; + font-weight: bold; +} + +.reveal-interaction { + opacity: 0.8; +} + +.reveal.revealed img { + filter: none; + opacity: 1; +} + +.reveal.revealed .reveal-text { + display: none; +} + #content.top-index h1, #content.flash-index h1 { text-align: center; @@ -480,6 +536,7 @@ p code { blockquote { max-width: 600px; + margin-right: 0; } .long-content { -- cgit 1.3.0-6-gf8a5