Commit graph

775 commits

Author SHA1 Message Date
Jdrewniak c035d8babd 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 14:43:51 +00: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
jenkins-bot 225efaaabb Merge "Page toolbar visual tweaks and code clean up" 2022-07-27 19:40:17 +00:00
jenkins-bot 3fb45cfc14 Merge "Hide TOC button on print" 2022-07-27 17:33:28 +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
Clare Ming 7a63671b51 Hide TOC button on print
Bug: T313298
Change-Id: Ibf5281ce9deabc32f59df9c088af6dcb29b86ddf
2022-07-27 10:24:19 -06: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
jenkins-bot 77bd2e5fbd Merge "Sticky header: Add a link to the 'subject' page when on talk pages" 2022-07-26 22:36:01 +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
jenkins-bot aa925d01d9 Merge "Define non-standard colors for legacy Vector" 2022-07-26 21:27:45 +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
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
Ed Sanders c9a04099d0 Sticky header: Add a link to the 'subject' page when on talk pages
The subject link does not have a consistent ID like the talk link,
so it needs to be computed from the canonical namespace name.

Something similar is done in VE.

Bug: T309424
Change-Id: Ie82ca61aef30204edd09793963b25464febb17fe
2022-07-22 22:24:38 +01: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
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
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
Jon Robson 96a12622c2 Define non-standard colors for legacy Vector
Bug: T213778
Change-Id: I7e350c1d6d6c584ce97d210a9d62190a453693c4
2022-07-21 21:31:31 +00: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
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
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