Commit graph

4874 commits

Author SHA1 Message Date
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
Translation updater bot 66cf502e17 Localisation updates from https://translatewiki.net.
Change-Id: I1819790abbaabd418d477a61919a7f1e4ac043ce
2022-07-21 09:06:58 +02:00
jenkins-bot e83ca244af Merge "styles: Unify on standard external link icon" 2022-07-21 00:07:17 +00:00
jenkins-bot 0bb47ce2e2 Merge "styles: Remove linear-gradient hack for non-supported browsers" 2022-07-20 23:40:23 +00:00
jenkins-bot 966975ea2c Merge "styles: Replace IE hack list-style: none none" 2022-07-20 23:36:07 +00:00
Volker E d365148f8d styles: Replace IE hack list-style: none none
Hack has first been introduced in I7d4b075ac90 more than 4 years ago.
It has been introduced to tackle IE <=8.

Bug: T306486
Bug: T308344
Change-Id: Ie84a177f79d226be98298a42ebfdd447e33a1372
2022-07-20 22:20:15 +00:00
Volker E 46514f2d2e styles: Remove linear-gradient hack for non-supported browsers
`linear-gradient` hack was necessary for browsers, that weren't
supporting SVGs.

Bug: T306486
Bug: T308344
Change-Id: Ie61ba7955ece62015436d2aee44a66bacf42e552
2022-07-20 12:40:41 -07:00
jenkins-bot 22969cb39d Merge "styles: Remove IE9 Flexbox fallback" 2022-07-20 16:45:37 +00:00
jenkins-bot 02451be660 Merge "search: Mark App.vue as being compatible with Vue 3" 2022-07-20 16:38:34 +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 cffd494107 styles: Unify on standard external link icon
Unify on using standard OOUI 'linkExternal' icon, which is directly
replacing Vector's image without relying on ResourceLoader.
Please note that the icon features standard link color `#36c` which is
implemented in a later step. Due to the small icon size and the fact
that current external link icon is also not using the legacy color, this
seems acceptable to move forward with.

Also using relative `em` instead of `px` to support user text zoom
capabilities and introducing a `@size-indicator` variable to be replaced
by WikimediaUI Base variables later.
Alternative to I49de3bfff45.

Replacing images and image names to make quicker lookup with icon
collection possible future-facing.

Note that CSSJanus is flipping the `ltr` string in the background image
rule to `rtl`, therefore making sure that both icons are available.

Bug: T261391
Change-Id: Ibd15517f3adf06010807901e8fb3299e2046a473
2022-07-20 04:41:14 -07:00
Translation updater bot fce9cfc652 Localisation updates from https://translatewiki.net.
Change-Id: Ia4c23a2bc3e02d00e548aafc185b2d1bdaad04ac
2022-07-20 08:29:59 +02:00
Roan Kattouw 21b9dda2a2 search: Mark App.vue as being compatible with Vue 3
This doesn't change any behavior, it just suppresses a compatibility
warning and ensures that future changes to this file won't introduce
code that relies on Vue 2 compatibility features.

Change-Id: Id15af7d5d5035f59dc8f402f00d8f7f0d73a77f7
2022-07-19 16:23:06 -07:00
Jan Drewniak d709bb5606 Update to 4ab2b1bf: Refactor Vector tabs layout
Removes a height:100% rule that was causing a shift in layout.

Change-Id: I7b29ba201e9937174852ba0d7919fd65e530851f
2022-07-19 17:24:05 -04: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 9a177a2f8f Merge "styles: Use mediawiki.skin.variables transition-duration vars" 2022-07-19 16:43:32 +00:00
jenkins-bot 22b4e4f31a Merge "styles: Replace distinct color var with standard variable" 2022-07-19 16:43:30 +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
Volker E 026b19925e styles: Use mediawiki.skin.variables transition-duration vars
Bug: T313243
Change-Id: Ic592dfe0a8711f33196d84a222ffa1d6214545e8
2022-07-19 04:19:08 -07:00
Translation updater bot d5ce552394 Localisation updates from https://translatewiki.net.
Change-Id: I82330f9f0f1a47e0ffda821057599dceed089cd4
2022-07-19 08:19:22 +02:00
Gergő Tisza bd57c4b851
Allow composer/installers plugin
`composer update --no-interactive` errors out if this flag is not set.
Setting it to true, as that was the status quo before Composer 2.2.

Bug: T298283
Change-Id: I9805e130a0fd8f9871693a08eec9a35194f19e4e
2022-07-18 19:24:19 -07:00
jenkins-bot cfe21914ce Merge "Revert "Refactor Vector tabs layout for reduced size & complexity"" 2022-07-18 23:46:12 +00: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
jenkins-bot 1721b23ac2 Merge "Refactor Vector tabs layout for reduced size & complexity" 2022-07-18 23:01:07 +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
jenkins-bot 9cc22f9c7d Merge "Fix config overrides in SkinVectorTest." 2022-07-18 20:42:33 +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 d4b205e149 styles: Replace distinct color var with standard variable
To safely looking forward to standard Codex tokens.

Bug: T313243
Change-Id: I3ed5dedab2b5f2edc2b1da13d07e21b77791f08a
2022-07-18 11:17:16 -07:00
Jan Drewniak c9c5c9e5a4 Followup to 33a6fb6 - remove is-title-above-tabs from template
The configuration for this feature was removed, so the conditional
in the skin.mustache template should be removed as well.

Bug: T311773
Change-Id: I6a8e671c5f08d9af73145b900398b185febb3bc7
2022-07-18 10:43:36 -04:00
Translation updater bot c0d752cbe0 Localisation updates from https://translatewiki.net.
Change-Id: I678ccbe7fe725add25b69444d8cf30f7d1092596
2022-07-18 08:17:51 +02:00
daniel bf67540431 Fix config overrides in SkinVectorTest.
Use overrideConfigValues instead of installMockMwServices and setMwGlobals.
This ensures that configuration overrides are handled consistently.

This also fixes a data provider that relied on a service, which causes
the test to fail when not run via the pgpunit wrapper.

Depends-On: I898927717ce961d98617a7fcd9c7fa8e19bec412
Change-Id: I6354fa39e1e9adf4be6eb6b26db82b8f106c593e
2022-07-16 16:05:16 +00:00
Translation updater bot cf3d3b453f Localisation updates from https://translatewiki.net.
Change-Id: I8a640a80e707da91be15407167930726098db3f9
2022-07-15 08:52:00 +02:00
jenkins-bot 3369c7e259 Merge "styles: Remove obsolete variable" 2022-07-14 16:03:45 +00:00
jenkins-bot 3aa6c7baf1 Merge "Move code for adding sticky header class to SkinVector22.php" 2022-07-14 15:22:49 +00:00
Volker E a651d5e86b styles: Remove obsolete variable
Following-up Idf943449b5e4.

Bug: T308344
Change-Id: I06588d42e3e5c95248886df33ddda45d4f1eaf1f
2022-07-14 07:21:12 -07:00
Translation updater bot a15d652b4a Localisation updates from https://translatewiki.net.
Change-Id: I77f415079a652c4e4d11e55a16dfb6badc1d8bc2
2022-07-14 08:50:40 +02:00
Translation updater bot 084956980c Localisation updates from https://translatewiki.net.
Change-Id: I413cf595ccc623aec15cff4096bc688009907fb5
2022-07-13 08:19:42 +02:00
Translation updater bot 1e99e24c96 Localisation updates from https://translatewiki.net.
Change-Id: Ibff5edcec16c47f01adda3b1483211d4ea4bf6dc
2022-07-12 08:17:27 +02: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
Ed Sanders e2d70c383e Move code for adding sticky header class to SkinVector22.php
Per the comment at the top of the file, much more of this code
needs to be moved to SkinVector22.php, but this is causing a specific
regression, so can be moved now.

Bug: T312782
Change-Id: Ief7581782f1e4eefc7474cceb81830783dff99a8
2022-07-11 16:11:58 +01:00