Adds landmarks to the article toolbar
- Namespace navigation
- View navigation
- More options navigation
Removes the "tools" landmark and associated
aria-label (and translation message).
Makes the #left-navigation and #right-navigation
flexbox to ensure the new <nav> elements, along with
gadgets, align on one line. Moves the styles for
these elements from screen.less to ArticleToolbar.less.
Bug: T317440
Change-Id: Iceff337b0e250c1f368dbaea6cc41a977d8ee868
Technical changes:
- Increase @padding-horizontal-content to align content
- Rename @padding-horizontal-page-container and @padding-horizontal-page-container-wide to @padding-horizontal-page-container-desktop and @padding-horizontal-page-container-desktop-wide respectively
- Replace "gutter" grid area with column-gap
- Clean up TOC styles
Visual changes:
- Below 1000px the header icons spacing is updated
- Above 1000px the page titlebar and articlebar right space is updated
Bug: T315261
Change-Id: I7f51ab3b9613c359db62e918051e942c5c6c878b
Follow up to I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
It should be possible to enable the #siteSub element with
a simple #siteSub { display: block; }. When moving these styles
from core we have made them more specific and harder to override
Bug: T316027
Change-Id: I4009c67e97ed0e718c28a1fa18c0059075b7a8a7
- Removes grid row gap in favor of margins
- Add container div around site notice to allow margin collapsing
Bug: T315595
Change-Id: I39959f43f20880e83bef945a7535d58cfe0b6412
This reverts commit b63244f367.
Reason for revert: Per standup this morning we'll revert this so
that we are back to a known state, and try this again in a second
attempt.
Change-Id: Ie1349fecbab6c49ce63d328aba08162d74145cb9
Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a
Depends-On: Ib5ae640bb260cee46e654228b785c776722c7003
Bug: T316027
Change-Id: I8ab2a554f753348ea2fb0fd4d28053ea17fbe83e
Visual changes: 11 expected in Pixel
- Elements on the right side of page toolbar are now flush with the rest of the content
Change-Id: Id02cd379687fa292188a447c85951e7a87ade509
- Update related selectors, styles.
- Remove unneeded styles.
- Remove link hijack js.
- Simplify hook to only add experiment name to body.
Bug: T310527
Change-Id: I25527261d529a16e28f1b90f2f5af234d26fd40f
Consolidates the CSS responsible for styling chevrons into one
implementation. This removes the need for custom padding and
background positioning for the following components:
- "more" menu
- user menu
- watchstar
- language button
- languge button in sticky header
Instead of absolutely positioning the chevron on these components,
the parent label element is set to `display: inline-flex` so that
the chevron is vertically aligned and given enough space by default.
The watchstar, although not a chevron, is also given the
`display: inline-flex` treatment so that it can be aligned with
other elements in the toolbar.
This new implementation requires splitting the watchstar
component into legacy and modern due to a quirk in Firefox that
causes a bug with the watchstar in legacy Vector.
NOTE: This change causes visual changes due to the difference in
centering the chevrons via flexbox vs percentage positions.
Bug: T308344, T310838
Change-Id: Ie9e0fce1366cd25a5899fee49770de4a09424fe2
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.
Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open
https://jmp.sh/xZhkU6q
No pixel regressions
Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
On tablet, where the table of contents is hidden, the
sidebar should take up the full screen when open.
Fixes Pixel regression
MediaWiki_Test_vector-2022_sidebar-open_0_html_1_tablet.png
Bug: T303484
Change-Id: Ie0aa9f661a652e137d691a1fa4b05e69f0c5f8ab
Since CSS grid uses row-gap we need to decrease
the margin we used in the legacy layout to keep these
the same
Bug: T303484
Change-Id: Ib28f0d5ee0afbb809591c99ef18cd3cbecf1f800
Pixel shows 15 regressions, these are expected changes that are
fixing issues on specific viewports that fixes the following:
[At exactly the tablet breakpoint]
* the more menu dropdown was being
shown at the same time as the other menu items, resulting in duplicates
(see https://phabricator.wikimedia.org/F35285379)
[At exactly the desktop breakpoint]
* The table of contents AND the
table of contents toggle button to the left of the title were showing
(see https://phabricator.wikimedia.org/F35285392)
* The sticky header was not showing
* The fly out table of contents was showing instead of the sidebar
table of contents on scroll
* The top of the sidebar is brought into alignment with the tabs
(see https://phabricator.wikimedia.org/F35285408)
Bug: T310536
Change-Id: I6e870a032c8ba4ec003d00ff3f91732aaa2f38b0
Content should always be aligned with the hamburger icon in the
new design between the tablet and desktop breakpoints.
Fixes: F35282438
Bug: T303484
Change-Id: I15215703d6392cd69ec57212d25c9a52149a6ac0
