092a2957af
This patch closely follows the desired guidelines/desired styles Alex Hollender has put forth in his prototype, but uses multiple containers to achieve this look since our DOM order/structure is different than the DOM structure in the prototype. The following containers are used, but unlike his prototype, they are sometimes used more than once: * Page Container: Contains every other container and limits the overall max-width of the white part of the page. * Workspace Container: Contains the sidebar and content container. The sidebar is displaced ~30 pixels to the start (left) of the workspace container at all times. * Content Container: Contains the content. The max-width of this changes depending on whether you are on a special page/history page vs. other pages. * Article Toolbar Container: Contains the article toolbar. The max-width of this is always the same as the max-width of the article content as we don't want the toolbar to move when going from the article page to the history/special page. Changes to be aware: * To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is temporarily feature flagged and defaults to being "off". * Note that layout-max-width.less is a temporary file made to meet the feature flag requirement of T246420 (intended to derisk the deployment). After the deploy, we should merge most if not all of the rules into layout.less where the max-width design will become the default. * Per Jon's code review comment, I have relaxed the indenting of skin.mustache to make the diff easier to reason about. If desired, the correct indenting can be achieved in a (much less risky) follow-up commit. Bug: T246420 Bug: T153043 Change-Id: Ie49f629bc705850c6996164a516957476c034048 |
||
|---|---|---|
| .phan | ||
| .storybook | ||
| dev-scripts | ||
| i18n | ||
| includes | ||
| resources | ||
| screenshots | ||
| skinStyles | ||
| stories | ||
| tests | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitignore | ||
| .gitreview | ||
| .phpcs.xml | ||
| .stylelintignore | ||
| .stylelintrc.json | ||
| .svgo.yml | ||
| CODE_OF_CONDUCT.md | ||
| COPYING | ||
| Doxyfile | ||
| README.md | ||
| bundlesize.config.json | ||
| composer.json | ||
| hooks.txt | ||
| jsdoc.json | ||
| package-lock.json | ||
| package.json | ||
| skin.json | ||
| tsconfig.json | ||
| variables.less | ||
README.md
Vector Skin
Installation
See https://www.mediawiki.org/wiki/Skin:Vector.
Configuration options
See skin.json.
Development
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
useskinversion: Likeuseskinbut for overriding the Vector skin version user preference and configuration. E.g., http://localhost:8181?useskin=vector&useskinversion=2.
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.
Hooks
See hooks.txt.