Skip to content

fix(layout): consolidate 2 sidebar layout across content types #1265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LeoMcA merged 12 commits into from
Feb 3, 2026
Merged

fix(layout): consolidate 2 sidebar layout across content types #1265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b489659
add --layout-sidebar-padding variable and refactor
LeoMcA Dec 9, 2025
43eb0d9
don't set layout styles on .left-sidebar
LeoMcA Dec 9, 2025
86c3cd6
duplicate reference-layout to layout/2-sidebars
LeoMcA Dec 9, 2025
1c2c6c1
remove layout stuff from reference-layout and reference-layout stuff …
LeoMcA Dec 9, 2025
1827cbc
make names more generic in 2-sidebars and apply to reference-layout
LeoMcA Dec 9, 2025
2c79206
remove unused `reference-layout__*` classes
LeoMcA Dec 9, 2025
3d8dce2
split 2-sidebars into two classes
LeoMcA Dec 10, 2025
e63640c
use layout__2-sidebars in generic-layout
LeoMcA Dec 10, 2025
fe52381
hide top banner when content is in single column mode
LeoMcA Dec 10, 2025
5d10a90
use layout__2-sidebars-inline across curriculum
LeoMcA Dec 10, 2025
867eb91
update readme
LeoMcA Dec 10, 2025
d07c4c6
fix observatory docs sidebar padding
LeoMcA Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions components/curriculum-about/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,33 @@ export class CurriculumAbout extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-about curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
21 changes: 15 additions & 6 deletions components/curriculum-default/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,24 +29,33 @@ export class CurriculumDefault extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-default curriculum-about curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle.join(" ")}</h1>
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
21 changes: 15 additions & 6 deletions components/curriculum-module/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,17 @@ export class CurriculumModule extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-module topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
${doc?.topic ? renderTopicIcon(context, doc.topic) : nothing}
<h1>${doc?.title}</h1>
${doc?.topic
Expand All @@ -48,16 +52,21 @@ export class CurriculumModule extends ServerComponent {
? html`<p class="module-group">${doc.group}</p>`
: nothing}
</header>
<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>
<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
${this.renderPrevNext(context, doc)}
</div>
</main>
<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
Expand Down
51 changes: 15 additions & 36 deletions components/curriculum-overview/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,28 @@ export class CurriculumOverview extends ServerComponent {
return PageLayout.render(
context,
html`
<div class="curriculum-layout curriculum-content-container">
<div
class="layout__2-sidebars-inline curriculum-layout curriculum-content-container"
>
<main
id="content"
class="curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
class="layout__content curriculum-layout__content curriculum-content-container curriculum-overview topic-${topicCssClass}"
lang=${doc.locale}
>
<header class="curriculum-layout__header curriculum-content">
<header
class="layout__header curriculum-layout__header curriculum-content"
>
<h1><span>${coloredTitle}</span> ${restTitle}</h1>
</header>

<aside class="curriculum-layout__toc">
<aside class="layout__right-sidebar curriculum-layout__toc">
${toc}
<mdn-placement-sidebar></mdn-placement-sidebar>
</aside>

<div class="curriculum-layout__body curriculum-content">
<div
class="layout__body curriculum-layout__body curriculum-content"
>
${renderCurriculumBody(context, doc)}
${doc?.modules && doc.modules.length > 0
? html`
Expand All @@ -65,41 +71,14 @@ export class CurriculumOverview extends ServerComponent {
</div>
</main>

<aside class="curriculum-layout__sidebar" id="main-sidebar">
<aside
class="layout__left-sidebar curriculum-layout__sidebar"
id="main-sidebar"
>
${sidebar}
</aside>
</div>
`,

// html`
// <main
// id="content"
// class="curriculum-content-container container curriculum-overview topic-${topicCssClass}"
// >
// ${sidebar}
// <article id="content" class="curriculum-content" lang=${doc.locale}>
// <header>
// <h1><span>${coloredTitle}</span> ${restTitle}</h1>
// </header>
// ${renderCurriculumBody(context, doc)}
// ${doc?.modules && doc.modules.length > 0
// ? html`
// <section class="module-contents">
// <h2>Module list</h2>
// ${renderModulesList(context, doc.modules)}
// </section>
// `
// : nothing}
// ${this.renderPrevNext(context, doc)}
// </article>
// <div class="toc-container">
// <aside class="toc">
// <nav>${toc}</nav>
// </aside>
// <mdn-placement-sidebar></mdn-placement-sidebar>
// </div>
// </main>
// `,
);
}

Expand Down
79 changes: 2 additions & 77 deletions components/curriculum/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,27 @@
.curriculum-content-container {
display: grid;

grid-template-areas:
"sidebar . header . toc"
"sidebar . body . toc";
grid-template-rows: min-content auto;
grid-template-columns: var(--layout-2-sidebars);

justify-content: space-between;

padding-inline: var(--layout-side-padding);

.curriculum-layout__content {
display: contents;
}

.curriculum-layout__header {
grid-area: header;
}
@import url("../layout/2-sidebars.css");

.curriculum-content-container {
.curriculum-layout__body {
grid-area: body;
padding-bottom: 3rem;
}

.curriculum-layout__sidebar {
grid-area: sidebar;
padding-top: 0;

@media (--screen-layout-2-sidebars) {
.left-sidebar {
padding-right: calc(var(--layout-sidebar-gap) / 2);
margin-right: calc(var(--layout-sidebar-gap) / -2);
}
}
}

.curriculum-layout__toc {
display: flex;

flex-wrap: wrap;

grid-area: toc;

gap: 0.5rem;
align-content: start;
align-items: start;
justify-content: space-between;
}

.curriculum-layout__sidebar .left-sidebar,
.curriculum-layout__toc {
position: sticky;
top: var(--sticky-header-height);

max-height: calc(100vh - var(--sticky-header-height));

overflow-y: auto;
}

@media (--screen-layout-1-sidebar-or-less) {
grid-template-areas:
"toc . header"
"toc . body";
grid-template-columns: var(--layout-1-sidebar-left);

.curriculum-layout__sidebar {
z-index: 1;

display: none;

grid-area: toc;

background: var(--color-background-page);
}
}

@media (--screen-layout-no-sidebar) {
display: block;

.curriculum-layout__sidebar {
position: fixed;
inset: 0;
top: var(--sticky-header-height);
z-index: var(--z-index-sidebar-mobile);

.left-sidebar {
padding: 1rem;
}
}

.curriculum-layout__toc {
position: unset;
top: unset;

max-height: unset;

overflow-y: unset;
--toc-header-font-size: var(--font-size-larger);
}
}
Expand Down
4 changes: 0 additions & 4 deletions components/curriculum/sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.curriculum-content-container .left-sidebar {
position: sticky;
top: var(--sticky-header-height);

padding-bottom: 3rem;

overflow-wrap: anywhere;

ol {
Expand Down
4 changes: 1 addition & 3 deletions components/curriculum/toc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.curriculum-content-container {
.curriculum-layout__toc {
padding: 2px;

.document-toc {
padding: 0;
margin-bottom: 2rem;
Expand Down Expand Up @@ -83,7 +81,7 @@
}
}

@media (--screen-small-and-narrower) {
@media (--screen-layout-no-sidebar) {
padding: 0 1rem;
}

Expand Down
Loading
Loading