various navbar layout/grid improvements

10 files changed, 39 insertions, 40 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, {