From 8fa2a306dbd74accf77028669b3a1e69f6bbeafc Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 16 Oct 2024 00:42:37 -0300 Subject: content, css: series nav presentation tweaks --- .../generateAlbumSecondaryNavSeriesPart.js | 1 + src/content/dependencies/generateAlbumSidebar.js | 24 +++++++++++++++++----- src/static/css/site.css | 18 ++++++++++++++++ src/strings-default.yaml | 4 ++-- 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: -- cgit 1.3.0-6-gf8a5