Skip to content
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.

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

doc: eliminate dead space in API section's sidebar #33469

Closed
wants to merge 1 commit into from
Closed

doc: eliminate dead space in API section's sidebar #33469

wants to merge 1 commit into from

Conversation

Alhadis
Copy link
Contributor

@Alhadis Alhadis commented May 19, 2020

This PR adds some UX garnish to the API section's nav-menu by removing the non-clickable regions between each link.

Checklist

  • make -j4 test (Unix), or vcbuild test (Windows) passes
  • tests and/or benchmarks are included
  • documentation is changed or added
  • commit message follows commit guidelines

Description

Here's a before-and-after of the change — the interactive regions of each link are highlighted in red:

Figure 1

NB: The easiest way to preview these changes is to open an API page, pop the DevTools open, and run this snippet in the console:

Click to show
{
	const el = document.createElement("style");
	el.innerHTML = String.raw `
		@media only screen and (min-width: 1025px) {
			.apidoc #column2 > .line {
				pointer-events: none;
			}
			.apidoc #column2 > :first-child,
			.apidoc #column2 > ul,
			.apidoc #column2 > ul > li {
				margin: 0;
				padding: 0;
			}
			.apidoc #column2 > :first-child > a[href] {
				border-radius: 0;
				padding: 1.25rem 1.4375rem .625rem;
				display: block;
			}
			.apidoc #column2 > ul > li > a[href] {
				padding: .5rem 1.4375rem;
				padding-right: 0;
				display: block;
			}
			.apidoc #column2 > ul > :first-child > a[href] {
				padding-top: .625rem;
			}
			.apidoc #column2 > ul > :last-child > a[href] {
				padding-bottom: .625rem;
			}
			.apidoc #column2 > ul:first-of-type > :last-child  > a[href] {
				padding-bottom: 1rem;
			}
			.apidoc #column2 > ul:nth-of-type(2) > :first-child > a[href] {
				padding-top: .875rem;
			}
			.apidoc #column2 > ul:nth-of-type(2) > :last-child > a[href] {
				padding-bottom: .9375rem;
			}
			.apidoc #column2 > ul:last-of-type > :first-child > a[href] {
				padding-top: 1rem;
			}
			.apidoc #column2 > ul:last-of-type > :last-child > a[href] {
				padding-bottom: 1.75rem;
			}
		}
	`;
	
	// Enforce correct ruleset order
	const from = document.head.appendChild(el).sheet.cssRules;
	const to   = document.querySelector("link[href$='style.css']").sheet;
	let index  = [...to.cssRules].findIndex(rule => ".github_icon" === rule.selectorText);
	
	// Check that `@media` query's still being used; it might be refactored out later
	if(1 === from.length && from[0] instanceof CSSMediaRule)
		to.insertRule(from[0].cssText, to.cssRules.length);
	else for(const rule of from)
		to.insertRule(rule.cssText, ~index ? index++ : from.length);
	
	// Clean up
	el.remove();
}

Implementation details

This was a Q&D addition to my user stylesheet to address a pet UX peeve of mine (nav-menus that don't make ergonomic use of useful, perfectly-clickable empty space). Having said that, I'm in the dark as to what other pages on nodejs.org would be affected by these changes, so I exercised caution at the expense of weird-looking CSS like this:

.apidoc #column2 > :first-child > a[href] {
	border-radius: 0;
	padding: 1.25rem 1.4375rem .625rem;
	display: block;
}
.apidoc #column2 > ul:nth-of-type(2) > :last-child > a[href] {
	padding-bottom: .9375rem;
}

I can simplify this mess once I know which selectors and measurements I can mess with. Feedback welcome.

This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.
@nodejs-github-bot nodejs-github-bot added the doc Issues and PRs related to the documentations. label May 19, 2020
@addaleax addaleax added the author ready PRs that have at least one approval, no pending requests for changes, and a CI started. label May 19, 2020
Copy link
Member

@BridgeAR BridgeAR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. @Alhadis thank you very much for the helpful script! ❤️

BridgeAR pushed a commit to BridgeAR/node that referenced this pull request May 23, 2020
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.

PR-URL: nodejs#33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
@BridgeAR
Copy link
Member

Landed in f14229e 🎉

@BridgeAR BridgeAR closed this May 23, 2020
@Alhadis Alhadis deleted the nav-ux-polish branch May 23, 2020 17:15
@Alhadis
Copy link
Contributor Author

Alhadis commented Jun 4, 2020

@BridgeAR Do you know when this will take effect on nodejs.org? No rush or anything, I just assumed it would go live with the next release (which was v14.4.0).

codebytere pushed a commit that referenced this pull request Jun 18, 2020
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.

PR-URL: #33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
codebytere pushed a commit that referenced this pull request Jun 18, 2020
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.

PR-URL: #33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
@codebytere codebytere mentioned this pull request Jun 28, 2020
codebytere pushed a commit that referenced this pull request Jun 30, 2020
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.

PR-URL: #33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
codebytere pushed a commit that referenced this pull request Jul 8, 2020
This commit improves overall usability on desktop by removing the "dead"
(non-interactive) regions between links in the API section's navigation.
No visible changes have been made; this enhancement is purely tactile in
nature.

PR-URL: #33469
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Ruben Bridgewater <ruben@bridgewater.de>
@codebytere codebytere mentioned this pull request Jul 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
author ready PRs that have at least one approval, no pending requests for changes, and a CI started. doc Issues and PRs related to the documentations.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants