Go to file
Nicholas Ray 1209b388e9 Add scroll padding to the root element when the sticky header is enabled
When the sticky header is visible, it has a global impact on the
scrolling UX. For example, it can undesirably overlap elements when the
user clicks on a jump link and when the user tabs through elements in
reverse order. Therefore, we need to add scroll padding to the root
element when the sticky header is enabled (when the feature flag is on
and at higher resolutions)

Known limitations:

* Scroll padding is supported by all the latest modern browsers except
for Safari [1]. This was considered an acceptable tradeoff with the
caveat that this decision may be revisited in the future as we learn
more about user interaction with the sticky header.

[1] https://caniuse.com/mdn-css_properties_scroll-padding-top

Bug: T290518
Change-Id: Ie5eb01d7eafd18ce740be620dfb5c8849386af6e
2021-09-29 14:25:26 -06:00
.phan Upgrade to newer phan 2019-03-20 19:37:59 -07:00
.storybook Wire up sticky header search feature 2021-09-27 14:47:58 -07:00
dev-scripts [Storybook] Add Header component 2021-09-14 18:33:10 +00:00
i18n Localisation updates from https://translatewiki.net. 2021-09-28 08:20:39 +02:00
includes Add scroll padding to the root element when the sticky header is enabled 2021-09-29 14:25:26 -06:00
resources Add scroll padding to the root element when the sticky header is enabled 2021-09-29 14:25:26 -06:00
screenshots Add skin screenshot for the installer 2017-08-11 15:37:34 -04:00
skinStyles Remove obsolete code for non-supported browsers 2021-09-13 15:24:11 -07:00
stories Wire up sticky header search feature 2021-09-27 14:47:58 -07:00
tests Simplify how we generate icons and button classes in Vector 2021-09-03 19:25:31 +00:00
.eslintignore Replace Grunt tasks with npm scripts in package.json 2020-02-27 16:32:12 +01:00
.eslintrc.json ESLint: remove redundant disable of one-var rule 2021-07-17 01:38:26 +00:00
.gitignore [Storybook] Fix PNG/SVG asset resolution. 2020-09-25 12:52:05 +02:00
.gitreview Use track=1 instead of defaultbranch=master in .gitreview 2016-10-24 17:30:32 -07:00
.nvmrc .nvmrc: Update to Node 12.21.0 as CI has migrated 2021-06-04 14:45:10 -07:00
.phpcs.xml build: Updating mediawiki/mediawiki-codesniffer to 33.0.0 2020-11-17 23:33:50 +01:00
.stylelintignore Replace Grunt tasks with npm scripts in package.json 2020-02-27 16:32:12 +01:00
.stylelintrc.json build: Updating stylelint-config-wikimedia to 0.11.1 2021-09-04 17:38:00 +00:00
.svgo.config.js build: Update SVGO to latest v2.2.2 and re-crush SVGs 2021-03-25 09:19:42 -07:00
bundlesize.config.json Allow multiple search components on the same page 2021-09-23 23:23:58 +00:00
CODE_OF_CONDUCT.md build: Updating mediawiki/mediawiki-codesniffer to 22.0.0 2018-09-04 01:45:34 +00:00
composer.json build: Updating composer dependencies 2021-09-10 22:54:21 +00:00
COPYING Use the plain-text GPL and fix 'license-name' to match SPDX conventions 2015-01-29 17:04:29 +01:00
Doxyfile docs: Generate documentation with Doxygen 2020-02-24 16:49:38 +00:00
jsdoc.json Add search to sticky header 2021-09-14 16:58:07 -07:00
package-lock.json [storybook] Document button usage and update broken stories 2021-09-07 21:23:33 +00:00
package.json [Storybook] Add Header component 2021-09-14 18:33:10 +00:00
README.md Add nvm to README 2020-10-19 18:07:12 +00:00
skin.json Wire up sticky header search feature 2021-09-27 14:47:58 -07:00
tsconfig.json [storybook] Document button usage and update broken stories 2021-09-07 21:23:33 +00:00

Vector Skin

Installation

See https://www.mediawiki.org/wiki/Skin:Vector.

Configuration options

See skin.json.

Development

Node version

It is recommended to use nvm to use the version of node defined in .nvmrc during local development. This ensures consistency amongst development environments.

Coding conventions

We strive for compliance with MediaWiki conventions:

https://www.mediawiki.org/wiki/Manual:Coding_conventions

Additions and deviations from those conventions that are more tailored to this project are noted at:

https://www.mediawiki.org/wiki/Reading/Web/Coding_conventions

URL query parameters

Skin preferences

Vector defines skin-specific user preferences. These are exposed on Special:Preferences when the VectorShowSkinPreferences configuration is enabled. The user's preference state for skin preferences is used for skin previews and any other operation unless specified otherwise.

Version

Vector defines a "version" preference to enable users who prefer the December 2019 version of Vector to continue to do so without any visible changes. This version is called "Legacy Vector." The related preference defaults are configurable via the configurations prefixed with VectorDefaultSkinVersion. Version preference and configuration may be overridden by the useskinversion URL query parameter.

Pre-commit tests

A pre-commit hook is installed when executing npm install. By default, it runs npm test which is useful for automatically validating everything that can be in a reasonable amount of time. If you wish to defer these tests to be executed by continuous integration only, set the PRE_COMMIT environment variable to 0:

$ export PRE_COMMIT=0
$ git commit

Or more succinctly:

$ PRE_COMMIT=0 git commit

Skipping the pre-commit tests has no impact on Gerrit change identifier hooks.

Hooks

See hooks.txt.