mirror of
https://github.com/nodejs/node.git
synced 2024-11-21 10:59:27 +00:00
8103a6418e
A "selector" usually refers to a CSS selector, when here it refers to a checkbox. PR-URL: https://github.com/nodejs/node/pull/49536 Reviewed-By: Claudio Wunder <cwunder@gnome.org> Reviewed-By: Tierney Cyren <hello@bnb.im> Reviewed-By: Chemi Atlow <chemi@atlow.co.il>
54 lines
3.3 KiB
JavaScript
54 lines
3.3 KiB
JavaScript
const CHAR_THRESHOLD = 68; // Around 68 characters, we have to take into
|
|
// account the left column that appears on screen
|
|
// wider than 1024px.
|
|
|
|
const ESTIMATED_CHAR_WIDTH = 8; // If the root element font-size is 16px (default value), 1ch is 7.8025px.
|
|
const TOGGLE_WIDTH = 142; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L954
|
|
|
|
const PRE_MARGIN_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516
|
|
const PRE_MARGIN_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516
|
|
const PRE_PADDING_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513
|
|
const PRE_PADDING_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513
|
|
|
|
|
|
const COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN = 234; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L653
|
|
const COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN = 0; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L906
|
|
const COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN = 0;
|
|
const COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN = 0;
|
|
const COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN = 24; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L655
|
|
const COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L907
|
|
const COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN = 32; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L654
|
|
const COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L908
|
|
|
|
const getMarginLeft = (charCount) =>
|
|
(charCount > CHAR_THRESHOLD ?
|
|
COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN :
|
|
COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN) + PRE_MARGIN_LEFT;
|
|
const getPaddingLeft = (charCount) =>
|
|
(charCount > CHAR_THRESHOLD ?
|
|
COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN :
|
|
COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN) + PRE_PADDING_LEFT;
|
|
const getPaddingRight = (charCount) =>
|
|
(charCount > CHAR_THRESHOLD ?
|
|
COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN :
|
|
COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN) + PRE_PADDING_RIGHT;
|
|
const getMarginRight = (charCount) =>
|
|
(charCount > CHAR_THRESHOLD ?
|
|
COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN :
|
|
COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN) + PRE_MARGIN_RIGHT;
|
|
|
|
|
|
export default function buildCSSForFlavoredJS(dynamicSizes) {
|
|
if (dynamicSizes == null || dynamicSizes.length === 0) return '';
|
|
|
|
return `<style>${Array.from(dynamicSizes, (charCount) =>
|
|
`@media(max-width:${getMarginLeft(charCount) + getPaddingLeft(charCount) +
|
|
charCount * ESTIMATED_CHAR_WIDTH + TOGGLE_WIDTH +
|
|
getPaddingRight(charCount) + getMarginRight(charCount)}px){` +
|
|
`.with-${charCount}-chars>.js-flavor-toggle{` +
|
|
'float:none;' +
|
|
'margin:0 0 1em auto;' +
|
|
'}' +
|
|
'}').join('')}</style>`;
|
|
}
|