redesign & refinements for sticky layouting

5 files changed, 52 insertions, 21 deletions

diff --git a/src/page/album.js b/src/page/album.js
index e7658cda..741fcaba 100644
--- a/src/page/album.js
+++ b/src/page/album.js
@@ -131,9 +131,14 @@ export function write(album, {wikiData}) {
       return {
         title: language.$('albumPage.title', {album: album.name}),
         stylesheet: getAlbumStylesheet(album),
-        theme: getThemeString(album.color, [
-          `--album-directory: ${album.directory}`,
-        ]),
+
+        themeColor: album.color,
+        theme:
+          getThemeString(album.color, {
+            additionalVariables: [
+              `--album-directory: ${album.directory}`,
+            ],
+          }),
 
         banner: !empty(album.bannerArtistContribs) && {
           dimensions: album.bannerDimensions,
@@ -463,15 +468,26 @@ export function generateAlbumSidebar(album, currentTrack, {
     ]);
 
   if (empty(groupParts)) {
-    return {content: trackListPart};
+    return {
+      stickyMode: 'column',
+      content: trackListPart,
+    };
   } else if (isTrackPage) {
-    const combinedGroupPart =
-      groupParts
+    const combinedGroupPart = {
+      classes: ['no-sticky-header'],
+      content: groupParts
         .map(groupPart => groupPart.filter(Boolean).join('\n'))
-        .join('\n<hr>\n');
-    return {multiple: [trackListPart, combinedGroupPart]};
+        .join('\n<hr>\n'),
+    };
+    return {
+      stickyMode: 'column',
+      multiple: [trackListPart, combinedGroupPart],
+    };
   } else {
-    return {multiple: [...groupParts, trackListPart]};
+    return {
+      stickyMode: 'last',
+      multiple: [...groupParts, trackListPart],
+    };
   }
 }
 
diff --git a/src/page/flash.js b/src/page/flash.js
index be07039b..1e818ae9 100644
--- a/src/page/flash.js
+++ b/src/page/flash.js
@@ -28,22 +28,27 @@ export function write(flash, {wikiData}) {
       language,
     }) => ({
       title: language.$('flashPage.title', {flash: flash.name}),
-      theme: getThemeString(flash.color, [
-        `--flash-directory: ${flash.directory}`,
-      ]),
+
+      themeColor: flash.color,
+      theme:
+        getThemeString(flash.color, {
+          additionalVariables: [
+            `--flash-directory: ${flash.directory}`,
+          ],
+        }),
 
       main: {
         content: [
-          html.tag('h1',
-            language.$('flashPage.title', {
-              flash: flash.name,
-            })),
-
           generateCoverLink({
             src: getFlashCover(flash),
             alt: language.$('misc.alt.flashArt'),
           }),
 
+          html.tag('h1',
+            language.$('flashPage.title', {
+              flash: flash.name,
+            })),
+
           html.tag('p',
             language.$('releaseInfo.released', {
               date: language.formatDate(flash.date),
diff --git a/src/page/group.js b/src/page/group.js
index b181bcb2..1d586cf5 100644
--- a/src/page/group.js
+++ b/src/page/group.js
@@ -40,6 +40,8 @@ export function write(group, {wikiData}) {
       transformMultiline,
     }) => ({
       title: language.$('groupInfoPage.title', {group: group.name}),
+
+      themeColor: group.color,
       theme: getThemeString(group.color),
 
       main: {
@@ -132,6 +134,8 @@ export function write(group, {wikiData}) {
       link,
     }) => ({
       title: language.$('groupGalleryPage.title', {group: group.name}),
+
+      themeColor: group.color,
       theme: getThemeString(group.color),
 
       main: {
diff --git a/src/page/homepage.js b/src/page/homepage.js
index 7295ba09..105c402f 100644
--- a/src/page/homepage.js
+++ b/src/page/homepage.js
@@ -107,6 +107,7 @@ export function writeTargetless({wikiData}) {
       sidebarLeft: homepageLayout.sidebarContent && {
         wide: true,
         collapse: false,
+        stickyMode: 'none',
         // This is a pretty filthy hack! 8ut otherwise, the [[news]] part
         // gets treated like it's a reference to the track named "news",
         // which o8viously isn't what we're going for. Gotta catch that
diff --git a/src/page/track.js b/src/page/track.js
index 4095f75a..18fd7262 100644
--- a/src/page/track.js
+++ b/src/page/track.js
@@ -187,10 +187,15 @@ export function write(track, {wikiData}) {
       return {
         title: language.$('trackPage.title', {track: track.name}),
         stylesheet: getAlbumStylesheet(album, {to}),
-        theme: getThemeString(track.color, [
-          `--album-directory: ${album.directory}`,
-          `--track-directory: ${track.directory}`,
-        ]),
+
+        themeColor: track.color,
+        theme:
+          getThemeString(track.color, {
+            additionalVariables: [
+              `--album-directory: ${album.directory}`,
+              `--track-directory: ${track.directory}`,
+            ]
+          }),
 
         socialEmbed: {
           heading: language.$('trackPage.socialEmbed.heading', {