diff options
| -rw-r--r-- | src/page/album-commentary.js | 1 | ||||
| -rw-r--r-- | src/page/album.js | 12 | ||||
| -rw-r--r-- | src/page/artist.js | 1 | ||||
| -rw-r--r-- | src/page/flash.js | 8 | ||||
| -rw-r--r-- | src/page/group.js | 1 | ||||
| -rw-r--r-- | src/page/homepage.js | 33 | ||||
| -rw-r--r-- | src/page/listing.js | 1 | ||||
| -rw-r--r-- | src/page/news.js | 1 | ||||
| -rw-r--r-- | src/page/tag.js | 1 | ||||
| -rw-r--r-- | src/page/track.js | 20 | ||||
| -rw-r--r-- | src/static/site.css | 37 | ||||
| -rwxr-xr-x | src/upd8.js | 24 |
12 files changed, 77 insertions, 63 deletions
diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js index e587b16e..57135a4a 100644 --- a/src/page/album-commentary.js +++ b/src/page/album-commentary.js @@ -69,6 +69,7 @@ export function write(album, {wikiData}) { }, nav: { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { diff --git a/src/page/album.js b/src/page/album.js index fd3f4f5d..472d89f1 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -255,6 +255,7 @@ export function write(album, {wikiData}) { }), nav: { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { @@ -262,13 +263,12 @@ export function write(album, {wikiData}) { album: link.album(album, {class: 'current'}) }) }, - album.tracks.length > 1 && - { + album.tracks.length > 1 && { divider: false, html: generateAlbumNavLinks(album, null, {language}) - } + }, ], - content: html.tag('div', generateAlbumChronologyLinks(album, null, {generateChronologyLinks})) + content: generateAlbumChronologyLinks(album, null, {generateChronologyLinks}), }, secondaryNav: generateAlbumSecondaryNav(album, null, { @@ -464,7 +464,7 @@ export function generateAlbumNavLinks(album, currentTrack, { } export function generateAlbumChronologyLinks(album, currentTrack, {generateChronologyLinks}) { - return [ + return html.tag('div', {class: 'nav-chronology-links'}, [ currentTrack && generateChronologyLinks(currentTrack, { contribKey: 'artistContribs', getThings: artist => [...artist.tracksAsArtist, ...artist.tracksAsContributor], @@ -481,5 +481,5 @@ export function generateAlbumChronologyLinks(album, currentTrack, {generateChron getThings: artist => [...artist.albumsAsCoverArtist, ...artist.tracksAsCoverArtist], headingString: 'misc.chronology.heading.coverArt' }) - ].filter(Boolean).join('\n'); + ].filter(Boolean).join('\n')); } diff --git a/src/page/artist.js b/src/page/artist.js index 99123168..6c31a010 100644 --- a/src/page/artist.js +++ b/src/page/artist.js @@ -495,6 +495,7 @@ function generateNavForArtist(artist, isGallery, hasGallery, { })) return { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, wikiInfo.enableListings && diff --git a/src/page/flash.js b/src/page/flash.js index 58969b15..21a22b94 100644 --- a/src/page/flash.js +++ b/src/page/flash.js @@ -161,6 +161,7 @@ function generateNavForFlash(flash, { }); return { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { @@ -172,13 +173,10 @@ function generateNavForFlash(flash, { flash: link.flash(flash, {class: 'current'}) }) }, - previousNextLinks && - { - divider: false, - html: `(${previousNextLinks})` - } ], + bottomRowContent: previousNextLinks && `(${previousNextLinks})`, + content: fixWS` <div> ${generateChronologyLinks(flash, { diff --git a/src/page/group.js b/src/page/group.js index 4eb8fb3e..b83244a3 100644 --- a/src/page/group.js +++ b/src/page/group.js @@ -245,6 +245,7 @@ function generateGroupNav(currentGroup, isGallery, { }); return { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, wikiInfo.enableListings && diff --git a/src/page/homepage.js b/src/page/homepage.js index 534ce78b..a19df6cf 100644 --- a/src/page/homepage.js +++ b/src/page/homepage.js @@ -99,22 +99,23 @@ export function writeTargetless({wikiData}) { }, nav: { - content: fixWS` - <h2 class="dot-between-spans"> - ${[ - link.home('', {text: wikiInfo.nameShort, class: 'current', to}), - wikiInfo.enableListings && - link.listingIndex('', {text: language.$('listingIndex.title'), to}), - wikiInfo.enableNews && - link.newsIndex('', {text: language.$('newsIndex.title'), to}), - wikiInfo.enableFlashesAndGames && - link.flashIndex('', {text: language.$('flashIndex.title'), to}), - ...(staticPageData - .filter(page => page.showInNavigationBar) - .map(page => link.staticPage(page, {text: page.nameShort}))) - ].filter(Boolean).map(link => `<span>${link}</span>`).join('\n')} - </h2> - ` + linkContainerClasses: ['nav-links-index'], + links: [ + link.home('', {text: wikiInfo.nameShort, class: 'current', to}), + + wikiInfo.enableListings && + link.listingIndex('', {text: language.$('listingIndex.title'), to}), + + wikiInfo.enableNews && + link.newsIndex('', {text: language.$('newsIndex.title'), to}), + + wikiInfo.enableFlashesAndGames && + link.flashIndex('', {text: language.$('flashIndex.title'), to}), + + ...(staticPageData + .filter(page => page.showInNavigationBar) + .map(page => link.staticPage(page, {text: page.nameShort}))), + ].filter(Boolean).map(html => ({html})), } }) }; diff --git a/src/page/listing.js b/src/page/listing.js index 261b1e90..447a0c8f 100644 --- a/src/page/listing.js +++ b/src/page/listing.js @@ -76,6 +76,7 @@ export function write(listing, {wikiData}) { }, nav: { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { diff --git a/src/page/news.js b/src/page/news.js index 4f5c5059..9336506f 100644 --- a/src/page/news.js +++ b/src/page/news.js @@ -104,6 +104,7 @@ function generateNewsEntryNav(entry, { }); return { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { diff --git a/src/page/tag.js b/src/page/tag.js index 8e5e6999..471439da 100644 --- a/src/page/tag.js +++ b/src/page/tag.js @@ -87,6 +87,7 @@ function generateTagNav(tag, { }); return { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, wikiData.wikiInfo.enableListings && diff --git a/src/page/track.js b/src/page/track.js index 955fe029..c4ec6c59 100644 --- a/src/page/track.js +++ b/src/page/track.js @@ -306,6 +306,7 @@ export function write(track, {wikiData}) { }), nav: { + linkContainerClasses: ['nav-links-hierarchy'], links: [ {toHome: true}, { @@ -322,20 +323,13 @@ export function write(track, {wikiData}) { track: link.track(track, {class: 'current', to}) }) }, - album.tracks.length > 1 && - { - divider: false, - html: generateAlbumNavLinks(album, track, { - generatePreviousNextLinks, - language - }) - } ].filter(Boolean), - content: fixWS` - <div> - ${generateAlbumChronologyLinks(album, track, {generateChronologyLinks})} - </div> - ` + content: generateAlbumChronologyLinks(album, track, {generateChronologyLinks}), + bottomRowContent: (album.tracks.length > 1 && + generateAlbumNavLinks(album, track, { + generatePreviousNextLinks, + language, + })), }, secondaryNav: generateAlbumSecondaryNav(album, track, { diff --git a/src/static/site.css b/src/static/site.css index df25f24c..7d1f4747 100644 --- a/src/static/site.css +++ b/src/static/site.css @@ -120,39 +120,42 @@ a:hover { } #header { - display: flex; + display: grid; + grid-template-columns: max-content 3fr; + grid-template-areas: + "main-links content" + "bottom-row content"; } -#header > h2 { - font-size: 1em; - margin: 0 20px 0 0; - font-weight: normal; +.nav-main-links { + grid-area: main-links; + margin-right: 20px; } -#header > h2 a.current { - font-weight: 800; +.nav-content { + grid-area: content; } -#header > h2 > span { - white-space: nowrap; +.nav-bottom-row { + grid-area: bottom-row; } -#header > div { - flex-grow: 1; +.nav-main-links > span { + white-space: nowrap; } -#header > div > *:not(:last-child)::after { - content: " \00b7 "; +.nav-main-links > span > a.current { font-weight: 800; } -.dot-between-spans > span:not(:last-child)::after { - content: " \00b7 "; +.nav-links-index > span:not(:first-child):not(.no-divider)::before, +.nav-chronology-links > div.chronology:not(:last-child)::after { + content: "\0020\00b7\0020"; font-weight: 800; } -.dot-between-spans > span { - white-space: nowrap; +.nav-links-hierarchy > span:not(:first-child):not(.no-divider)::before { + content: "\0020/\0020"; } #header .chronology { diff --git a/src/upd8.js b/src/upd8.js index 7a8a37c1..d1077fbb 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -175,7 +175,7 @@ import FileSizePreloader from './file-size-preloader.js'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CACHEBUST = 9; +const CACHEBUST = 10; const DEFAULT_STRINGS_FILE = 'strings-default.json'; @@ -883,7 +883,9 @@ writePage.html = (pageInfo, { nav.classes ??= []; nav.content ??= ''; + nav.bottomRowContent ??= ''; nav.links ??= []; + nav.linkContainerClasses ??= []; secondaryNav ??= {}; secondaryNav.content ??= ''; @@ -951,6 +953,7 @@ writePage.html = (pageInfo, { const sidebarRightHTML = generateSidebarHTML('sidebar-right', sidebarRight); if (nav.simple) { + nav.linkContainerClasses = ['nav-links-hierarchy']; nav.links = [ {toHome: true}, {toCurrentPage: true} @@ -973,13 +976,14 @@ writePage.html = (pageInfo, { linkTitle ??= title; } - let part = prev && (cur.divider ?? true) ? '/ ' : ''; + let partContent; if (typeof cur.html === 'string') { if (!cur.html) { logWarn`Empty HTML in nav link ${JSON.stringify(cur)}`; + console.trace(); } - part += `<span>${cur.html}</span>`; + partContent = cur.html; } else { const attributes = { class: (cur.toCurrentPage || i === links.length - 1) && 'current', @@ -996,8 +1000,13 @@ writePage.html = (pageInfo, { if (attributes.href === null) { throw new Error(`Expected some href specifier for link to ${linkTitle} (${JSON.stringify(cur)})`); } - part += html.tag('a', attributes, linkTitle); + partContent = html.tag('a', attributes, linkTitle); } + + const part = html.tag('span', + {class: cur.divider === false && 'no-divider'}, + partContent); + navLinkParts.push(part); } @@ -1006,8 +1015,11 @@ writePage.html = (pageInfo, { id: 'header', class: nav.classes }, [ - links.length && html.tag('h2', {class: 'highlight-last-link'}, navLinkParts), - nav.content + links.length && html.tag('div', + {class: ['nav-main-links', ...nav.linkContainerClasses]}, + navLinkParts), + html.tag('div', {class: 'nav-content'}, nav.content), + nav.bottomRowContent && html.tag('div', {class: 'nav-bottom-row'}, nav.bottomRowContent), ]); const secondaryNavHTML = html.tag('nav', { |