Commit graph

457 commits

Author SHA1 Message Date
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
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