From 87588c9305fd76dd75af8eae7a2170f81eff9474 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 21 Jun 2022 22:43:54 -0300 Subject: various navbar layout/grid improvements --- src/page/album-commentary.js | 1 + src/page/album.js | 12 ++++++------ src/page/artist.js | 1 + src/page/flash.js | 8 +++----- src/page/group.js | 1 + src/page/homepage.js | 33 +++++++++++++++++---------------- src/page/listing.js | 1 + src/page/news.js | 1 + src/page/tag.js | 1 + src/page/track.js | 20 +++++++------------- src/static/site.css | 37 ++++++++++++++++++++----------------- 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 e587b16..57135a4 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 fd3f4f5..472d89f 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 9912316..6c31a01 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 58969b1..21a22b9 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`
${generateChronologyLinks(flash, { diff --git a/src/page/group.js b/src/page/group.js index 4eb8fb3..b83244a 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 534ce78..a19df6c 100644 --- a/src/page/homepage.js +++ b/src/page/homepage.js @@ -99,22 +99,23 @@ export function writeTargetless({wikiData}) { }, nav: { - content: fixWS` -

- ${[ - 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 => `${link}`).join('\n')} -

- ` + 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 261b1e9..447a0c8 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 4f5c505..9336506 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 8e5e699..471439d 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 955fe02..c4ec6c5 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` -
- ${generateAlbumChronologyLinks(album, track, {generateChronologyLinks})} -
- ` + 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 df25f24..7d1f474 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 7a8a37c..d1077fb 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 += `${cur.html}`; + 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', { -- cgit 1.3.0-6-gf8a5