docs: make toc sticky on desktop #16506

chenxsan · 2022-11-06T14:41:17Z

Prerequisites checklist

I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update

[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

What changes did you make? (Give an overview)

Make the table of contents sticky on desktop:
Highlight respective menu item in table of contents (light blue area is for demonstration only, not included in code):

Is there anything you'd like reviewers to focus on?

netlify · 2022-11-06T14:41:24Z

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	`d348e02`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/636a4e11ec73490008ff610e
😎 Deploy Preview	https://deploy-preview-16506--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

chenxsan · 2022-11-06T14:43:06Z

docs/src/assets/js/main.js

+            }
+        });
+    }, options);
+    if (window.matchMedia("(min-width: 1400px)").matches) {


Only observe when table of contents in sidebar is shown.

snitin315 · 2022-11-08T04:08:14Z

The scrollbar color is black in dark mode.

dark mode

Screen.Recording.2022-11-08.at.9.36.19.AM.mov

chenxsan · 2022-11-08T10:57:18Z

The scrollbar color is black in dark mode.

dark mode

Mind sharing which browser is it?

snitin315 · 2022-11-08T11:43:04Z

It's chrome v107 on MacOS

chenxsan · 2022-11-08T12:07:33Z

It's chrome v107 on MacOS

Unfortunately I can't reproduce it on my Chrome.

Can you check the horizontal scrollbar in https://eslint.org/docs/latest/user-guide/command-line-interface#options section?

Here's how it looks like on my Chrome:

snitin315 · 2022-11-08T12:10:56Z

It looks like this

Screen.Recording.2022-11-08.at.5.39.32.PM.mov

chenxsan · 2022-11-08T12:43:07Z

It looks like this

Screen.Recording.2022-11-08.at.5.39.32.PM.mov

Seems we have different option regarding the scrollbar:

If I set the option to When scrolling, I can reproduce it then.

Anyway, seems it can be fixed by setting a background color.

snitin315

LGTM. Thanks!

I'll leave it open in case someone else wants to review it.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [eslint](https://eslint.org) ([source](https://github.com/eslint/eslint)) | devDependencies | minor | [`8.27.0` -> `8.28.0`](https://renovatebot.com/diffs/npm/eslint/8.27.0/8.28.0) | --- ### Release Notes <details> <summary>eslint/eslint</summary> ### [`v8.28.0`](https://github.com/eslint/eslint/releases/tag/v8.28.0) [Compare Source](eslint/eslint@v8.27.0...v8.28.0) #### Features - [`63bce44`](eslint/eslint@63bce44) feat: add `ignoreClassFieldInitialValues` option to no-magic-numbers ([#16539](eslint/eslint#16539)) (Milos Djermanovic) - [`8385ecd`](eslint/eslint@8385ecd) feat: multiline properties in rule `key-spacing` with option `align` ([#16532](eslint/eslint#16532)) (Francesco Trotta) - [`a4e89db`](eslint/eslint@a4e89db) feat: `no-obj-calls` support `Intl` ([#16543](eslint/eslint#16543)) (Sosuke Suzuki) #### Bug Fixes - [`c50ae4f`](eslint/eslint@c50ae4f) fix: Ensure that dot files are found with globs. ([#16550](eslint/eslint#16550)) (Nicholas C. Zakas) - [`9432b67`](eslint/eslint@9432b67) fix: throw error for first unmatched pattern ([#16533](eslint/eslint#16533)) (Milos Djermanovic) - [`e76c382`](eslint/eslint@e76c382) fix: allow `* 1` when followed by `/` in no-implicit-coercion ([#16522](eslint/eslint#16522)) (Milos Djermanovic) #### Documentation - [`34c05a7`](eslint/eslint@34c05a7) docs: Language Options page intro and tweaks ([#16511](eslint/eslint#16511)) (Ben Perlmutter) - [`3e66387`](eslint/eslint@3e66387) docs: add intro and edit ignoring files page ([#16510](eslint/eslint#16510)) (Ben Perlmutter) - [`436f712`](eslint/eslint@436f712) docs: fix Header UI inconsistency ([#16464](eslint/eslint#16464)) (Tanuj Kanti) - [`f743816`](eslint/eslint@f743816) docs: switch to wrench emoji for auto-fixable rules ([#16545](eslint/eslint#16545)) (Bryan Mishkin) - [`bc0547e`](eslint/eslint@bc0547e) docs: improve styles for versions and languages page ([#16553](eslint/eslint#16553)) (Nitin Kumar) - [`6070f58`](eslint/eslint@6070f58) docs: clarify esquery issue workaround ([#16556](eslint/eslint#16556)) (Milos Djermanovic) - [`b48e4f8`](eslint/eslint@b48e4f8) docs: Command Line Interface intro and tweaks ([#16535](eslint/eslint#16535)) (Ben Perlmutter) - [`b92b30f`](eslint/eslint@b92b30f) docs: Add Rules page intro and content tweaks ([#16523](eslint/eslint#16523)) (Ben Perlmutter) - [`1769b42`](eslint/eslint@1769b42) docs: Integrations page introduction ([#16548](eslint/eslint#16548)) (Ben Perlmutter) - [`a8d0a57`](eslint/eslint@a8d0a57) docs: make table of contents sticky on desktop ([#16506](eslint/eslint#16506)) (Sam Chen) - [`a01315a`](eslint/eslint@a01315a) docs: fix route of japanese translation site ([#16542](eslint/eslint#16542)) (Tanuj Kanti) - [`0515628`](eslint/eslint@0515628) docs: use emoji instead of svg for deprecated rule ([#16536](eslint/eslint#16536)) (Bryan Mishkin) - [`68f1288`](eslint/eslint@68f1288) docs: set default layouts ([#16484](eslint/eslint#16484)) (Percy Ma) - [`776827a`](eslint/eslint@776827a) docs: init config about specifying shared configs ([#16483](eslint/eslint#16483)) (Percy Ma) - [`5c39425`](eslint/eslint@5c39425) docs: fix broken link to plugins ([#16520](eslint/eslint#16520)) (Ádám T. Nagy) - [`c97c789`](eslint/eslint@c97c789) docs: Add missing no-new-native-nonconstructor docs code fence ([#16503](eslint/eslint#16503)) (Brandon Mills) #### Chores - [`e94a4a9`](eslint/eslint@e94a4a9) chore: Add tests to verify [#16038](eslint/eslint#16038) is fixed ([#16538](eslint/eslint#16538)) (Nicholas C. Zakas) - [`e13f194`](eslint/eslint@e13f194) chore: stricter validation of `meta.docs.description` in core rules ([#16529](eslint/eslint#16529)) (Milos Djermanovic) - [`72dbfbc`](eslint/eslint@72dbfbc) chore: use `pkg` parameter in `getNpmPackageVersion` ([#16525](eslint/eslint#16525)) (webxmsj) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1652 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

docs: make toc sticky on desktop

0e88f28

eslint-github-bot bot added documentation Relates to ESLint's documentation triage An ESLint team member will look at this issue soon labels Nov 6, 2022

docs: fix bug

d660336

chenxsan commented Nov 6, 2022

View reviewed changes

docs: fix css style

61893ee

docs: fix scrollbar style for dark mode

d348e02

snitin315 added accepted There is consensus among the team that this change meets the criteria for inclusion and removed triage An ESLint team member will look at this issue soon labels Nov 9, 2022

snitin315 approved these changes Nov 9, 2022

View reviewed changes

snitin315 merged commit a8d0a57 into eslint:main Nov 15, 2022

snitin315 added the contributor pool label Nov 15, 2022

chenxsan deleted the docs/sticky-toc branch November 22, 2022 00:47

github-actions bot mentioned this pull request May 2, 2023

Upgraded some dependencies - Attempt 2 AurorNZ/report-updated-dependencies#638

Merged

eslint-github-bot bot locked and limited conversation to collaborators May 15, 2023

eslint-github-bot bot added the archived due to age This issue has been archived; please open a new issue for any further discussion label May 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: make toc sticky on desktop #16506

docs: make toc sticky on desktop #16506

chenxsan commented Nov 6, 2022

netlify bot commented Nov 6, 2022 •

edited

chenxsan Nov 6, 2022

snitin315 commented Nov 8, 2022

chenxsan commented Nov 8, 2022

snitin315 commented Nov 8, 2022

chenxsan commented Nov 8, 2022

snitin315 commented Nov 8, 2022 •

edited

chenxsan commented Nov 8, 2022

snitin315 left a comment

docs: make toc sticky on desktop #16506

docs: make toc sticky on desktop #16506

Conversation

chenxsan commented Nov 6, 2022

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

What changes did you make? (Give an overview)

Is there anything you'd like reviewers to focus on?

netlify bot commented Nov 6, 2022 • edited

✅ Deploy Preview for docs-eslint ready!

chenxsan Nov 6, 2022

Choose a reason for hiding this comment

snitin315 commented Nov 8, 2022

chenxsan commented Nov 8, 2022

snitin315 commented Nov 8, 2022

chenxsan commented Nov 8, 2022

snitin315 commented Nov 8, 2022 • edited

chenxsan commented Nov 8, 2022

snitin315 left a comment

Choose a reason for hiding this comment

netlify bot commented Nov 6, 2022 •

edited

snitin315 commented Nov 8, 2022 •

edited