Skip to content

Commit b5bb96e

Browse files
caugnercaugner
authored
fix(sidebar): unify sections by declaring them with CSS classes (#9930)
* fix(macros): add "no-link" class to text section titles Link section titles have two additional CSS properties that caused them to be positioned differently than pure text section titles. * refactor(sidebar): replace `<strong>` with .section class * chore(sidebar): reduce section margin-top to 1.5rem * chore(sidebar): remove unused data-default-state attrs * test(sidebar): update expectation * fixup! test(sidebar): update expectation
1 parent 4c89c2a commit b5bb96e

21 files changed

+53
-53
lines changed

Diff for: ‎client/src/document/organisms/sidebar/index.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,16 @@
3838
}
3939
}
4040

41-
.no-link {
42-
display: inline-flex;
43-
padding: 0.25rem;
44-
}
45-
46-
// TODO: Find these and add a class, if possible. These are section headings
47-
strong {
41+
li.section {
4842
display: flex;
4943
font-size: var(--type-base-font-size-rem);
50-
margin-top: 1rem;
44+
font-weight: var(--font-body-strong-weight);
45+
letter-spacing: 0.02rem;
46+
margin-top: 1.5rem;
47+
48+
&.no-link {
49+
padding: 0.25rem;
50+
}
5151
}
5252

5353
li:first-of-type strong {

Diff for: ‎kumascript/macros/APIRef.ejs

+2-2
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,10 @@ function buildIFList(interfaces, title) {
217217
// output
218218
output = '<section id="Quick_links" data-macro="APIRef"><ol>';
219219
if (group && webAPIGroups[0][group] && webAPIGroups[0][group].overview) {
220-
output += `<li><strong>${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</strong></li>`;
220+
output += `<li class="section">${web.smartLink(APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_'), null, webAPIGroups[0][group].overview[0], APIHref, null, "APIRef")}</li>`;
221221
}
222222
223-
output += `<li><strong>${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</strong></li>`;
223+
output += `<li class="section">${web.smartLink(APIHref + '/' + mainIF, null, `<code>${mainIF}</code>`, APIHref, null, "APIRef")}</li>`;
224224
225225
if (ctors.length > 0) {
226226
output += await buildSublist(ctors, text['Constructor']);

Diff for: ‎kumascript/macros/AddonSidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ var text = mdn.localStringMap({
146146
async function renderRootItem(slug) {
147147
const [link, title] = await getPageLinkAndTitle(slug);
148148
149-
return `<li><a href="${link}"><strong>${title}</strong></a></li>`
149+
return `<li class="section"><a href="${link}">${title}</a></li>`
150150
}
151151
152152
async function renderItems(slugs) {

Diff for: ‎kumascript/macros/AddonSidebarMain.ejs

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ var text = mdn.localStringMap({
6363

6464
<section id="Quick_links" data-macro="AddonSidebarMain">
6565
<ol>
66-
<li><a href="<%=baseURL%>WebExtensions"><strong><%=text['WebExtensions']%></strong></a></li>
67-
<li><a href="https://extensionworkshop.com/documentation/themes/"><strong><%=text['Themes']%></strong></a></li>
68-
<li><a href="https://discourse.mozilla.org/c/add-ons"><strong><%=text['Community_and_Support']%></strong></a></li>
66+
<li class="section"><a href="<%=baseURL%>WebExtensions"><%=text['WebExtensions']%></a></li>
67+
<li class="section"><a href="https://extensionworkshop.com/documentation/themes/"><%=text['Themes']%></a></li>
68+
<li class="section"><a href="https://discourse.mozilla.org/c/add-ons"><%=text['Community_and_Support']%></a></li>
6969
<li class="toggle">
7070
<details>
7171
<summary><%=text['Channels']%></summary>

Diff for: ‎kumascript/macros/CSSRef.ejs

+6-6
Original file line numberDiff line numberDiff line change
@@ -1111,8 +1111,8 @@ async function buildPropertylist(pages, title) {
11111111
<section id="Quick_links" data-macro="CSSRef">
11121112

11131113
<ol>
1114-
<li><a href="/<%=locale%>/docs/Web/CSS"><strong>CSS</strong></a></li>
1115-
<li><a href="<%=learnURL%>CSS"><strong><%=text['Tutorials']%></strong></a></li>
1114+
<li class="section"><a href="/<%=locale%>/docs/Web/CSS">CSS</a></li>
1115+
<li class="section"><a href="<%=learnURL%>CSS"><%=text['Tutorials']%></a></li>
11161116
<li><a href="<%=learnURL%>Getting_started_with_the_web/CSS_basics"><%=text['CSS_basics']%></a></li>
11171117
<li class="toggle">
11181118
<details>
@@ -1189,7 +1189,7 @@ async function buildPropertylist(pages, title) {
11891189
</details>
11901190
</li>
11911191

1192-
<li><a href="/<%=locale%>/docs/Web/CSS/Reference"><strong><%=text['Reference']%></strong></a></li>
1192+
<li class="section"><a href="/<%=locale%>/docs/Web/CSS/Reference"><%=text['Reference']%></a></li>
11931193
<%-await buildSublist(groups, 'Modules');%>
11941194
<%-await buildPropertylist(properties, 'Properties');%>
11951195
<%-await buildSublist(selectors, 'Selectors');%>
@@ -1200,7 +1200,7 @@ async function buildPropertylist(pages, title) {
12001200
<%-await buildSublist(functions, 'Functions');%>
12011201
<%-await buildSublist(types, 'Types');%>
12021202

1203-
<li><strong><%=text['Guides']%></strong></li>
1203+
<li class="section no-link"><%=text['Guides']%></li>
12041204
<li class="toggle">
12051205
<details>
12061206
<summary><%=text['Animations']%></summary>
@@ -1450,7 +1450,7 @@ async function buildPropertylist(pages, title) {
14501450
</details>
14511451
</li>
14521452

1453-
<li><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><strong><%=text['Layout_cookbook']%></strong></a></li>
1453+
<li class="section"><a href="/<%=locale%>/docs/Web/CSS/Layout_cookbook"><%=text['Layout_cookbook']%></a></li>
14541454
<li class="toggle">
14551455
<ol>
14561456
<li><%-smartLink(`${cssURL}Layout_cookbook/Media_objects`, null, text['Media_objects'], cssURL)%></li>
@@ -1466,7 +1466,7 @@ async function buildPropertylist(pages, title) {
14661466
</ol>
14671467
</li>
14681468

1469-
<li><strong><%=text['Tools']%></strong></li>
1469+
<li class="section no-link"><%=text['Tools']%></li>
14701470
<li class="toggle">
14711471
<ol>
14721472
<li><%-smartLink(`${cssURL}CSS_Colors/Color_picker_tool`, null, text['Color_picker_tool'], cssURL)%></li>

Diff for: ‎kumascript/macros/DefaultAPISidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function convertEvent(eventName) {
101101
output = '<section id="Quick_links" data-macro="DefaultAPISidebar"><ol>';
102102
103103
if (webAPIGroups[0][group].overview) {
104-
output += '<li><strong><a href="' + APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></strong></li>';
104+
output += '<li class="section"><a href="' + APIHref + '/' + webAPIGroups[0][group].overview[0].replace(/ /g, '_') + '">' + webAPIGroups[0][group].overview[0] + '</a></li>';
105105
}
106106
107107
if (guides.length > 0) {

Diff for: ‎kumascript/macros/GlossarySidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<%
22
async function renderRootItem(slug) {
33
const [link, title] = await getPageLinkAndTitle(slug);
4-
return `<li><a href="${link}"><strong>${title}</strong></a></li>`
4+
return `<li class="section"><a href="${link}">${title}</a></li>`
55
}
66
77
async function getPageLinkAndTitle(slug) {

Diff for: ‎kumascript/macros/HTMLSidebar.ejs

+4-4
Original file line numberDiff line numberDiff line change
@@ -315,8 +315,8 @@ var text = mdn.localStringMap({
315315
%>
316316
<section id="Quick_links" data-macro="HTMLSidebar">
317317
<ol>
318-
<li><a href="/<%=locale%>/docs/Web/HTML"><strong>HTML</strong></a></li>
319-
<li><a href="<%=learnBaseURL%>HTML"><strong><%=text['Tutorials']%></strong></a></li>
318+
<li class="section"><a href="/<%=locale%>/docs/Web/HTML">HTML</a></li>
319+
<li class="section"><a href="<%=learnBaseURL%>HTML"><%=text['Tutorials']%></a></li>
320320
<li><a href="<%=learnBaseURL%>Getting_started_with_the_web/HTML_basics"><%=text['HTML_basics']%></a></li>
321321
<li class="toggle">
322322
<details <%=state('Introduction_to_HTML')%>>
@@ -360,7 +360,7 @@ var text = mdn.localStringMap({
360360
</ol>
361361
</details>
362362
</li>
363-
<li><strong><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></strong></li>
363+
<li class="section"><a href="/<%=locale%>/docs/Web/HTML/Reference"><%=text['Reference']%></a></li>
364364
<li class="toggle">
365365
<details <%=state('HTML_Elements')%>>
366366
<summary><%=text['HTML_Elements']%></summary>
@@ -400,7 +400,7 @@ var text = mdn.localStringMap({
400400
<%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/HTML/Element/input'])%>
401401
</details>
402402
</li>
403-
<li><strong><%=text['Guides']%></strong></li>
403+
<li class="section no-link"><%=text['Guides']%></li>
404404
<li>
405405
<ol>
406406
<li><a href="/<%=locale%>/docs/Web/HTML/Content_categories"><%=text["Content_categories"]%></a></li>

Diff for: ‎kumascript/macros/HTTPSidebar.ejs

+3-3
Original file line numberDiff line numberDiff line change
@@ -288,8 +288,8 @@ var text = mdn.localStringMap({
288288

289289
<section id="Quick_links" data-macro="HTTPSidebar">
290290
<ol>
291-
<li><a href="/<%=locale%>/docs/Web/HTTP"><strong><%=text['HTTP']%></strong></a></li>
292-
<li><strong><%=text['Guides']%></strong></li>
291+
<li class="section"><a href="/<%=locale%>/docs/Web/HTTP"><%=text['HTTP']%></a></li>
292+
<li class="section no-link"><%=text['Guides']%></li>
293293
<li class="toggle">
294294
<details>
295295
<summary><%=text['ResourcesURI']%></summary>
@@ -342,7 +342,7 @@ var text = mdn.localStringMap({
342342
<li><a href="/<%=locale%>/docs/Web/HTTP/Redirections"><%=text['Redirects']%></a></li>
343343
<li><a href="/<%=locale%>/docs/Web/HTTP/Resources_and_specifications"><%=text['Resources']%></a></li>
344344
<li><a href="/<%=locale%>/docs/Web/HTTP/Permissions_Policy"><%=text['Permissions_Policy']%></a></li>
345-
<li><strong><%=text['Reference']%></strong></li>
345+
<li class="section no-link"><%=text['Reference']%></li>
346346
<li class="toggle">
347347
<details <%=state('Web/HTTP/Headers')%>>
348348
<summary><%=text['Headers']%></summary>

Diff for: ‎kumascript/macros/JSRef.ejs

+5-5
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ async function buildSublist(pages, title, opened) {
205205
async function renderOutput() {
206206
let output = '<section class="Quick_links" id="Quick_links" data-macro="JSRef"><ol>';
207207
const link = web.smartLink(slugStdlib, null, text.stdlib, slugStdlib, slugStdlib, "JSRef");
208-
output += `<li><strong>${link}</strong></li>`;
208+
output += `<li class="section">${link}</li>`;
209209
210210
for (const [index, item] of Object.values(result).entries()) {
211211
const resultTitle = item.title ?? "";
@@ -216,11 +216,11 @@ async function renderOutput() {
216216
const resultOpen = item.defaultOpened ?? false;
217217
218218
if (index === 1) {
219-
output += `<li><strong>${text.Inheritance}</strong></li>`;
219+
output += `<li class="section no-link">${text.Inheritance}</li>`;
220220
}
221221
222222
const link = web.smartLink(`${slugStdlib}/${resultSubPath}`, null, `<code>${resultTitle}</code>`, null, slugStdlib, "JSRef");
223-
output += `<li><strong>${link}</strong></li>`;
223+
output += `<li class="section">${link}</li>`;
224224
225225
if (resultConstructors.length > 0) {
226226
output += await buildSublist(resultConstructors, text.Constructor, resultOpen);
@@ -233,10 +233,10 @@ async function renderOutput() {
233233
}
234234
235235
if (index === 0 && group.length > 0) {
236-
output += `<li><strong>${text.Related}</strong></li>`;
236+
output += `<li class="section no-link">${text.Related}</li>`;
237237
for (const groupItem of group) {
238238
const link = web.smartLink(`${slugStdlib}/${groupItem.replace(".", "/")}`, null, `<code>${groupItem}</code>`, null, slugStdlib, "JSRef");
239-
output += `<li><strong>${link}</strong></li>`;
239+
output += `<li class="section">${link}</li>`;
240240
}
241241
}
242242
}

Diff for: ‎kumascript/macros/JsSidebar.ejs

+3-3
Original file line numberDiff line numberDiff line change
@@ -399,8 +399,8 @@ var text = mdn.localStringMap({
399399
%>
400400
<section id="Quick_links" data-macro="JsSidebar">
401401
<ol>
402-
<li><a href="/<%=locale%>/docs/Web/JavaScript"><strong>JavaScript</strong></a></li>
403-
<li><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><strong><%=text['Tutorials']%></strong></a></li>
402+
<li class="section"><a href="/<%=locale%>/docs/Web/JavaScript">JavaScript</a></li>
403+
<li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Tutorials"><%=text['Tutorials']%></a></li>
404404
<li class="toggle">
405405
<details <%=state('Complete_beginners')%>>
406406
<summary><%=text['Complete_beginners']%></summary>
@@ -461,7 +461,7 @@ var text = mdn.localStringMap({
461461
</ol>
462462
</details>
463463
</li>
464-
<li><strong><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></strong></li>
464+
<li class="section"><a href="/<%=locale%>/docs/Web/JavaScript/Reference"><%=text['Reference']%></a></li>
465465
<li class="toggle">
466466
<details <%=state('Objects')%>>
467467
<summary><%=text['Global_Objects']%></summary>

Diff for: ‎kumascript/macros/LearnSidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -858,7 +858,7 @@ async function renderSubsection(subsection) {
858858
}
859859
860860
async function renderSection(section) {
861-
let output = `<li><a href="${baseURL}${section.link}"><strong>${l10nStrings[section.name]}</strong></a></li>`;
861+
let output = `<li class="section"><a href="${baseURL}${section.link}">${l10nStrings[section.name]}</a></li>`;
862862
863863
for (const subsection of section.subsections) {
864864
output += await renderSubsection(subsection);

Diff for: ‎kumascript/macros/MathMLRef.ejs

+4-4
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,16 @@ async function getTitle(pageSlug) {
5656
%>
5757
<section id="Quick_links" data-macro="MathMLRef">
5858
<ol>
59-
<li><a href="/<%=locale%>/docs/Web/MathML"><strong>MathML</strong></a></li>
60-
<li><strong><%=text['Guides']%></strong></li>
59+
<li class="section"><a href="/<%=locale%>/docs/Web/MathML">MathML</a></li>
60+
<li class="section no-link"><%=text['Guides']%></li>
6161
<li>
6262
<ol>
6363
<li><a href="/<%=locale%>/docs/Web/MathML/Authoring"><%=await getTitle("Authoring")%></a></li>
6464
<li><a href="/<%=locale%>/docs/Web/MathML/Fonts"><%=await getTitle("Fonts")%></a></li>
6565
<li><a href="/<%=locale%>/docs/Web/MathML/Values"><%=await getTitle("Values")%></a></li>
6666
</ol>
6767
</li>
68-
<li><strong><%=text['Reference']%></strong></li>
68+
<li class="section no-link"><%=text['Reference']%></li>
6969
<li class="toggle">
7070
<details>
7171
<summary><%=text['Elements']%></summary>
@@ -79,7 +79,7 @@ async function getTitle(pageSlug) {
7979
</details>
8080
</li>
8181
<li><a href="/<%=locale%>/docs/Web/MathML/Attribute"><%=await getTitle("Attribute")%></a></li>
82-
<li><strong><%=text['Examples']%></strong></li>
82+
<li class="section no-link"><%=text['Examples']%></li>
8383
<li>
8484
<ol>
8585
<li><a href="/<%=locale%>/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula"><%=await getTitle("Examples/Deriving_the_Quadratic_Formula")%></a></li>

Diff for: ‎kumascript/macros/PWASidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ async function getTitle(pageSlug) {
7575
}
7676
7777
async function renderRootItem(item) {
78-
return `<li><a href="${getLink(item)}"><strong>${await getTitle(item)}</strong></a></li>`
78+
return `<li class="section"><a href="${getLink(item)}">${await getTitle(item)}</a></li>`
7979
}
8080
8181
async function renderItem(item) {

Diff for: ‎kumascript/macros/SVGRef.ejs

+4-4
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ async function getTitle(pageSlug) {
6767
%>
6868
<section id="Quick_links" data-macro="SVGRef">
6969
<ol>
70-
<li><a href="/<%=locale%>/docs/Web/SVG"><strong>SVG</strong></a></li>
71-
<li><strong><%=text['Tutorials']%></strong></li>
70+
<li class="section"><a href="/<%=locale%>/docs/Web/SVG">SVG</a></li>
71+
<li class="section no-link"><%=text['Tutorials']%></li>
7272
<li class="toggle">
7373
<details>
7474
<summary><%=text['Introducing SVG from scratch']%></summary>
@@ -93,7 +93,7 @@ async function getTitle(pageSlug) {
9393
</ol>
9494
</details>
9595
</li>
96-
<li><strong><%=text['Reference']%></strong></li>
96+
<li class="section no-link"><%=text['Reference']%></li>
9797
<li class="toggle">
9898
<details>
9999
<summary><%=text['Elements']%></summary>
@@ -106,7 +106,7 @@ async function getTitle(pageSlug) {
106106
<%-await template("ListSubpagesForSidebar", ['/en-US/docs/Web/SVG/Attribute'])%>
107107
</details>
108108
</li>
109-
<li><strong><%=text['Guides']%></strong></li>
109+
<li class="section no-link"><%=text['Guides']%></li>
110110
<li>
111111
<ol>
112112
<li><a href="/<%=locale%>/docs/Web/SVG/Applying_SVG_effects_to_HTML_content"><%=await getTitle("Applying_SVG_effects_to_HTML_content")%></a></li>

Diff for: ‎kumascript/macros/WebAssemblySidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ var text = mdn.localStringMap({
7474
<section id="Quick_links" data-macro="WebAssemblySidebar">
7575

7676
<ol>
77-
<li data-default-state="open"><a href="<%=baseURL%>"><strong><%=text['WebAssembly_home_page']%></strong></a>
77+
<li class="section"><a href="<%=baseURL%>"><%=text['WebAssembly_home_page']%></a>
7878
<li class="toggle">
7979
<details open>
8080
<summary><%=text['Tutorials']%></summary>

Diff for: ‎kumascript/macros/WebExtAPISidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ let text = {
2323
2424
async function buildSublist(pages, title, ignoreBadges) {
2525
var result =
26-
'<li data-default-state="open"><a href="#"><strong>' +
26+
'<li class="section"><a href="#">' +
2727
title +
2828
"</strong></a><ol>";
2929

Diff for: ‎kumascript/macros/XsltSidebar.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<%
22
async function renderRootItem(slug) {
33
const [link, title] = await getPageLinkAndTitle(slug);
4-
return `<li><a href="${link}"><strong>${title}</strong></a></li>`
4+
return `<li class="section"><a href="${link}">${title}</a></li>`
55
}
66
77
async function getPageLinkAndTitle(slug) {

Diff for: ‎kumascript/tests/macros/DefaultAPISidebar.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ async function checkResult(html, config) {
262262

263263
if (config.expected.overview) {
264264
// Test overview link
265-
const overviewLink = dom.querySelector("ol>li>strong");
265+
const overviewLink = dom.querySelector("ol>li.section");
266266
checkItem(config.expected.overview, overviewLink, config.locale);
267267
}
268268

Diff for: ‎kumascript/tests/macros/WebAssemblySidebar.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const expected = `\
44
<section id="Quick_links" data-macro="WebAssemblySidebar">
55
66
<ol>
7-
<li data-default-state="open"><a href="/en-US/docs/WebAssembly"><strong>WebAssembly home page</strong></a>
7+
<li class="section"><a href="/en-US/docs/WebAssembly">WebAssembly home page</a>
88
<li class="toggle">
99
<details open>
1010
<summary>Tutorials</summary>

Diff for: ‎kumascript/tests/macros/apiref.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -510,7 +510,7 @@ async function checkResult(html, config) {
510510
expect(num_valid_links).toEqual(num_total_links);
511511

512512
// Test main interface link
513-
const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li>strong>a");
513+
const mainIfLink = dom.querySelector<HTMLAnchorElement>("ol>li.section>a");
514514
expect(mainIfLink.textContent).toEqual(config.expected.mainIfLink.text);
515515

516516
if (mainIfLink.href !== "") {

0 commit comments

Comments
 (0)