content, css: listArtTagNetwork: style tweaks

2 files changed, 74 insertions, 13 deletions

diff --git a/src/content/dependencies/listArtTagNetwork.js b/src/content/dependencies/listArtTagNetwork.js
index 8ff0a609..830c5929 100644
--- a/src/content/dependencies/listArtTagNetwork.js
+++ b/src/content/dependencies/listArtTagNetwork.js
@@ -27,14 +27,14 @@ export default {
        {directAncestorArtTags: ancestorsB}) =>
         ancestorsA.length - ancestorsB.length);
 
-    const recursive = (artTag, asRoot) => {
+    const recursive = (artTag, depth) => {
       const descendantNodes =
         (empty(artTag.directDescendantArtTags)
           ? null
-       : !asRoot && artTag.directAncestorArtTags.length >= 2
+       : depth > 0 && artTag.directAncestorArtTags.length >= 2
           ? null
           : artTag.directDescendantArtTags
-              .map(artTag => recursive(artTag, false)));
+              .map(artTag => recursive(artTag, depth + 1)));
 
       descendantNodes?.sort(
         ({descendantNodes: descendantNodesA},
@@ -48,7 +48,7 @@ export default {
           : ancestorArtTag);
 
       const ancestorRootArtTags =
-        (asRoot && !empty(artTag.directAncestorArtTags)
+        (depth === 0 && !empty(artTag.directAncestorArtTags)
           ? unique(artTag.directAncestorArtTags.map(recursiveGetRootAncestor))
           : null);
 
@@ -74,7 +74,7 @@ export default {
 
       rootNodes:
         rootArtTags
-          .map(artTag => recursive(artTag, true)),
+          .map(artTag => recursive(artTag, 0)),
 
       uppermostRootTags,
       orphanArtTags,
@@ -148,13 +148,14 @@ export default {
   generate(data, relations, {html, language}) {
     const prefix = `listingPage.listArtTags.network`;
 
-    const recursive = (dataNode, relationsNode, asRoot) => [
+    const recursive = (dataNode, relationsNode, depth) => [
       html.tag('dt',
-        (asRoot
-          ? {id: dataNode.directory}
-          : {}),
+        {
+          id: depth === 0 && dataNode.directory,
+          class: depth % 2 === 0 ? 'even' : 'odd',
+        },
 
-        (asRoot
+        (depth === 0
           ? (relationsNode.ancestorTagLinks
               ? language.$(prefix, 'root.withAncestors', {
                   tag: relationsNode.artTagLink,
@@ -190,19 +191,20 @@ export default {
       dataNode.descendantNodes &&
       relationsNode.descendantNodes &&
         html.tag('dd',
+          {class: depth % 2 === 0 ? 'even' : 'odd'},
           html.tag('dl',
             stitchArrays({
               dataNode: dataNode.descendantNodes,
               relationsNode: relationsNode.descendantNodes,
             }).map(({dataNode, relationsNode}) =>
-                recursive(dataNode, relationsNode, false)))),
+                recursive(dataNode, relationsNode, depth + 1)))),
     ];
 
     return relations.page.slots({
       type: 'custom',
 
       content: [
-        html.tag('dl', [
+        html.tag('dl', {id: 'network-top-dl'}, [
           html.tag('dt', {id: 'top'},
             language.$(prefix, 'jumpToRoot.title')),
 
@@ -225,7 +227,7 @@ export default {
             dataNode: data.rootNodes,
             relationsNode: relations.rootNodes,
           }).map(({dataNode, relationsNode}) =>
-              recursive(dataNode, relationsNode, true)),
+              recursive(dataNode, relationsNode, 0)),
 
           !empty(relations.orphanArtTagLinks) && [
             html.tag('dt',
diff --git a/src/static/css/site.css b/src/static/css/site.css
index e7fb98a2..b5433d6a 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1985,6 +1985,65 @@ h1 a[href="#additional-names-box"]:hover {
   vertical-align: text-bottom;
 }
 
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd) {
+  margin-left: 20px;
+  margin-bottom: 0;
+  padding-left: 10px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd):not(:last-child) {
+  padding-bottom: 20px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt {
+  padding-left: 10px;
+  margin-left: 20px;
+  margin-bottom: 0;
+  padding-bottom: 2px;
+  max-width: unset;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).even,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).even {
+  border-left: 1px solid #eaeaea;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).odd,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).odd {
+  border-left: 1px solid #7b7b7b;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt {
+  position: relative;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).odd::after,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).odd::after {
+  content: "";
+  display: block;
+  width: 7px;
+  height: 7px;
+  background: #7b7b7b;
+  position: absolute;
+  bottom: -4px;
+  left: -4px;
+}
+
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).even::after,
+html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).even::after {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: #eaeaea;
+  position: absolute;
+  bottom: -3px;
+  left: -3px;
+  border-bottom-right-radius: 6px;
+  border-top-left-radius: 3px;
+}
+
 /* Images */
 
 .image-container {