content: generateTrackReleaseBox

4 files changed, 85 insertions, 1 deletions

diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index bd53ef71..19fa7ee7 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -7,6 +7,7 @@ export default {
     'generateAlbumSidebarTrackListBox',
     'generatePageSidebar',
     'generatePageSidebarConjoinedBox',
+    'generateTrackReleaseBox',
   ],
 
   extraDependencies: ['html', 'wikiData'],
@@ -63,10 +64,16 @@ export default {
       query.disconnectedSerieses
         .map(series =>
           relation('generateAlbumSidebarSeriesBox', album, series)),
+
+    trackReleaseBoxes:
+      track.otherReleases
+        .map(track =>
+          relation('generateTrackReleaseBox', track)),
   }),
 
   data: (_query, _sprawl, _album, track) => ({
     isAlbumPage: !track,
+    isTrackPage: !!track,
   }),
 
   generate(data, relations, {html}) {
@@ -98,9 +105,12 @@ export default {
             ]),
         ],
 
+        data.isTrackPage &&
+          relations.trackReleaseBoxes,
+
         relations.trackListBox,
 
-        !data.isAlbumPage &&
+        data.isTrackPage &&
           relations.conjoinedBox.slots({
             attributes: {class: 'conjoined-group-sidebar-box'},
             boxes:
diff --git a/src/content/dependencies/generateTrackReleaseBox.js b/src/content/dependencies/generateTrackReleaseBox.js
new file mode 100644
index 00000000..ef02e2b9
--- /dev/null
+++ b/src/content/dependencies/generateTrackReleaseBox.js
@@ -0,0 +1,46 @@
+export default {
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generatePageSidebarBox',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, track) => ({
+    box:
+      relation('generatePageSidebarBox'),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', track.album.color),
+
+    trackLink:
+      relation('linkTrack', track),
+  }),
+
+  data: (track) => ({
+    albumName:
+      track.album.name,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('albumSidebar.releaseBox', boxCapsule =>
+      relations.box.slots({
+        attributes: [
+          {class: 'track-release-sidebar-box'},
+          relations.colorStyle,
+        ],
+
+        content: [
+          html.tag('h1',
+            language.$(boxCapsule, 'title', {
+              album:
+                relations.trackLink.slots({
+                  color: false,
+                  content:
+                    language.sanitize(data.albumName),
+                }),
+            })),
+        ],
+      })),
+};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index c44d0cfe..bf9ec3be 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -548,6 +548,27 @@ summary.underline-white > span:hover a:not(:hover) {
   margin-top: 0 !important;
 }
 
+.track-release-sidebar-box {
+  --content-padding: 3px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: var(--dark-color), var(--bg-black-color);
+}
+
+.track-release-sidebar-box h1 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 0.9em;
+  font-style: oblique;
+}
+
+.track-release-sidebar-box + .track-release-sidebar-box,
+.track-release-sidebar-box + .track-list-sidebar-box {
+  margin-top: 5px !important;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .wiki-search-sidebar-box {
   padding: 1px 0 0 0;
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 574f9922..b1a4d9a4 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -975,6 +975,13 @@ albumSidebar:
     next: "Next: {ALBUM}"
     previous: "Previous: {ALBUM}"
 
+  # releaseBox:
+  #   This is the narrow box for alternate releases of the
+  #   current track.
+
+  releaseBox:
+    title: "{ALBUM}"
+
 #
 # albumSecondaryNav:
 #   The secondary nav bar is shown in medium and thin layouts,