Commit Graph

3292 Commits

Author SHA1 Message Date
Jdrewniak b5007c5f1c Revert "styles: Unify on standard external link icon""
This reverts commit 94e436d520.

Change-Id: I7d8e6d60fd9b704cf9092d7f7a1dbe76850647a4
2022-08-01 13:03:11 +00:00
Thcipriani 94e436d520 Revert "Revert "styles: Unify on standard external link icon""
This reverts commit ef7a6fd6ed.

Reason for revert: no show for backport 2022-07-28T20:38:30

Change-Id: I5aa97ea98292af7db342779b920c5645f7d95b2a
2022-07-28 20:38:41 +00:00
Jdrewniak ef7a6fd6ed Revert "styles: Unify on standard external link icon"
This reverts commit cffd494107.

Reason for revert: Reverting due to how the new icon doesn't scale well at 2x resolution. https://phabricator.wikimedia.org/T261391#8111726

Bug: T261391
Change-Id: I6d49fed2b9e249de15cf40216c01153c7b793ee2
2022-07-28 15:02:44 +00:00
Volker E 23b1fb3b45 icons: Amend external link icon for lo-dpi screens
Following-up I05b832a36e8, which has seen the right canvas of 12x12, but
an older, incorrect version of the icon not perfectly optimized for
the lo-dpi screens.

Bug: T261391
Change-Id: Ia0054372c4d3bd5bb7e4b24a8f412bcaf6bcd80b
2022-07-25 16:09:09 -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
jenkins-bot a32a2cc322 Merge "[Refactor] Split MenuDropdown.less for modern and legacy" 2022-07-25 20:39:05 +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
Translation updater bot 479bcc3958 Localisation updates from https://translatewiki.net.
Change-Id: Ib78b2b6129bd1ef4b4cb005b5d2a34bc93f7530c
2022-07-25 08:43:52 +02:00
jenkins-bot 95ce5900bf Merge "Enable sticky header on article and user talk pages" 2022-07-22 21:16:41 +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
Clare Ming 1297733a65 Add text to TOC collapsible button label for accessibility.
- Provide message translations.
- Include other TOC message that was missing.

Bug: T310810
Change-Id: Ibd612b48ea3ef3f9f31f4bb5791c0cb82e447ece
2022-07-22 10:45:40 -06:00
Ed Sanders acc4b3c413 Enable sticky header on article and user talk pages
Don't show the talk page link on talk pages themselves.

Bug: T304188
Bug: T309424
Change-Id: I5f4c9373c18d65245416cc3f5b603381abc3de1c
2022-07-22 17:22:24 +01: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
Jon Robson 75ffe2eb36 Layout: Release CSS grid
Results in the following visual changes:
- Footer will always span full screen
- The top of the TOC should align with the hr under the page title

Bug: T312241
Change-Id: I3fc9de5900aff441715f004aed786f95b14657a5
2022-07-21 14:15:12 -07:00
jenkins-bot 64f724903e Merge "Remove Table of Contents feature flag" 2022-07-21 20:06:45 +00:00
Volker E 3315b33217 styles: Make external icon indicator size for lo-dpi environments
Using indicator 12x12 canvas, following up Ibd15517f3adf, to cater to
lo-dpi screens.
We've already had that canvas in the original patch, but in the first
new patch left it behind.

Bug: T261391
Change-Id: I05b832a36e89f6d75ab4f620b8db60b6eb578f73
2022-07-21 12:25:29 -07: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
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
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