- 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
The 'mw-workspace-container' class is present on both
the footer and the sidebar. The CSS rule should only hide
the latter.
When there is no table of contents on the page, and the sidebar
is closed, the content
should always span the grid columns and the sidebar container
closed.
Bug: T293443
Change-Id: I852b9024fbd21339b7c78dbb4deba811ab17c7e7
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.
Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.
Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
Having a clean slate to work from will help with the development of
introducing the grid
Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
Moves the page's title above the article toolbar (i.e. tabs) based
on the VectorTitleAboveTabs config option. This feature remains
off by default, but can be accessed via the query parameter `vectortitleabovetabs`.
Removes the Navigation.mustache template since it's just a wrapper
for the sidebar + tabs elements, which, with this change, are placed
in different locations in the DOM and don't need a common parent element.
Bug: T303549
Change-Id: Id4816b753a1b2133c53c3b1d390b45631c704daf
This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.
Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16
This reverts commit bf4d843d97.
Reason for revert: These variables were intended as local to layout.
Only layout stylesheet should have access to layout variables. The
risk of having this in the global variables file is that non-layout
rules can be added to components.
Change-Id: I91fd01ed5333555052c243e25d37cd30d6d9bef6
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.
Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
This makes it accessible elsewhere (such as within WikiEditor; see
the dependent patch) without having to include
all of screen.less.
Bug: T307725
Change-Id: I3fda9886c27fe0b78cf5bd5647d7e497a3aaba0e
Replacing Less mixin calls of `.transition()`, deprecated
since MW 1.37, with CSS property, but constituent properties.
This has been an outcome of recent discussions around design tokens,
which will be simpler to define, more modular, and better scoped. See
T304443 for further information.
Also clarifying, aligning comments.
Bug: T308351
Change-Id: Iab9d04c9a9f31f3842d076ce8fd8bf6e3534fc89
The checkbox hack adds complexity to our layout rules as we must
describe elements based on their siblings. To make these long selectors
easier to reason with and reduce the risk of rebase conflicts as these
shift I'd like to make these variables.
Change-Id: Ie5ff163d0449778a7d343870187da7703d20b754
- Remove the 'vector-scrolled-below-table-of-contents' class, reducing the number of classes added with JS and simplifying the scrollObserver logic
- Move the 'vector-sticky-header-visible' class from the sticky header element to the body element. Hopefully, this is where other feature specific classes can go in the future
- This approach means the TOC will not need JS to update it's spacing when the sticky header is not enabled
Bug: T307345
Change-Id: I1084defc7025f5c946e22a36d373224fae6f8bd6
Creates two new templates:
- ContentHeader.mustache containing the site header and indicators or languages
- ContentSubheader.mustache containing site tagline and conditionally indicators
This changes DOM order.
- It adds the `<header class="mw-body-header">` to all pages,
including special pages & edit pages, not just pages with the language button.
- It moves the #siteSub element (tagline) outside of the
`<div id="bodyContent">` element.
- Adds a clearfix (or margin-collapse fix) to `.vector-body`.
This changes causes a minor difference (perhaps improvement) where on special pages,
the beginning of the content, starting with the `mw-specialpage-summary` element,
was positioned closer to the page title than on regular pages.
The clearfix ensures that the height between the page title and content is consistent across all pages.
Bug: T303549
Change-Id: I29ba337dbd6f9b0cf58c9a0ca517a9ba59cef414
Structural change to prepare for CSS grid usage.
ArticleToolbar component is defined and self contained with
all layout rules relating to toolbar
UI regression testing suite shows 6 failures due to pixel alignment
changes to tabs. When comparing to the current release, you should
see 34 failures before /and/ after this change.
Notable changes:
- #mw-head element is no longer present in modern Vector skin
to allow us to distinguish between cached HTML and modern HTML
Bug: T303484
Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
When the AB test is enabled both the old and new TOC's are in the page's
html but only one is visible. The `.vector-toc-visible` class is also
present and will try to apply a left margin even if the page has been
bucketed into the control or unsampled group.
This patch takes the simplest approach to fix this problem with CSS only
especially given the transient nature of this code (will be removed when
AB test is finished):
* When the page bucketed in the control or unsampled group, prevent
.vector-toc-visible from applying a left-margin through the use of
`:not` selectors.
Additionally:
* Remove unnecessary `margin-left` rule that used to apply to the
mw-workspace-container. Due to the work done in
I2f95d5938674bb8263b6203c5f6a469762bf0cc2, the workspace container
will now always have a computed left margin of zero because it is the
same width as the page container.
Bug: T306366
Change-Id: Icd9572353bb5e29cfda91b095ceb8c2e652864e7
* Bucket and sample on server by using the
`WikimediaEvents.WebABTestArticleIdFactory` service from
WikimediaEvents (soft dependency)
* Add linkHijack.js so that users bucketed in one group have the
possibility of remaining in that group if they click a link to another
page.
Bug: T302046
Depends-On: Ie6627de98effb3d37a3bedda5023d08af319837f
Change-Id: Iff231a976c473217b0fa4da1aa9a8d1c2a1a19f2
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs
Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
This forms a stacking context inside mw-page-container. It allows
overlays appended to the body tag to position themselves over the
Vector interface.
Bug: T301452
Change-Id: Ie187fde43dd8e7f108388c848438545c75d19b09
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days
Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
This uses the sticky header's `.mw-sticky-header-element` utility class
to conditionally offset the table of contents to the height of the
sticky header only when the sticky header is enabled.
Bug: T300077
Change-Id: Ibad97a11e708ba19acf27ca82320f7c3e5f80447
Given that these styles deal with the layout of the sidebar button in
the main header and don't make sense in any other context (at least
currently), I think they belong in Header.less.
Change-Id: I191b9a404c82c5a1a80f97d98fa54535fdd53944
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector
Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
We have many styles related to the layout and visibility of search that
are only useful in the context of the main header. Since many of these
elements have classes that will also be in the sticky header, we should
scope these rules to the main header so that we avoid an uphill battle
of styles trying to override eachother.
Additional changes:
* We previously had a mix of #p-search and .vector-search-box selectors
for the same element in the CSS. Header.less now only uses
.vector-searchbox to avoid specificity wars.
* Removed nearly all of the #p-search rules previously found on L147 -
L167 in screen.less after observing nothing relatively bad happening
when they were removed.
Bug: T289724
Change-Id: I2e6c269e29717cd20d8acfaddc3631ea1b8fedfa
The sticky header is currently disabled unconditionally
and nothing is wired up, with placeholders for data and
functionality which will be added in future.
Bug: T289716
Change-Id: I16223ce849267e718aad22b8a24b2327332ac8b7
Per T287522#7295558, the username should have a computed max-width of
200px above 1200px and a max-width of 155px below 1200px.
Additional changes:
* Use flex-wrap: nowrap on header instead of wrap. I think the former
may have been an unintended consequence of the consolidated links
feature flag clean up.
* Use core's text-overflow mixin for both the username and the usermenu
items
* Change the user menu's max-width to use relative units
Bug: T287522
Change-Id: I536e6371f85ccde75673af46c7667eb447eff081
