diff options
-rw-r--r-- | src/page/album.js | 5 | ||||
-rw-r--r-- | src/static/site.css | 12 | ||||
-rwxr-xr-x | src/upd8.js | 9 |
3 files changed, 22 insertions, 4 deletions
diff --git a/src/page/album.js b/src/page/album.js index 472d89f1..030b7778 100644 --- a/src/page/album.js +++ b/src/page/album.js @@ -464,7 +464,10 @@ export function generateAlbumNavLinks(album, currentTrack, { } export function generateAlbumChronologyLinks(album, currentTrack, {generateChronologyLinks}) { - return html.tag('div', {class: 'nav-chronology-links'}, [ + return html.tag('div', { + [html.onlyIfContent]: true, + class: 'nav-chronology-links', + }, [ currentTrack && generateChronologyLinks(currentTrack, { contribKey: 'artistContribs', getThings: artist => [...artist.tracksAsArtist, ...artist.tracksAsContributor], diff --git a/src/static/site.css b/src/static/site.css index 7d1f4747..553172a5 100644 --- a/src/static/site.css +++ b/src/static/site.css @@ -121,12 +121,22 @@ a:hover { #header { display: grid; - grid-template-columns: max-content 3fr; +} + +#header.nav-has-main-links.nav-has-content { + grid-template-columns: 2.5fr 3fr; grid-template-areas: "main-links content" "bottom-row content"; } +#header.nav-has-main-links:not(.nav-has-content) { + grid-template-columns: 1fr; + grid-template-areas: + "main-links" + "bottom-row"; +} + .nav-main-links { grid-area: main-links; margin-right: 20px; diff --git a/src/upd8.js b/src/upd8.js index d1077fbb..d9bca28f 100755 --- a/src/upd8.js +++ b/src/upd8.js @@ -1013,12 +1013,17 @@ writePage.html = (pageInfo, { const navHTML = html.tag('nav', { [html.onlyIfContent]: true, id: 'header', - class: nav.classes + class: [ + ...nav.classes, + links.length && 'nav-has-main-links', + nav.content && 'nav-has-content', + nav.bottomRowContent && 'nav-has-bottom-row', + ], }, [ links.length && html.tag('div', {class: ['nav-main-links', ...nav.linkContainerClasses]}, navLinkParts), - html.tag('div', {class: 'nav-content'}, nav.content), + nav.content && html.tag('div', {class: 'nav-content'}, nav.content), nav.bottomRowContent && html.tag('div', {class: 'nav-bottom-row'}, nav.bottomRowContent), ]); |