secondary nav, group links in narrow view

4 files changed, 89 insertions, 10 deletions

diff --git a/src/page/album.js b/src/page/album.js
index b68189fd..fd3f4f5d 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -269,7 +269,13 @@ export function write(album, {wikiData}) {
                         }
                     ],
                     content: html.tag('div', generateAlbumChronologyLinks(album, null, {generateChronologyLinks}))
-                }
+                },
+
+                secondaryNav: generateAlbumSecondaryNav(album, null, {
+                    language,
+                    link,
+                    getLinkThemeString,
+                }),
             };
         }
     };
@@ -398,6 +404,42 @@ export function generateAlbumSidebar(album, currentTrack, {
     }
 }
 
+export function generateAlbumSecondaryNav(album, currentTrack, {
+    link,
+    language,
+    getLinkThemeString,
+}) {
+    const { groups } = album;
+
+    if (!groups.length) {
+        return null;
+    }
+
+    const groupParts = groups.map(group => {
+        const albums = group.albums.filter(album => album.date);
+        const index = albums.indexOf(album);
+        const next = index >= 0 && albums[index + 1];
+        const previous = index > 0 && albums[index - 1];
+        return {group, next, previous};
+    }).map(({group, next, previous}) => {
+        const previousNext = !currentTrack && [
+            previous && link.album(previous, {color: false, text: language.$('misc.nav.previous')}),
+            next && link.album(next, {color: false, text: language.$('misc.nav.next')})
+        ].filter(Boolean);
+        return html.tag('span', {style: getLinkThemeString(group.color)}, [
+            language.$('albumSidebar.groupBox.title', {
+                group: link.groupInfo(group)
+            }),
+            previousNext?.length && `(${previousNext.join(',\n')})`
+        ]);
+    });
+
+    return {
+        classes: ['dot-between-spans'],
+        content: groupParts.join('\n'),
+    };
+}
+
 export function generateAlbumNavLinks(album, currentTrack, {
     generatePreviousNextLinks,
     language
diff --git a/src/page/track.js b/src/page/track.js
index 04e00ee3..955fe029 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -7,6 +7,7 @@ import fixWS from 'fix-whitespace';
 import {
     generateAlbumChronologyLinks,
     generateAlbumNavLinks,
+    generateAlbumSecondaryNav,
     generateAlbumSidebar
 } from './album.js';
 
@@ -335,7 +336,13 @@ export function write(track, {wikiData}) {
                             ${generateAlbumChronologyLinks(album, track, {generateChronologyLinks})}
                         </div>
                     `
-                }
+                },
+
+                secondaryNav: generateAlbumSecondaryNav(album, track, {
+                    language,
+                    link,
+                    getLinkThemeString,
+                }),
             };
         }
     };
diff --git a/src/static/site.css b/src/static/site.css
index 2dc6c6da..3ee02b07 100644
--- a/src/static/site.css
+++ b/src/static/site.css
@@ -106,12 +106,12 @@ a:hover {
     display: flex;
 }
 
-#header, #skippers, #footer {
+#header, #secondary-nav, #skippers, #footer {
     padding: 5px;
     font-size: 0.85em;
 }
 
-#header, #skippers {
+#header, #secondary-nav, #skippers {
     margin-bottom: 10px;
 }
 
@@ -133,11 +133,6 @@ a:hover {
     font-weight: 800;
 }
 
-#header > h2.dot-between-spans > span:not(:last-child)::after {
-    content: " \00b7 ";
-    font-weight: 800;
-}
-
 #header > h2 > span {
     white-space: nowrap;
 }
@@ -151,6 +146,15 @@ a:hover {
     font-weight: 800;
 }
 
+.dot-between-spans > span:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+.dot-between-spans > span {
+    white-space: nowrap;
+}
+
 #header .chronology {
     display: inline-block;
 }
@@ -160,6 +164,14 @@ a:hover {
     display: inline-block;
 }
 
+#secondary-nav {
+    text-align: center;
+}
+
+#secondary-nav:not(.no-hide) {
+    display: none;
+}
+
 footer {
     text-align: center;
     font-style: oblique;
@@ -225,7 +237,7 @@ footer > :last-child {
     font-size: 1em;
 }
 
-.sidebar, #content, #header, #skippers, #footer {
+.sidebar, #content, #header, #secondary-nav, #skippers, #footer {
     background-color: rgba(0, 0, 0, 0.6);
     border: 1px dotted var(--primary-color);
     border-radius: 3px;
@@ -923,6 +935,10 @@ li > ul {
         display: none;
     }
 
+    #secondary-nav:not(.no-hide) {
+        display: block;
+    }
+
     .layout-columns.vertical-when-thin {
         flex-direction: column;
     }
diff --git a/src/upd8.js b/src/upd8.js
index 241392d1..7a8a37c1 100755
--- a/src/upd8.js
+++ b/src/upd8.js
@@ -854,6 +854,7 @@ writePage.html = (pageInfo, {
         sidebarLeft = {},
         sidebarRight = {},
         nav = {},
+        secondaryNav = {},
         footer = {},
         socialEmbed = {},
     } = pageInfo;
@@ -884,6 +885,10 @@ writePage.html = (pageInfo, {
     nav.content ??= '';
     nav.links ??= [];
 
+    secondaryNav ??= {};
+    secondaryNav.content ??= '';
+    secondaryNav.content ??= '';
+
     footer.classes ??= [];
     footer.content ??= (wikiInfo.footerContent ? transformMultiline(wikiInfo.footerContent) : '');
 
@@ -1005,6 +1010,14 @@ writePage.html = (pageInfo, {
         nav.content
     ]);
 
+    const secondaryNavHTML = html.tag('nav', {
+        [html.onlyIfContent]: true,
+        id: 'secondary-nav',
+        class: secondaryNav.classes
+    }, [
+        secondaryNav.content
+    ]);
+
     const bannerSrc = (
         banner.src ? banner.src :
         banner.path ? to(...banner.path) :
@@ -1026,6 +1039,7 @@ writePage.html = (pageInfo, {
     const layoutHTML = [
         navHTML,
         banner.position === 'top' && bannerHTML,
+        secondaryNavHTML,
         html.tag('div',
             {class: ['layout-columns', !collapseSidebars && 'vertical-when-thin']},
             [