content: generateArtTagSidebar: combine boxes into one

4 files changed, 71 insertions, 37 deletions

diff --git a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
index 6b4e52d..34a45ff 100644
--- a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
+++ b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
@@ -96,7 +96,7 @@ export default {
 
   generate(data, relations, {html, language}) {
     const recursive = (dataNode, relationsNode) =>
-      html.tag('dl', [
+      html.tag('dl', {class: dataNode === data.root && 'tree-list'}, [
         dataNode.displayBriefly &&
           html.tag('dt',
             language.$('artTagSidebar.otherTagsExempt', {
diff --git a/src/content/dependencies/generateArtTagAncestorSidebarBox.js b/src/content/dependencies/generateArtTagAncestorSidebarBox.js
deleted file mode 100644
index ea85c2b..0000000
--- a/src/content/dependencies/generateArtTagAncestorSidebarBox.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  contentDependencies: [
-    'generateArtTagAncestorDescendantMapList',
-    'linkArtTagDynamically',
-  ],
-
-  extraDependencies: ['html'],
-
-  relations: (relation, ancestorArtTag, descendantArtTag) => ({
-    ancestorArtTagLink:
-      relation('linkArtTagDynamically', ancestorArtTag),
-
-    ancestorArtTagMapList:
-      relation('generateArtTagAncestorDescendantMapList',
-        ancestorArtTag,
-        descendantArtTag),
-  }),
-
-  generate: (relations, {html}) => ({
-    content: html.tags([
-      html.tag('h2',
-        relations.ancestorArtTagLink),
-
-      relations.ancestorArtTagMapList,
-    ]),
-  }),
-};
diff --git a/src/content/dependencies/generateArtTagSidebar.js b/src/content/dependencies/generateArtTagSidebar.js
index 51e53d2..b5b4ced 100644
--- a/src/content/dependencies/generateArtTagSidebar.js
+++ b/src/content/dependencies/generateArtTagSidebar.js
@@ -1,8 +1,13 @@
+import {stitchArrays} from '#sugar';
 import {collectTreeLeaves} from '#wiki-data';
 
 export default {
-  contentDependencies: ['generateArtTagAncestorSidebarBox'],
-  extraDependencies: ['wikiData'],
+  contentDependencies: [
+    'generateArtTagAncestorDescendantMapList',
+    'linkArtTagDynamically',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
 
   sprawl: ({artTagData}) =>
     ({artTagData}),
@@ -20,12 +25,43 @@ export default {
   },
 
   relations: (relation, query, sprawl, artTag) => ({
-    ancestorBoxes:
+    artTagLink: relation('linkArtTagDynamically', artTag),
+
+    furthestAncestorArtTagMapLists:
       query.furthestAncestorArtTags
         .map(ancestorArtTag =>
-          relation('generateArtTagAncestorSidebarBox', ancestorArtTag, artTag)),
+          relation('generateArtTagAncestorDescendantMapList',
+            ancestorArtTag,
+            artTag)),
+  }),
+
+  data: query => ({
+    furthestAncestorArtTagNames:
+      query.furthestAncestorArtTags
+        .map(ancestorArtTag => ancestorArtTag.name),
   }),
 
-  generate: (relations) =>
-    ({leftSidebarMultiple: relations.ancestorBoxes}),
+  generate: (data, relations, {html, language}) => ({
+    leftSidebarContent: [
+      html.tag('h1',
+        relations.artTagLink),
+
+      stitchArrays({
+        name: data.furthestAncestorArtTagNames,
+        list: relations.furthestAncestorArtTagMapLists,
+      }).map(({name, list}) =>
+          html.tag('details',
+            {
+              class: 'has-tree-list',
+              open: relations.furthestAncestorArtTagMapLists.length === 1,
+            },
+            [
+              html.tag('summary',
+                html.tag('span', {class: 'group-name'},
+                  language.sanitize(name))),
+
+              list,
+            ])),
+    ],
+  }),
 };
diff --git a/src/static/site4.css b/src/static/site4.css
index 6dd19d8..9c1f02c 100644
--- a/src/static/site4.css
+++ b/src/static/site4.css
@@ -348,12 +348,37 @@ body::before {
   margin-left: 0;
 }
 
-.sidebar dl > dd > dl {
+.sidebar > dl .side {
+  padding-left: 10px;
+}
+
+.sidebar details.has-tree-list[open] summary {
+  font-weight: 800;
+}
+
+.sidebar dl.tree-list {
+  margin-top: 0.25em;
+  line-height: 1.25em;
   padding-left: 15px;
 }
 
-.sidebar > dl .side {
-  padding-left: 10px;
+.sidebar dl.tree-list dt {
+  display: list-item;
+  list-style-type: disc;
+  padding-left: 0;
+  margin-left: 20px;
+}
+
+.sidebar dl.tree-list dl {
+  padding-left: 15px;
+}
+
+.sidebar dl.tree-list dd {
+  margin-left: 0;
+}
+
+.sidebar dl.tree-list .current {
+  font-weight: 800;
 }
 
 .sidebar li.current {