Commit graph

693 commits

Author SHA1 Message Date
Bartosz Dziewoński 2321eeb054 Vector 2022: Align #contentSub with page title (to the left)
(Visual change)

Bug: T307715
Change-Id: Ic4a8d4d55e132cec5df720fdb38eb47c37c8baf0
2022-08-23 20:51:27 +00:00
jenkins-bot 6e30fa2c00 Merge "TOC with bold text." 2022-08-23 12:47:58 +00:00
bwang b63244f367 Remove grid row gap in favor of margins
Bug: T315595
Change-Id: Ibf837775d972deb29e9619cc6c12c919aae5155a
2022-08-22 15:49:00 -05:00
Jon Robson ecbe2c2855 Layout: Restore disabling of max width on certain pages
Bug: T315460
Change-Id: I9bad936c06150cd01d4e60f4a92a5c4d28b5fe16
2022-08-22 10:34:34 +00:00
jenkins-bot 0f4c36169f Merge "[RTL, TOC] The arrow before collapsible sections in sidebar is clipped" 2022-08-22 08:31:25 +00:00
Moh'd Khier Abualruz ff73b36780 [RTL, TOC] The arrow before collapsible sections in sidebar is clipped
* Temp solution for quick fix
* Full solution should be supplied by cssjanus PR shortly after

Bug: T314652
Change-Id: Ic3ac53f884bc1b9bc14c951b7348e2bf263065a2
2022-08-22 08:13:58 +00:00
bwang 0be4664c02 Add back fixed width to main content
Bug: T315653
Change-Id: Iffd3f219e756b82397264f62fb9f88fc82a92ba9
2022-08-19 13:20:20 +00:00
Jan Drewniak e3896ab96d TOC with bold text.
The width of the active link is increased via calc to reduce the
chances that the line will wrap because of the bold text.

Bug: T314670
Change-Id: I58aa72871b7d80c8342df60478894dafcf448ae7
2022-08-18 17:04:30 +00:00
bwang 5f09892813 Remove gradient from modern Vector, align SidebarAction with portlet styles and classes
Bug: T307771
Change-Id: I92fd11b89d4afbf99dd7ab51990835b9754767a1
2022-08-17 20:41:15 +00:00
jenkins-bot 2f65c4f696 Merge "Follow-up: Clean up left over vector legacy classes" 2022-08-17 20:38:49 +00:00
bwang 81d9b28be1 Follow-up: Clean up left over vector legacy classes
Bug: T313559
Change-Id: I42610ef7ccaea0b7c818f66cfbe5a316d2a5566d
2022-08-17 20:18:37 +00:00
bwang 2d6be2e6f0 Clean up main menu selectors
Change-Id: Icb7595f2ef60108f6eaf6b953f37a291678f793e
2022-08-17 14:08:46 -05:00
jenkins-bot 8c3a4792e9 Merge "[ToC] Show new/modified sections after publishing an edit (new floating ToC)" 2022-08-16 08:37:30 +00:00
Moh'd Khier Abualruz 407046c759 [ToC] Show new/modified sections after publishing an edit (new floating ToC)
- All Frontend
- All in Skin

Bug: T307251
Change-Id: Icae2f03f0005b7607448127b793ff3c0010e5817
2022-08-15 20:02:49 +00:00
Jon Robson 6cd7098d05 [ToC] Content should be centered when TOC is collapsed
Bug: T314579
Change-Id: I8d182893267f740457b7233c38aa4615f08b814f
2022-08-15 14:53:54 -05:00
bwang 8eff2d0501 Follow up: Remove .vector-layout-grid, .mw-workspace-container classes
Bug: T313559
Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
2022-08-15 10:10:01 -05:00
jenkins-bot e367136406 Merge "Revert "styles: Set background-repeat: no-repeat for menu tabs"" 2022-08-11 13:11:06 +00:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
jenkins-bot 310bf970bd Merge "Remove .mw-ui-button styles from user-links overflow menu" 2022-08-10 07:39:39 +00:00
Jan Drewniak 5676097135 Remove .mw-ui-button styles from user-links overflow menu
Removes the .mw-ui-button styles from the userpage link
and create account link in the user menu.

Overrides the userpage redlink style so that the link
remains blue even if the userpage doesn't exist.

Visual changes: userpage link and create account link
in header are no longer .mw-ui-buttton styles, but
look like standard blue links. The user links menu shifts
slightly because of this as well.

Bug: T312157
Change-Id: Id98e566952e5875527f38d1edbc8f6e058af4518
2022-08-08 22:12:07 -04:00
Clare Ming eb597645c3 Refactor TOC A/B test to bucket users on backend
- Include temporary feature requirement for TOC A/B test.
  - Assumes 100% of logged-in users with even/odd user ids
  being assigned to treatment/control buckets respectively.
  - Sampling rates passed in by config are not considered
  during bucketing.
- Update hook for adding needed TOC A/B test body classes.
- Add test for temp feature.

Note: the temporary feature requirement and associated hooks
should be removed once the 2nd TOC A/B test concludes.

Bug: T313435
Change-Id: If9c75235614af289cd50182baab29bec3155eb81
2022-08-08 15:50:28 -06:00
bwang d4d50d2dc5 Fix grid blowout bug
Bug: T314756
Change-Id: If1a84f5c3606dab7195a9b0a320e416fba702027
2022-08-08 18:19:23 +00:00
jenkins-bot 0a7588f55b Merge "Remove vector-layout-legacy styles and grid feature flag" 2022-08-08 17:13:42 +00:00
Jon Robson 8a46797eec Express sidebar width in pixel for font size
Bug: T313817
Change-Id: Ic8917bf14eb688f84ca8dfbaea055f93fe829469
2022-08-08 08:25:21 +00:00
bwang ef2b0a2372 Remove vector-layout-legacy styles and grid feature flag
Bug: T313559
Change-Id: I050d0e243186ba4341accc26f8d644f55ff995b7
2022-08-08 08:22:26 +00:00
jenkins-bot f366c2ad9c Merge "Fix collapsible user links issue on tablet breakpoint" 2022-08-08 08:20:21 +00:00
bwang 64566249a3 Fix collapsible user links issue on tablet breakpoint
Bug: T314757
Change-Id: I595d27a03bd607f5b2ab8230e4931a1124222312
2022-08-08 07:59:50 +00:00
Clare Ming 5b55a2f894 Minor fixes to TOC hide/show buttons
Bug: T307901
Change-Id: I37c6b3b4c5c20e914423c311795dbccce2a7b3fd
2022-08-04 15:20:58 -06:00
Jdlrobson 86f39007fb Revert "styles: Set background-repeat: no-repeat for menu tabs"
This reverts commit 1f94104cdf.

Reason for revert: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7 would
be a more future proof solution to this problem.

Depends-On: I3427b9ca05957b33a95bba4de4ddf87b61b5ccc7
Change-Id: Ie09ccad772e25689c89608bba73c5248a55b4a7d
2022-08-04 17:29:56 +00:00
jenkins-bot 6a92bad382 Merge "styles: Set background-repeat: no-repeat for menu tabs" 2022-08-04 12:10:25 +00:00
jenkins-bot 4f4317c708 Merge "Only apply sticky header offset if it is showing sticky" 2022-08-04 08:08:46 +00:00
bwang e1e9552bf3 Followup contentSub contentSub2 styling
Bug: T311421
Change-Id: I4319142361b83758bbbe3c1a22e9b6ccab47352d
2022-08-03 20:57:35 +00:00
jenkins-bot a4949503f6 Merge "Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2" 2022-08-03 20:16:51 +00:00
Andre Klapper 1f94104cdf styles: Set background-repeat: no-repeat for menu tabs
Images are used e.g. by the ProofreadPage extension.

Bug: T314028
Change-Id: I278fff4f02dd91effe5d8ace2f4a21a437a5114b
2022-08-03 19:00:01 +00:00
bwang b89307c6bb Update #siteSub, #contentSub and #contentSub2 to fix spacing, conditionally render #contentSub and #contentSub2
Visual changes:
- Reduced spacing above #siteSub
- Updated spacing from #contentSub and #contentSub2

Bug: T311421
Change-Id: I7fd78d2c92007b231cfc49af0fbd02a4f74f3901
2022-08-03 01:14:30 +00:00
Jan Drewniak 4aa5602c52 Followup to ce007e0 - Unify dropdown styles
Provide better compatibility with gadgets that create dropdowns
like Twinkle by explicitly setting the font-weight and font-size
on `.vector-menu-heading`.

This is needed because in legacy Vector, menu headings
were <H3>'s, which have bold text and a larger font size.

Bug: T312157
Change-Id: Ic414cef4c7145740812e590f431294bc85a405b4
2022-08-02 16:57:02 -04:00
bwang 37149c9e67 Remove custom rendering of the user links overflow menu in favor of using 'vector-user-menu-overflow', a vector specific menu bucket in Hooks.php
- Rename 'vector-user-menu-more' class to 'vector-user-menu-overflow'
- Update storybook and tests

Visual changes
- Small intentional change on the create account button

Bug: T306662
Change-Id: I371bb11903d8cdd8f0da89266fcf549050c0da8c
2022-08-01 20:18:46 +00:00
Clare Ming 1d1585d214 Add feature to hide/show collapsible TOC above desktop
- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0
2022-07-29 14:19:55 -05:00
jenkins-bot 9e0d9ebcd4 Merge "Unify dropdown styles" 2022-07-28 21:26:23 +00:00
Jan Drewniak ce007e059e Unify dropdown styles
This affects all dropdowns in Vector 2022, including the
user menu in the header and the language variants and
"more" menu in the article toolbar.

By relying on shared styles instead of separate implementations,
this change also reduces the size of the skins.vector.styles
module by 1.6kB (uncompressed).

Visual changes:
- The links in the user menu are now blue
- Dropdown links in the user menu and tabs are blue
- The dropdown labels in the tabs are black not dark gray.

Bug: T312157
Bug: T308344
Change-Id: I002d5454838a5516b6ee6c7c38721209ed28508b
2022-07-28 16:41:39 -04:00
jenkins-bot ee91a813d3 Merge "styles: Replace LanguageButton variable nomenclature" 2022-07-27 20:28:18 +00:00
jenkins-bot e4b4f5bf9f Merge "Show ULS button when article exist only in single language" 2022-07-27 20:22:02 +00:00
bwang 7b34e14d25 Page toolbar visual tweaks and code clean up
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
2022-07-27 17:10:22 +00:00
jenkins-bot 54ac78bba0 Merge "Make site banner full width in grid layout" 2022-07-27 16:57:05 +00:00
bwang 320175d22c Make site banner full width in grid layout
Bug: T312749
Change-Id: Ia888615762a641f98409b11c6448a32897c4c835
2022-07-27 10:01:49 -05:00
jenkins-bot 8e36c72144 Merge "Add "Add topic" button to sticky header" 2022-07-26 22:36:04 +00:00
Ed Sanders 23a5261ef6 Add "Add topic" button to sticky header
Bug: T304187
Change-Id: Ib497eb91ec7548e2ba6d1d474a196ada770f955d
2022-07-26 22:15:02 +00:00
Derk-Jan Hartman e7f0106917 Only apply sticky header offset if it is showing sticky
Only apply sticky header offset to mw-sticky-header-element if the
header is actually sticky, currently at min-desktop-width of 1000px

Bug: T313187
Bug: T313619
Change-Id: I081c694b263a68498468b837cffa1cbea136d36f
2022-07-26 17:57:46 +00:00
Volker E ee7f59171f styles: Replace LanguageButton variable nomenclature
`height-lang-button` => `height-button-lang`
First component, then subtype.

Bug: T313243
Change-Id: Icd053cb64ef0af84b37e27b0dbfc0e8ceb521863
2022-07-26 07:46:42 -07:00
jenkins-bot 9fc2f4403e Merge "Update CSS to allow TOC to be collapsed at larger viewports using grid" 2022-07-25 21:41:42 +00:00
Jan Drewniak 697b5deeda [Refactor] Split MenuDropdown.less for modern and legacy
Splits MenuDropdown styles into modern and legacy styles.

Leaves a common MenuDropdownCheckbox.less file (for lack
of a better name) for common styles related to the checkbox
behaviour and dropdown menu resets.

Adds a new file in common/mixins.less for a shared
dropdown mixin.

Bug: T312157
Change-Id: Ib60b25ea3121843ed5ed54820d6295a81289b332
2022-07-25 20:20:18 +00:00
bwang 4511b94b21 Update CSS to allow TOC to be collapsed at larger viewports using grid
Test by adding .vector-toc-collapsed class to the body
We use grid only when supported for grade C browsers.

Visual changes:
* Slight changes to position of the button and title
(movement by a pixel or 2)

Bug: T311447
Change-Id: Ib16c7b5b35be66776d013833e29f24f3f5316d9b
2022-07-22 20:59:14 +00:00
Jan Drewniak 34a8bc6690 [Regression] Restore proper watchstar icons in Vector 2022
Wrong watchstar icons were specified when splitting the watchstar
into modern and legacy Vector in 3c0559a7.

Change-Id: Ice369f5d81818b093014cf508c2d4336c66368ed
2022-07-22 15:29:04 -04:00
Santhosh Thottingal 40f6c5e29d Show ULS button when article exist only in single language
When the article exist only in one language, currently we do not show
language selector. This prevents showing the entry points to create article
in other languages by various means.

Show the language selector so that options like translate, interlanguage
links, language settings can be shown.

Bug: T275147
Bug: T290436
Depends-On: I42c5d44ec15e291d71723c9738ddb8f0d1cf0b09
Change-Id: I7fb68457c1203d824fe7433c9f272f300a483c44
2022-07-21 16:28:22 -07:00
bwang 2d9585c8e3 Table of contents: Update TOC styles
Visual changes:
* Changes to table of contents text alignment and padding

Bug: T312156
Change-Id: Icfde60d053a786054de6608f2ed4f0b1b5b5b252
2022-07-21 22:30:35 +00:00
jenkins-bot 6ecbd5e970 Merge "Refactor chevron across components + separate watchstar" 2022-07-21 22:01:49 +00:00
Clare Ming 28732cf4f7 Remove Table of Contents feature flag
- 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
2022-07-21 12:41:39 -06:00
Jan Drewniak 3c0559a71d Refactor chevron across components + separate watchstar
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
2022-07-21 10:14:21 -04:00
jenkins-bot 22969cb39d Merge "styles: Remove IE9 Flexbox fallback" 2022-07-20 16:45:37 +00:00
jenkins-bot caf0221164 Merge "styles: Replace @top-margin… with @margin-top… variable names" 2022-07-20 16:38:32 +00:00
Volker E 2d0428b02a styles: Remove IE9 Flexbox fallback
IE9 is out of basic supported browsers, so removing this fallback.
Also using “Flexbox” as standard term in comment.

Bug: T306486
Bug: T308344
Change-Id: I6fcb0c4b54fea3d05593ae294c05e046131c93d2
2022-07-20 08:13:00 -07:00
Volker E 0c7cc69e30 styles: Replace @top-margin… with @margin-top… variable names
Bug: T313243
Change-Id: Ibdcc50d2a67074bc7b3f28c58baf73ad39db922d
2022-07-19 12:16:28 -07:00
Volker E 048e40d0bf styles: Remove divider image fallbacks for now non-basic support browsers
Removing old PNG divider fallbacks, which were included for IE9, old
Firefox and Chrome browsers and are not mission critical even when not
rendered to unknown browsers.

Bug: T306486
Bug: T308344
Change-Id: I8a6622237a1cbb8116930a12e632329618d5c291
2022-07-19 18:29:09 +00:00
Jan Drewniak 4ab2b1bff1 Refactor Vector tabs layout for reduced size & complexity
Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
  and #left-navigation tab elements with floats.
  Then for vertical alignment, sets the child <li> elements and
  <a> elements to inline block.

Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
  but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
  Vector 2022, which previously applied to H3 labels in the
  sidebar, which are no longer targeted by the styles in
  MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
  ArticleToolbar.less

This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.

Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right

Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]

NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.

NOTE: Update addresses the reason for revert 5599cf2 and compatibility
with CSS Grid layout by adding a clearfix (display:flow-root)
for #right-navigation and #left-navigation elements inside toolbar.

Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I1482a81d16c53e0ba1977b0d98ba8c8a21362a6c
2022-07-19 13:26:49 -04:00
jenkins-bot 1ebf8c148d Merge "styles: Use default border-width and border-style vars" 2022-07-19 16:46:31 +00:00
jenkins-bot f7979192a8 Merge "styles: Apply @background var to Sidebar background" 2022-07-19 16:45:21 +00:00
jenkins-bot 9f7f292a6f Merge "styles: Rename border-tabs to border-bottom-tabs" 2022-07-19 16:45:17 +00:00
jenkins-bot 3c8796ee04 Merge "Search: Use Codex and Vue 3 instead of WVUI and Vue 2." 2022-07-19 15:18:29 +00:00
Volker E 8d21f557c1 styles: Use default border-width and border-style vars
Bug: T313243
Change-Id: I8e40fbcff3d739318f6a53104128ed52ef8f294f
2022-07-19 05:11:39 -07:00
Volker E fca7726a17 styles: Apply @background var to Sidebar background
Also de-coupling border and background vars as they are aimed to
be fully replaced by tokens in future.

Bug: T313243
Change-Id: I5b7e46b6d2a0cc6975cb3c760645eaf2d5d30de5
2022-07-19 04:35:09 -07:00
Volker E b62f7fa4dd styles: Rename border-tabs to border-bottom-tabs
And use `@border-width-base` var.

Bug: T313243
Change-Id: Ic5febd54a6f28ef8998f4278589b08c6e5977d9f
2022-07-19 04:24:33 -07:00
Jdlrobson 5599cf23af Revert "Refactor Vector tabs layout for reduced size & complexity"
This reverts commit 0c5e6ed9fe.

Reason for revert:  I was so focused on testing the current layout
I forgot to test the more important grid layout, which is being
deployed this week. The "from mediawiki" tagline is overlapping
with the tabs.

Change-Id: I3c53a8d243caf84e5c2766d730ced3d7da345026
2022-07-18 23:28:01 +00:00
Jan Drewniak 0c5e6ed9fe Refactor Vector tabs layout for reduced size & complexity
NOTE: this introduces a visual regression in the mobile viewport in that
the more menu.
Given this viewport is still experimental, after talking to Jan
we agreed to address this in a follow-up.

Fix for iOS Safari 13 & 14 (T309223):
- Replaces flex-box layout from the top-level #right-navigation
  and #left-navigation tab elements with floats.
  Then for vertical alignment, sets the child <li> elements and
  <a> elements to inline block.

Opportunistic refactor (T308344):
- Moves the font-size rules to top-level #left/right-navigation,
  but leaving them as-is for legacy Vector.
- Removes a (seemingly) unnecessary `display:none` rule from
  Vector 2022, which previously applied to H3 labels in the
  sidebar, which are no longer targeted by the styles in
  MenuTabs.less.
- Removes an unnecessary selector and duplicated rules from
  ArticleToolbar.less

This change fixes a flexbox issue on iOS Safari 13 & 14, but also
reduces the CSS bytesize of the skins.vector.styles module by
0.9kB (uncompressed), from 54.2kB in the previous commit to
53.3kB with this commit.

Expected visual changes:
* The tab underline now overlaps with the toolbar underline, and text
pushed down on certain tabs
* The variant tab is now equally spaced
* Right navigation tabs slightly shifted to the right

Unexpected visual changes:
* More menu shifts to the left [see note at top of commit, will be
fixed in a follow up]

Bug: T309223
Bug: T308344
Bug: T312212
Change-Id: I77f3dd8e8ccfe3a1d9693746106d9783cc0d38b9
2022-07-18 22:34:11 +00:00
Roan Kattouw ce77018b7c Search: Use Codex and Vue 3 instead of WVUI and Vue 2.
[Visual changes]
This should result in 9 visual regression failures relating to
increased height of search results and loading bar

[More details about change]
- Migrate search app from Vue 2 to Vue 3; update tests
  accordingly
- Remove dependence on WVUI and use Codex instead, via the special
  `@wikimedia/codex-search` package
- Update search app to use CdxTypeaheadSearch, which no longer
  takes in props related to the search client or fetch start/end
  instrumentation. Instead, directly use the restSearchClient
  and call fetch start/end events in the search app.
- Handle hideDirection in the search app/API response formatting
  code, not within the TypeaheadSearch component
- Handle showing/hiding the search button in the app
- Move the WVUI URL generator into Vector
- Update server-rendered search box styles to match design updates
  included with CdxTypeaheadSearch
- Replace references to WVUI with references to Codex
- Update values of various LESS variables to match Codex, and update
  searchBox styling to prevent jankiness when the searchBox is replaced
  with the Codex TypeaheadSearch component

The VectorWvuiSearchOptions config variable has been maintained and
will be updated to a code-agnostic name in a future patch.

Bug: T300573
Bug: T302137
Bug: T303558
Bug: T309722
Bug: T310525
Co-Authored-By: Anne Tomasevich <atomasevich@wikimedia.org>
Change-Id: I59fa3a006d988b14ebd8020cbd58e8d7bedbfe01
2022-07-18 12:54:47 -07:00
Volker E a651d5e86b styles: Remove obsolete variable
Following-up Idf943449b5e4.

Bug: T308344
Change-Id: I06588d42e3e5c95248886df33ddda45d4f1eaf1f
2022-07-14 07:21:12 -07:00
jenkins-bot 1be236aa5a Merge "TOC: CSS clean up and spacing fix" 2022-07-11 21:05:05 +00:00
Jon Robson a3905e9acd CSS cleanup: Revise CSS that is no longer needed per FIXME guidelines
Bug: T311773
Bug: T308344
Change-Id: Idf943449b5e4358749be47435b3032215e533353
2022-07-11 15:43:44 +00:00
bwang 42f863a936 TOC: CSS clean up and spacing fix
- Update TOC bottom padding to match spec in T304166.
  Before (30px): https://phabricator.wikimedia.org/F35312302
  After (20px): https://phabricator.wikimedia.org/F35312299
- Rearrange/combine some selectors in TableOfContents.less
- Delete some unnecessary styles/selectors
- Rename variables in TableOfContents.less

Change-Id: Ifffc434dcab4256a0c3ae8faf43a342935b820ff
2022-07-08 19:36:19 +00:00
Clare Ming c18c9856b5 TOC scrollbar should not fade
Bug: T311436
Change-Id: I50e2d82982515f045596c1a19dd7f9932cde25ef
2022-07-08 13:03:39 -05:00
Jon Robson e8130d6628 Layout: Fixes table of contents alignment issues
This patch also adds some grid variables to be reused

Bug: T311793
Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
2022-07-05 21:11:47 +00:00
jenkins-bot 197fab6905 Merge "Remove tablet specific styles for collapsed TOC, and misc CSS clean up" 2022-07-01 17:53:35 +00:00
bwang a84549f243 Remove tablet specific styles for collapsed TOC, and misc CSS clean up
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
2022-07-01 15:25:34 +00:00
Jon Robson d8a66f0d49 Layout: Fixes content alignment issues
Bug: T311793
Change-Id: I256750d546e2ab818bca1f153a2b6a675db79a54
2022-07-01 14:54:10 +00:00
Jon Robson bcb6ca36ba Layout: Fixes header margin between search and user links
Restore header margin between search and user links, as its
still needed for grid (Fixes F35282398)

Bug: T303484
Change-Id: Ie8cf4adcadff430ebfc675029635e6c22061b238
2022-06-30 16:03:28 -07:00
Jdlrobson e16a8e4775 Revert "Layout: restore sticky toc behavior by adding additional TOC container"
This reverts commit 3a26cc220c.

Reason for revert: Pixel flagged a UI regression relating to this change https://phabricator.wikimedia.org/F35291665

Change-Id: Id0b3d13da7dfbd8a55605e9f1fae157fe45abd2f
2022-06-30 22:53:19 +00:00
bwang 3a26cc220c Layout: restore sticky toc behavior by adding additional TOC container
Fix sticky behavior changed by impacted by e23fc1f

Change-Id: I7ead5e1d5954f772a533e1116f8c55d2d9cfd143
2022-06-30 21:40:14 +00:00
Jon Robson 615181154c Layout: Grid columns are restricted to desktop views
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
2022-06-30 20:30:20 +00:00
bwang e23fc1fe11 Grid: fix footer styles
Fixes https://phabricator.wikimedia.org/F35289862

Change-Id: If14bfb357d077ebd3886ce7290f0d46d19588dc6
2022-06-30 13:34:25 -05:00
jenkins-bot 9d7b62b85d Merge "Layout: Use sibling selectors rather than adjacent sibling" 2022-06-30 15:10:58 +00:00
Jon Robson 79403a87e3 Fixes Content sub unreadable in Vector 22
Bug: T311564
Change-Id: Id9c3693796a197f4cacf6fee902b553ba077dc71
2022-06-30 00:52:24 +00:00
Jon Robson 9ac4fbb165 Layout: Use sibling selectors rather than adjacent sibling
Fixes MediaWiki_Main_Page_vector-2022_0_viewport_1_tablet.png
UI regression

Additional change:
- Remove inactive selector - nothing matches this media query

Bug: T303484
Change-Id: I25a21ed54189dd1ca371a0755eb4d726b20f965f
2022-06-29 23:12:42 +00:00
bwang 73ecf0f4f3 Refactor some max-width media queries to use min width
Bug: T310536
Change-Id: I900c2446b64533775b37d6e0a0ce781ab0ff890a
2022-06-29 18:09:19 +00:00
jenkins-bot e952a051c3 Merge "Cleanup ArticleToolbar grid styles" 2022-06-29 17:34:00 +00:00
bwang fabd2d6579 Cleanup ArticleToolbar grid styles
Change-Id: I0a0444cbbd460340b7bf000535d4cca252e58f2f
2022-06-29 11:19:38 -05:00
Jon Robson 257430ec13 Layout: Fix footer margin
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
2022-06-29 08:33:36 -07:00
Jon Robson 11618b5d81 Grid: Add table of contents to grid
Bug: T303484
Change-Id: Ic854b34b739b59e2d1efd864a711c961548f079f
2022-06-29 00:00:06 +00:00
bwang 8a88f61e89 Introduce media query breakpoint variables and replace all media query usage with new variables
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
2022-06-28 23:19:52 +00:00
bwang 4ab798441e Refactor SkinVector to use Hooks::updateMenuItems code to process menu data
SkinVector and Hooks both had code to add classes and handle Vector specific template data. This patch simplifies the way we handle menu data to always use Hooks:updateMenuItem. This has an additional side effect of removing instances of mw-ui-icon-before.

Bug: T306628
Change-Id: I73514a0eada4d92705b70e7c2ebd91092fc12544
2022-06-28 21:53:51 +00:00
Jon Robson 82f0433a11 Layout: Align content with hamburger icon
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
2022-06-28 00:07:34 +00:00
jenkins-bot 63e6daeb53 Merge "Fix table of contents when sidebar is open" 2022-06-27 23:36:00 +00:00
Jon Robson 89d9cf76b0 Remove hover and focus states on article toolbar links
Bug: T310886
Change-Id: I3b75d461ff0298e1ca3707e2cf4e79fd3db6497a
2022-06-27 22:26:03 +00:00
Jon Robson 393928a280 Fix table of contents when sidebar is open
Bug: T309807
Change-Id: If370246d13984981f4c3477fda2b2dce45337d91
2022-06-27 15:01:18 -07:00
Jon Robson 5beadc4bc2 Layout: Don't hide footer < 1000px when sidebar closed
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
2022-06-25 00:03:41 +00:00
bwang 61e723c541 TOC: Ensure TOC spacing is correct when grid is enabled
Fix usage of CSS calc

Change-Id: I6dcf3751a4b478a14d8052a70720e138238203d3
2022-06-24 23:09:50 +00:00
Jon Robson ec6b6ebd9a Revise margin collapsing rules with new layout
Follow up to 97783e5

Bug: T311283
Change-Id: Ia0581713fd182b9236e398a2453efd06ce8b9f1f
2022-06-24 15:55:08 +00:00
jenkins-bot bf117d1fc8 Merge "Restore sticky header class and update TOC styles" 2022-06-22 20:34:07 +00:00
Clare Ming 75cc9bdcd9 Restore sticky header class and update TOC styles
Bug: T311170
Change-Id: Ib12b6f79a20b2a25b49110e5a7de59d199917dc9
2022-06-22 14:46:07 -05:00
Jon Robson 25c3fc1863 Table of contents: Cached HTML is no longer a problem
Bug: T307900
Change-Id: Ic03bc15b8a15d6d095130c8346c399a2ac93d955
2022-06-22 18:17:52 +00:00
bwang f473129485 Add support for floating TOC lower down the page
This patch only handles the first case listed in the task description

Bug: T308689
Change-Id: I4e7dbded7a8206633a98653aaf4ced3fd2b6f69d
2022-06-21 16:02:11 +00:00
Clare Ming b6e76eb797 Show scrollbars in sticky TOC
Bug: T310540
Change-Id: I36af416901f9fde268f59a3e3fd690b743748514
2022-06-16 10:19:04 -06:00
Clare Ming 536e53af7a Minor adjustments to collapsible TOC
Bug: T307900
Change-Id: Iec0c5c6e3dbede85e549fc9558b9d5c7be4fa10d
2022-06-15 09:56:27 -05:00
bwang b6e7b5e880 Fix sticky header searchbox width and misc searchbox CSS cleanup
Bug: T310366
Change-Id: Id403f818b19747e3279df3112d93301f31323f9d
2022-06-14 15:58:53 -05:00
bwang 93e8cfcd90 Collapse ToC into page title at narrow view ports with CSS/template changes only
Bug: T307900
Change-Id: I72607ec9d8b46401468de5815cf47dac9f4612a5
2022-06-10 15:49:06 -06:00
bwang e9ea4cee29 Hide TOC in print mode and clean up other print styles
Bug: T306719
Change-Id: I706225e01d1cc09bd387a008b56d9c2dcf8bdf4f
2022-06-09 19:15:27 +00:00
bwang d6e1dbd843 Move menu border style to legacy
Bug: T309398
Change-Id: Idfd88d98cb51ee35a359eef90ed54bc0a9feea87
2022-06-08 21:23:23 +00:00
jenkins-bot d91c921daa Merge "Make footer take up full width" 2022-06-08 19:33:12 +00:00
Jan Drewniak c5cfd4dce8 Restyle Vector tabs in modern Vector
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
2022-06-08 11:26:17 -07:00
Jon Robson c9fe4e83a1 Make footer take up full width
Bug: T293443
Change-Id: I0cea23fc6f7e013900211f10cc3da4066acf4d0c
2022-06-08 14:48:40 +00:00
Jon Robson 664b6c5cc5 [Grid] Vector 2022 layout uses CSS grid
It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1
2022-06-07 17:23:08 +00:00
Jon Robson e4aaf02ce8 [Grid] Move header rule into search rules
This will also apply to the grid layout so this seems a more
appropriate place, given the class relates to search.

Bug: T303484
Change-Id: Ib5b57fd948ecb5eefbf1d66e0e71045aed6e3102
2022-06-06 19:24:09 +00:00
Jon Robson e801f917ae [Grid] Remove vector-layout-legacy selector from sidebar rules
These should actually be retained in the new design.

Bug: T303484
Change-Id: Ie1755e3cf5dec5da64615084ddc815fab7eb8bb1
2022-06-03 21:29:55 +00:00
Jon Robson b8701a3b58 [Grid preparation] Restrict certain rules to old layout
Having a clean slate to work from will help with the development of
introducing the grid

Bug: T303484
Change-Id: I8fb9a9d958e4e73e8bfbf4b797cee1353c915db5
2022-06-01 17:24:47 +00:00
jenkins-bot 1f8a3c5318 Merge "i18n: Use correct direction for collapse Table of Contents" 2022-06-01 08:17:54 +00:00
Jan Drewniak a3cef30154 Move page title above article toolbar menus
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
2022-05-31 18:06:11 -04:00
Sam Wilson 0ebae6c4ef In max-width mode, constrain the width of page previews
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
2022-05-30 11:52:59 +08:00
Ebrahim Byagowi aebd782d75 i18n: Use correct direction for collapse Table of Contents
Collapse Table of Contents has incorrect direction for RTL, this fixes it.

Bug: T309478
Change-Id: I43f2d225aed7c3a74e35f8e72c1e261b39af9737
2022-05-30 02:37:10 +04:30
Jon Robson 4e67384131 Fixes Vector 2022 sidebar overlap when table of contents disabled
Bug: T308130
Change-Id: Ieec44e8f1657319962e2a7922d04186c260123fe
2022-05-23 23:13:29 +00:00
Jon Robson f91c3cd5a8 Use upstream reduces motion skin option
The new accessibility rules default to on, so no need to list
it in skin.json but we need to remove the now duplicated style.

Depends-On: Ie1c6c1ba7263c232d874263fdae7427a5ec489f6
Change-Id: I92f622b92adb8735c38a4ebe56eaf5bfc4ae37bf
2022-05-18 14:29:05 -07:00
jenkins-bot 7761ed4aff Merge "Revert "Move a max-width Less variable up into variables.less"" 2022-05-18 18:50:50 +00:00
Jdlrobson 55b5283148 Revert "Move a max-width Less variable up into variables.less"
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
2022-05-18 15:12:59 +00:00
jenkins-bot 336b8eefb7 Merge "build: Update stylelint-config-wikimedia to 0.13.0" 2022-05-18 00:40:09 +00:00
Volker E 7eb818543e styles: Replace deprecated Less .transform() mixin with standard CSS
Replacing Less mixin calls of `.transform()`, deprecated
since MW 1.37, with CSS property.

Bug: T308360
Change-Id: Ic965193782a447d34eac4bd19816a7b753c36d44
2022-05-16 23:24:53 +01:00
Ed Sanders 7f7d5c4ae5 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I122005b6817cf1997002dbe7a1bcbd249c9842cb
2022-05-16 17:44:12 +01:00
Sam Wilson bf4d843d97 Move a max-width Less variable up into variables.less
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
2022-05-16 13:15:00 +08:00
Volker E 2adab440a5 styles: Replace deprecated Less .transition() mixin with standard CSS
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
2022-05-13 20:37:22 +00:00
jenkins-bot 2cbb390edd Merge "styles: Replace deprecated Less .box-sizing() mixin with standard CSS" 2022-05-13 15:42:11 +00:00
Volker E e4d8c573a9 styles: Replace deprecated Less .box-sizing() mixin with standard CSS
Bug: T306488
Change-Id: I299e50397c4bf6f99b9892e83c966fffadd24048
2022-05-12 13:41:30 -07:00
Jon Robson 2213963241 [Grid preparation] Use variables for selectors with state
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
2022-05-12 20:26:46 +00:00
bwang 91e2e55a10 Simplify TOC spacing styles/logic by reusing the visible sticky header class
- 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
2022-05-10 11:39:05 -05:00
bwang 94be7578f5 Factor out a separate scroll observer for the TOC A/B test, which should be fired separately from the page title observer used by the sticky header and TOC
Bug: T307952
Bug: T307345
Change-Id: I3f247730fa1c399e6d2e4d866677703fc24e8c58
2022-05-09 20:44:54 +00:00
jenkins-bot b6847038f8 Merge "[HTML] Refactor Content header templates" 2022-05-06 18:43:34 +00:00
Jan Drewniak 1288c97179 [HTML] Refactor Content header templates
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
2022-05-06 15:37:04 +00:00
Jon Robson 305fbdacf8 [Grid preparation] ArticleToolbar component
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
2022-05-05 21:13:01 +00:00
Jon Robson 9a2b3d6275 [Grid preparation] Structure the header
Restructure the header to have two child elements

Change-Id: Ib5b7f31419ae6b62f62878947651b8ab843a3955
2022-05-05 17:54:28 +00:00
Jon Robson 3b4b101459 Disable max width on article toolbar container
Bug: T306353
Change-Id: I1c9e223ebc22cf0e0a337856041f34449e6c483b
2022-05-05 02:21:17 +00:00
bwang cdc46e70da Fix TOC fadeout placement
Bug: T306893
Change-Id: Ib6fa8836948b6d6f202eb5365ae660acf210b473
2022-05-04 23:37:43 +00:00
jenkins-bot 3373d065c7 Merge "Fix Sidebar.less auto merge commit" 2022-05-04 20:19:12 +00:00
jenkins-bot a68409d262 Merge "[TOC] Remove pointer-events:none on .sidebar-toc-link" 2022-05-04 19:38:32 +00:00
bwang 6cc98aa449 Fix Sidebar.less auto merge commit
Auto merge commit for the 'Adjust table of contents margins at 1000-1200 breakpoint' patch incorrectly deleted a line from Sidebar.less. I need that deletion in 789210, because it will be backported later today
https://phabricator.wikimedia.org/F35103224

Change-Id: I0404c02d71160ec4537e49fc77489a8a5027a183
2022-05-04 17:05:42 +00:00
jenkins-bot 8a2f61ee02 Merge "Adjust table of contents margins at 1000-1200 breakpoint" 2022-05-04 16:49:53 +00:00
Jon Robson 9c26833af6 Adjust table of contents margins at 1000-1200 breakpoint
Bug: T307004
Change-Id: Ibb7be459305eaee57503d4efd67e19cd0f00046b
2022-05-04 16:04:33 +00:00
bwang 0b27b29475 Hide navigation menu label and remove legacy sidebar styles from modern styles
Change-Id: I701860ce0bf5f34c8318a999cddd7eede94aee3a
2022-05-03 16:50:58 -05:00
Jon Robson a1e5fd5fcc On special page do not show empty more menu to low resolutions
This is a follow up to I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
On Special:Userlogin a "more" menu appears that's visible but empty
that should not

 Bug: T306229
Change-Id: I9384b3015de9991db41bde8ccc8f404ac533f198
2022-05-02 20:22:44 +00:00
Jan Drewniak 7e81c26712 [TOC] Remove pointer-events:none on .sidebar-toc-link
Previously, we relied on setting pointer-events:none on all child
elements of ToC links.

This propagated the click event up to the link itself in Javascript
and allowed us check if an element with the class `.sidebar-toc-link`
was clicked.

Unfortunately as of Chromium 101 this approach causes the entire link
in the sidebar to be unclickable.

Instead, this patch checks if the ToC link or any of it's children
have been clicked (using the less efficient `Element.closest()` ).

Bug: T307271
Change-Id: I2264b7862f6e1ef50c5c722daee81acc39eea54e
2022-05-02 19:48:30 +00:00
Tim Starling 8d0659b1e6 Updates for core temp user autocreation feature
* Use pt-tmpuserpage for the temp user name.
* Use the userAnonymous icon for the temp user personal tools menu.
* Suppress the logout menu item for temp users.

Depends-On: Ib14a352490fc42039106523118e8d021844e3dfb
Bug: T300263
Change-Id: I8ac5de82f76a9ec58b0fbef85546bc7fd5b793d2
2022-04-28 20:32:53 +00:00
bwang b075c90f60 Update TOC heading and link styles
Bug: T306562
Change-Id: Iafe335547a1e3c432efce303b5c0e5f8f5a23a15
2022-04-28 13:32:59 -05:00
Jon Robson 64df4fde20 Remove dancing tabs with CSS only solution
Remove JavaScript that collapses tabs and replace with an easier
to maintain breakpoint based solution.

Tabs will now collapse below the tablet breakpoint

Note: In the case of mw.util.addPortletLink, to add items to the
`views` menu, these will not be collapsed into the more menu and
must now be explicitly added to both menus, ie. if the window is
resized these will hide and not appear in the more menu.

However, when mw.util.addPortletLink attempts to add to `views` menu
when there is not available space, we will redirect those links to
the more (`cactions`) dropdown menu.

Bug: T306229
Change-Id: I34ace0aeb3e23d8f6a8c5a8680bb492f37e343ad
2022-04-28 17:57:10 +00:00
jenkins-bot 0f31961e35 Merge "Add word-break CSS to TOC links" 2022-04-27 22:21:17 +00:00
bwang 61eec96090 Add word-break CSS to TOC links
Bug: T306913
Change-Id: I95420c837a779a85e55c20c7a9d1ae74b632c6cf
2022-04-27 19:24:18 +00:00
bwang af8cf470fd Fix TOC bottom fade
Additional change: Fixes an eslint warning

Bug: T306893
Change-Id: I778470ec5fa2081e4412f40b0180efbff7013d1b
2022-04-27 19:07:17 +00:00
bwang ea64b86f33 Enable collapsible TOC sections for user with preferred reduced motion
Bug: T306652
Change-Id: Ia94b9dd32484f5f8b4c8bfe28d7c5b1f303855bf
2022-04-26 23:38:14 +00:00
Jon Robson c269419af3 Disable animations when user prefers reduced motion
When browser preference for reduced motion is enabled:
* Disables bolding of table of contents
* Disables sticky header transition

Bug: T254399
Change-Id: I8ef9e59b258fed977ce370da352b1924832d842b
2022-04-26 23:31:38 +00:00
Jon Robson 7d75bb37ad [ToC] Increase threshold for ToC collapsing to 1000px
Bug: T306904
Change-Id: Ib3ad66a8f4ccf9c5ba323031821d6e681069bde5
2022-04-26 17:46:51 +00:00
Nicholas Ray 718bcef6f9 Fix empty space on left when bucketed in the control/unsampled group
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
2022-04-19 14:35:49 -06:00
Clare Ming 5800b80596 Adjust alignment of searchbox in header
Per T305069#7832390, left edge of searchbox input should line up with
the left edge of the main content area.

Bug: T305069
Change-Id: I737c3cac09ae18c598164b232b6461f72451b3e3
2022-04-15 13:56:32 -06:00
Clare Ming f12659fff6 Layout + visual style changes for sticky TOC
- Layout updates per design review.
- Visual updates per design review.

Bug: T304166
Bug: T305069
Change-Id: I2f95d5938674bb8263b6203c5f6a469762bf0cc2
2022-04-15 10:24:46 -06:00
jenkins-bot b7268dd661 Merge "Fix position of search box in vector-22" 2022-04-12 00:41:52 +00:00
Nicholas Ray 5eacd5e629 Fix position of search box in vector-22
Looks like the selector for `vector-search-box-show-thumbnail` needs to
be adjusted as it is on the same element as the `vector-search-box-vue`
class.

Change-Id: Ief1dadddc082add65ae4bf29c951f2ddefb15d5b
2022-04-11 18:01:19 -06:00
jenkins-bot 107abe79a0 Merge "Scope ULS styles to when language button is in header" 2022-04-09 00:07:09 +00:00
jenkins-bot e527168978 Merge "Force legacy TOC to render at lower resolutions" 2022-04-07 23:39:14 +00:00
Clare Ming b24cf900fe Force legacy TOC to render at lower resolutions
- If TOC A/B test is enabled, page is in treatment group, and
viewport is below tablet, force legacy TOC to render.
- If TOC A/B test is disabled and new TOC feature is enabled,
and viewport is below tablet, neither TOC should render.

Bug: T300975
Change-Id: Ib30c3473eb47d6ac60924f40ccd0e42d29625407
2022-04-07 15:06:30 -06:00
bwang 40045c6e0e Scope ULS styles to when language button is in header
Bug: T304468
Change-Id: Iebacb6a7bf3412a6ee76eb5c9fdb9471c02dd16c
2022-04-07 14:47:44 -05:00
Clare Ming 805c6c97c2 Remove TOC margin to not always show fade out
Bug: T302076
Change-Id: I06dd5fc56c30299aceeae46b16d3ebd3e3cf11aa
2022-04-07 11:49:47 -06:00
Clare Ming a0b1b5b056 Fix TOC fadeout proper
Bug: T302076
Change-Id: I247a1a92e6eaa3413053514866966393ff3c1964
2022-04-06 16:25:07 -06:00
Clare Ming 83f324e863 Add fixes for sticky TOC fade out
Bug: T302076
Change-Id: I9fffb17e60182ef2d667ed86218b8f24e1d76f5c
2022-04-05 13:52:40 -06:00
Nicholas Ray 6fbf08a198 Build A/B test bucketing infrastructure for the table of contents.
* 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
2022-04-04 17:06:29 -06:00
Clare Ming 2bfdbe74b6 Do not show footer menu in print mode
Bug: T300178
Change-Id: I48df6c39019dc0551ffb0ee559c51d5f6b31c825
2022-03-29 17:24:18 -06:00
Clare Ming 1d574b86f1 Add fade to indicate scrollability in TOC
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
2022-03-28 15:58:26 -06:00
Jon Robson 826a97db0e Table of contents should be hidden at lower resolutions
There should be no left margin on article content.

Bug: T298898
Change-Id: I92dafcc8f1bbd0dc4a21c20035b829198c18e8cb
2022-03-21 21:17:21 +00:00
Jon Robson b86dbc756c Address some code FIXMEs
- Remove references to the removed wgVectorUseWvuiSearch
configuration
- Remove mw-body qualifier on Indicators component.
- Drops some cache related FIXMEs

Change-Id: I6823b9c5bf19a067b56badf29f874a7127867a09
2022-03-21 20:29:58 +00:00
Abijeet 3a39708163 Set position and z-index for mw-page-container
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
2022-03-16 13:29:07 +05:30
jenkins-bot fc897266bc Merge "Use explicit line height for user menu items" 2022-03-03 17:47:44 +00:00
jenkins-bot 9205554552 Merge "Render sidebar menu above TOC" 2022-03-03 00:26:38 +00:00
bwang 9fb8af8ae8 Render sidebar menu above TOC
Can only be merged after I8c0924f6de28b15602969de873a843b4cd69548b
has been in production for 3 days

Bug: T300875
Change-Id: I924a69b37214a34f989f49f0425c701650928e17
2022-03-02 17:04:47 -06:00
jenkins-bot 288c8b95b2 Merge "Update Vector menu CSS to use vector-menu-heading instead of h3" 2022-03-02 19:21:10 +00:00
Mortal303 ab11cc9adb Update Vector menu CSS to use vector-menu-heading instead of h3
Replaced h3 tag in includes/templates/Menu.mustache with label tag.
Replaced h3 elements in .storybook/icons.less, resources/common/components/Menu.less,
resources/common/components/MenuDropdown.less, resources/common/components/MenuPortal.less,
resources/common/components/MenuTabs.less,resources/skins.vector.styles.legacy/components/MenuDropdown.less,
resources/skins.vector.styles/components/UserLinks.less, resources/skins.vector.styles.legacy/components/Sidebar.less
and resources/skins.vector.styles.legacy/layouts/screen.less
by vector-menu-heading.

Bug: T290280
Change-Id: I6eee7d6bc47c74a62166d4579fd4d3da3dc88e88
2022-03-02 20:05:36 +05:30
jenkins-bot 9c9d8693c5 Merge "Only show scrollbars when needed in language menu" 2022-03-01 20:20:09 +00:00
bwang be2abb581c Hide sticky header and ULS button in print mode
Bug: T300178
Change-Id: Ie1eb02530ec62fa011da4be45a61d26522c1650b
2022-02-25 17:32:35 +00:00
bwang 5f0c0cb294 Use TOC template data for showing collapsible section arrows
Bug: T299361
Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd
Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-22 15:47:23 -06:00
jenkins-bot db902a3250 Merge "Offset the TableOfContents top property only when the sticky header is shown" 2022-02-19 01:32:03 +00:00
Clare Ming 098f65712e Fix long titles with wbr tags in sticky header
Bug: T300134
Change-Id: Ice45acf026e4ef0deee9c6d6f905634cad59c2e3
2022-02-18 17:14:15 -07:00
Nicholas Ray 29e40714bc Offset the TableOfContents top property only when the sticky header is shown
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
2022-02-17 12:20:15 -06:00
bwang 301e09916d Toggle ToC sections when clicking toggle button
Bug: T300167
Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-16 15:48:28 -06:00
jenkins-bot 0f49a257d1 Merge "Collapse ToC by default & expand sections when clicking section headings" 2022-02-15 19:31:18 +00:00
Jan Drewniak 7d32ec80d3 Collapse ToC by default & expand sections when clicking section headings
Collapses sub-sections in the new table of contents by default
(except for non-js and reduced-motion users) and expands the
sections when the top-level section link has been clicked.

Refactors the `activateSection` TableOfContents methods into separate
`activateSection` and `deactivateSection` functions.
Adds `expandSection` and `collapseSection` methods.

Adds triangle icon as a visual expand/collapsed indicator
next to all ToC section headings and are hidden via CSS based on
whether or not the section contains subsections.

Adds test for tableOfContents.

Bug: T299361
Change-Id: I36b3ae7f9f633877683bc17a9444c970d7fa7293
2022-02-15 00:09:50 -05:00
bwang 2a83dad477 Add back flex-grow for sticky header search bar
Change-Id: Id503163d85dfc519d4c47f95e4567dcacfa7458e
2022-02-14 13:08:07 -06:00
Nicholas Ray 390155c67f Move #mw-sidebar-button layout styles to Header.less
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
2022-02-09 09:29:47 -06:00
BrandonXLF 936bbc427a Only show scrollbars when needed in language menu
Bug: T301058
Change-Id: I19af6c27b7adf8a35ccbc4163c585e338240eb72
2022-02-05 21:24:47 -05:00
Clare Ming 19e5d2885a Fixes for sticky header:
- Make page title width fill container.
- Remove page title fadeout, replace with ellipsis.
- Prevent language button contents from wrapping.

Bug: T298885
Bug: T300036
Bug: T298887
Change-Id: I6b09f89ed89a9da7406cdf8b3a00698a9dd66d10
2022-02-04 15:36:35 -07:00
Clare Ming 4d8b548f5f Hide sticky header below 1000px port width
Bug: T298836
Change-Id: Ie524f997d2f9847252afc215d3ac589e511ace07
2022-02-03 13:54:16 -07:00