From 1f1fccde8dee31ac8428d8b991815b170971ccca Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 30 Apr 2024 17:27:28 -0300 Subject: content: generatePageSidebarBox: collapsible slot Makes collapsibility a function of the boxes in a sidebar, rather than a property of the sidebar (column) itself. --- src/content/dependencies/generatePageLayout.js | 22 ++++------------ src/content/dependencies/generatePageSidebar.js | 30 +++++++++------------- src/content/dependencies/generatePageSidebarBox.js | 8 ++++++ .../dependencies/generateWikiHomeNewsBox.js | 2 ++ src/content/dependencies/generateWikiHomePage.js | 3 ++- src/static/site6.css | 9 ++++--- 6 files changed, 34 insertions(+), 40 deletions(-) diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js index 927d45a1..0bf34540 100644 --- a/src/content/dependencies/generatePageLayout.js +++ b/src/content/dependencies/generatePageLayout.js @@ -390,14 +390,6 @@ export default { const hasSidebarLeft = !html.isBlank(html.resolve(leftSidebar)); const hasSidebarRight = !html.isBlank(html.resolve(rightSidebar)); - const collapseSidebars = - (hasSidebarLeft - ? leftSidebar.getSlotValue('collapse') - : true) && - (hasSidebarRight - ? rightSidebar.getSlotValue('collapse') - : true); - const processSkippers = skipperList => skipperList .filter(({condition, id}) => @@ -509,15 +501,11 @@ export default { slots.secondaryNav, - html.tag('div', {class: 'layout-columns'}, - !collapseSidebars && - {class: 'vertical-when-thin'}, - - [ - leftSidebar, - mainHTML, - rightSidebar, - ]), + html.tag('div', {class: 'layout-columns'}, [ + leftSidebar, + mainHTML, + rightSidebar, + ]), slots.bannerPosition === 'bottom' && slots.banner, diff --git a/src/content/dependencies/generatePageSidebar.js b/src/content/dependencies/generatePageSidebar.js index dda75dd3..43015aa3 100644 --- a/src/content/dependencies/generatePageSidebar.js +++ b/src/content/dependencies/generatePageSidebar.js @@ -30,16 +30,6 @@ export default { default: 'static', }, - // Collapsing sidebars disappear when the viewport is sufficiently - // thin. (This is the default.) Override as false to make the sidebar - // stay visible in thinner viewports, where the page layout will be - // reflowed so the sidebar is as wide as the screen and appears below - // nav, above the main content. - collapse: { - type: 'boolean', - default: true, - }, - // Wide sidebars generally take up more horizontal space in the normal // page layout, and should be used if the content of the sidebar has // a greater than typical focus compared to main content. @@ -58,22 +48,26 @@ export default { attributes.add(slots.attributes); - if (slots.class) { - attributes.add('class', slots.class); - } - if (slots.wide) { attributes.add('class', 'wide'); } - if (!slots.collapse) { - attributes.add('class', 'no-hide'); - } - if (slots.stickyMode !== 'static') { attributes.add('class', `sticky-${slots.stickyMode}`); } + const {content: boxes} = html.smooth(slots.boxes); + + const allBoxesCollapsible = + boxes.every(box => + html.resolve(box) + .attributes + .has('class', 'collapsible')); + + if (allBoxesCollapsible) { + attributes.add('class', 'all-boxes-collapsible'); + } + if (html.isBlank(slots.boxes)) { return html.blank(); } else { diff --git a/src/content/dependencies/generatePageSidebarBox.js b/src/content/dependencies/generatePageSidebarBox.js index 51835452..e11efc3f 100644 --- a/src/content/dependencies/generatePageSidebarBox.js +++ b/src/content/dependencies/generatePageSidebarBox.js @@ -11,10 +11,18 @@ export default { type: 'attributes', mutable: false, }, + + collapsible: { + type: 'boolean', + default: true, + }, }, generate: (slots, {html}) => html.tag('div', {class: 'sidebar'}, + slots.collapsible && + {class: 'collapsible'}, + slots.attributes, slots.content), }; diff --git a/src/content/dependencies/generateWikiHomeNewsBox.js b/src/content/dependencies/generateWikiHomeNewsBox.js index e054edda..bd0e4797 100644 --- a/src/content/dependencies/generateWikiHomeNewsBox.js +++ b/src/content/dependencies/generateWikiHomeNewsBox.js @@ -46,6 +46,8 @@ export default { return relations.box.slots({ attributes: {class: 'latest-news-sidebar-box'}, + collapsible: false, + content: [ html.tag('h1', language.$('homepage.news.title')), diff --git a/src/content/dependencies/generateWikiHomePage.js b/src/content/dependencies/generateWikiHomePage.js index 35461d03..ee14a587 100644 --- a/src/content/dependencies/generateWikiHomePage.js +++ b/src/content/dependencies/generateWikiHomePage.js @@ -79,13 +79,14 @@ export default { leftSidebar: relations.sidebar.slots({ - collapse: false, wide: true, boxes: [ relations.customSidebarContent && relations.customSidebarBox.slots({ attributes: {class: 'custom-content-sidebar-box'}, + collapsible: false, + content: relations.customSidebarContent .slot('mode', 'multiline'), diff --git a/src/static/site6.css b/src/static/site6.css index b27a1fbb..66518d3b 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -2313,7 +2313,8 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content /* Layout - Medium or Thin */ @media (max-width: 899.98px) { - .sidebar-column:not(.no-hide) { + .sidebar.collapsible, + .sidebar-column.all-boxes-collapsible { display: none; } @@ -2321,15 +2322,15 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content display: block; } - .layout-columns.vertical-when-thin { + .layout-columns { flex-direction: column; } - .layout-columns.vertical-when-thin > *:not(:last-child) { + .layout-columns > *:not(:last-child) { margin-bottom: 10px; } - .sidebar-column.no-hide { + .sidebar-column { max-width: unset !important; flex-basis: unset !important; margin-right: 0 !important; -- cgit 1.3.0-6-gf8a5