various navbar layout/grid improvements

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', {