content, css: series nav presentation tweaks

4 files changed, 40 insertions, 7 deletions

diff --git a/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js
index 4cba4cf3..47ba6ef6 100644
--- a/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js
+++ b/src/content/dependencies/generateAlbumSecondaryNavSeriesPart.js
@@ -63,6 +63,7 @@ export default {
   generate: (data, relations, slots, {html, language}) =>
     html.tag('span',
       {class: 'nav-link'},
+      {class: 'series-nav-link'},
 
       relations.colorStyle
         .slot('context', 'primary-only'),
diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js
index ec1b670f..3dbe3867 100644
--- a/src/content/dependencies/generateAlbumSidebar.js
+++ b/src/content/dependencies/generateAlbumSidebar.js
@@ -9,6 +9,8 @@ export default {
     'generatePageSidebarConjoinedBox',
   ],
 
+  extraDependencies: ['html'],
+
   query(album) {
     const query = {};
 
@@ -50,20 +52,33 @@ export default {
     isAlbumPage: !track,
   }),
 
-  generate(data, relations) {
+  generate(data, relations, {html}) {
+    for (const box of [
+      ...relations.groupBoxes,
+      ...relations.seriesBoxes.flat(),
+    ]) {
+      box.setSlot('mode',
+        data.isAlbumPage ? 'album' : 'track');
+    }
+
     const groupAndSeriesBoxes =
       stitchArrays({
         groupBox: relations.groupBoxes,
         seriesBoxes: relations.seriesBoxes,
       }).map(({groupBox, seriesBoxes}) =>
-          [groupBox, ...seriesBoxes])
+          [groupBox].concat(
+            seriesBoxes.map(seriesBox => [
+              html.tag('div',
+                {class: 'sidebar-box-joiner'},
+                {class: 'collapsible'}),
+              seriesBox,
+            ])))
         .flat();
 
     return relations.sidebar.slots({
       boxes: [
         data.isAlbumPage &&
-          groupAndSeriesBoxes
-            .map(box => box.slot('mode', 'album')),
+          groupAndSeriesBoxes,
 
         relations.trackListBox,
 
@@ -72,7 +87,6 @@ export default {
             attributes: {class: 'conjoined-group-sidebar-box'},
             boxes:
               groupAndSeriesBoxes
-                .map(box => box.slot('mode', 'track'))
                 .map(box => box.content), /* TODO: Kludge. */
           }),
       ],
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 14a1a406..2b82b07e 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -478,6 +478,18 @@ summary.underline-white > span:hover a:not(:hover) {
   align-self: flex-start !important; /* pls */
 }
 
+.sidebar-box-joiner {
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+  border-right: 1px dashed var(--primary-color);
+  height: 10px;
+}
+
+.sidebar-box-joiner + .sidebar {
+  margin-top: 0 !important;
+}
+
 .wiki-search-sidebar-box {
   padding: 1px 0 0 0;
 
@@ -830,6 +842,11 @@ a:not([href]):hover {
   content: "\0020/\0020";
 }
 
+.nav-links-groups .series-nav-link:not(:first-child)::before {
+  content: "\0020»\0020";
+  font-weight: normal;
+}
+
 .dot-switcher > span:not(:first-child)::before {
   content: "\0020\00b7\0020";
   font-weight: 800;
@@ -2907,6 +2924,7 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
 
 @media (max-width: 899.98px) {
   .sidebar.collapsible,
+  .sidebar-box-joiner.collapsible,
   .sidebar-column.all-boxes-collapsible {
     display: none;
   }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 0d4bdecd..761d9c3b 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -944,10 +944,10 @@ albumSecondaryNav:
     {GROUP} ({PREVIOUS_NEXT})
 
   series: >-
-    Series: {SERIES}
+    {SERIES}
 
   series.withPreviousNext: >-
-    Series: {SERIES} ({PREVIOUS_NEXT})
+    {SERIES} ({PREVIOUS_NEXT})
 
 #
 # albumPage: