Commit graph

969 commits

Author SHA1 Message Date
jenkins-bot b33513e20b Merge "Override default sublist styles" 2024-05-17 21:08:51 +00:00
jenkins-bot c570ec099d Merge "Optimize styles" 2024-05-17 18:30:33 +00:00
Jan Drewniak ff5a61e9c6 Add exclusion behaviour for "width" option in Appearance menu
- Adds the notice "This page is always wide" and disables
  the inputs for the "width" options in the Appearance menu
  when pages are excluded via configuration ( `$wgVectorMaxWidthOptions`).
- Changes layout behaviour so that pages in the
  $wgVectorMaxWidthOptions['exlcude'] configuration
  stretch the entire viewport width.
- Stops the width settings in the Appearance menu from
  being hidden on smaller resolutions.

Bug: T364015
Change-Id: Idee294adf3b309e03834276ea75e4ae43b0cffcb
2024-05-17 17:58:19 +00:00
Jon Robson 1d17b4624f Optimize styles
1) Icon optimizations
* Load styles for expand icon in
JavaScript since it relates to table of contents and that is only
enabled with JavaScript
* Drop vector-icon--x-small class since it only applies to this icon
* Remove some FIXMEs to an issue that has already been fixed
upstream

2) Move styles that do not need to be render blocking to skins.vector.js
* Move sticky header to skins.vector.js since it doesn't work without
JavaScript
* Move popupNotification to skins.vector.js since this is never server
side rendered.

Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-17 16:26:16 +00:00
bwang ff894e3682 Override default sublist styles
Bug: T364865
Change-Id: I179c059992b2ae614b984b8023774306764ccb57
2024-05-17 15:46:41 +00:00
bwang f13bc5ed80 Remove list-style-image used by ul elements
Bug: T364865
Change-Id: Id365e946e8c71f4812cbb9e4b00618fb73572554
2024-05-15 15:01:40 +00:00
Jan Drewniak 0d1de4773d [Follow-up] Override VE overlays in night-mode
Follow-up to 26d39ec, change VE overlay selector
from `.ve-ui-overlay-global` to `.ve-ui-overlay`.

Bug: T363861
Change-Id: Ie531ce6d03d81fbce374f7e17c785d4bb076bfda
2024-05-14 14:30:56 -04:00
Jan Drewniak 26d39ecafa Override VE overlays in night-mode
Creates a Less variable `@OOUIOverrideSelectors` which can serve
as a list of selectors that we want to treat the same as the `.notheme`
class (as an alternative to adding the `.notheme` class across repos).

Adds only one selector to this variable, `.ve-ui-overlay-global`
in order to force VE overlays to appear in light-mode while night-mode is
enabled.

This is a temporary measure until T363849 is resolved.

Bug: T363861
Change-Id: I3e3a209f1a9bd9130fc61915b9b2ff7134405e59
2024-05-13 21:58:20 +00:00
bwang 337d608a56 Fix red link color in dark mode
Bug: T363778
Change-Id: Iae4fe2d793b8efbb10b54144ce4093c3e2112da2
2024-05-08 14:31:43 +00:00
Jon Robson ca0d404e50 Enable night theme in Vector
- New night theme added via Codex `.cdx-mode-dark();` mixin.
- CSS custom properties separated from skin.less.
- Font-size rem conversion removed since Codex now uses rems.
- bundlesize increased by 1kb ( followup from
Icfcb5c7418061a5727580f0685054356ba4edb72 ).
- Icons that use background-images are inverted for night-theme.
- Linter error fixed for long-lines in clientPreferences.js

Co-Author: <Bernard Wang> bwang@wikimedia.org
Bug: T354889
Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c
Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
2024-05-02 13:22:59 -05:00
jenkins-bot c3987d472b Merge "Rename client preference menu to appearance menu" 2024-04-29 20:41:19 +00:00
bwang 0109218ab9 Rename client preference menu to appearance menu
Bug: T362808
Change-Id: Id6800d38eebf433cf0c9e3f179dd83df2eefd1fb
2024-04-29 15:38:20 +00:00
Jon Robson e84ec101f7 Prepare variables for night mode
* Drop all hexcodes
* Drop unused background-color-secondary - only applies in legacy
skin and replaced by background-color-secondary--modern
* Drop unused  border-color-content and border-color-content--tabs-inactive -
only apply to legacy Vector skin

Bug: T354889
Change-Id: Ie0accaaac2ac3717b6f034c5832f8c372b91c343
2024-04-25 21:29:23 +00:00
Jan Drewniak c3c7462951 [VISUAL CHANGE] Make spacing in UserLinks menus more consistent
Changes spacing around icons in the user-links menus
so that the spacing is more consistently 8px.

Bug: T353987
Change-Id: I860ab858363f0535fd80e3a823cf90f91c2e9a86
2024-04-18 23:49:07 +00:00
jenkins-bot f6c0071bd7 Merge "Add exclusion notice for night mode feature" 2024-04-17 16:44:03 +00:00
Jan Drewniak a3801497b9 Add exclusion notice for night mode feature
If night-mode is disabled on a certain page via the
exclude list in skin.json, then the following class:
".skin-theme-clientpref-excluded" will be added to the HTML element.

In this scenario, the related client-preferences
menu options are visible, but disabled, and a notice
is rendered below the options informing users of this state.

Bug: T361158
Change-Id: I46d335d079a2d27c7a4122e23ac7e479c286b886
2024-04-16 22:38:35 -04:00
jenkins-bot f0673ac58a Merge "Use client preferences for appearances menu" 2024-04-16 18:02:38 +00:00
Jon Robson c8442ba32e Drop background base declaration
This has been confusing a few editors and breaks support with
Extension:DarkMode so let's remove for now.

Change-Id: I84a58b49f8f3d5af8765531bc14c43b42fe39a1d
2024-04-15 16:06:41 -07:00
bwang c69a53a16c Use client preferences for appearances menu
Bug: T361586
Change-Id: I636a557e724f23ea18da135bac59cb304ba81091
2024-04-15 22:36:48 +00:00
jenkins-bot de06d9e104 Merge "Add h1 headings to fix for applying font-sizes" 2024-04-05 07:04:34 +00:00
Arlo Breault ff2e6a48ec Add h1 headings to fix for applying font-sizes
h1 headings can be created in wikitext but are discouraged.  They
nevertheless appear in the corpus.

https://www.mediawiki.org/wiki/Help_talk:Formatting#Level_1

Bug: T359881
Follows-Up: I15eaf43c6750c76363ec804eda9b8ca6ec4709c2
Change-Id: I1caa6809e1be14f87c791faac852610a522d1c5e
2024-04-04 13:19:17 -04:00
Jon Harald Søby 8416fd3796 Add transparent bottom border to .mw-list-item.vector-tab-noicon
Add a 2px transparent bottom border to .mw-list-item.vector-tab-noicon
in order to prevent visible "jumps" when no item in the list is selected
and one is hovering items (thus giving them a 2px bottom border).

Bug: T361841
Change-Id: I5b6ccd6fc68bab399647c270cf5ef573034bb622
2024-04-04 16:17:25 +02:00
Moh'd Khier Abualruz b3ab84f9e5 Vector - Rename the skin night mode classes to more readable classes
The classes:
- skin-night-mode-clientpref-0
- skin-night-mode-clientpref-1
- skin-night-mode-clientpref-2
is being replaced with
- skin-theme-clientpref-day
- skin-theme-clientpref-night
- skin-theme-clientpref-os

Other Changes:
- Change vector-night-mode preference to vector-theme
- Add skin-theme-os-label and other messages to skins.vector.clientPreferences
- Remove skin-night-mode-* messages from skins.vector.clientPreferences

Bug: T359983
Change-Id: I31eb086e623a97df9fbd004425559e05b0cae170
2024-03-20 23:54:47 +00:00
Ed Sanders 84c2e0ae05 Remove unbalanced padding from trailing paragraphs in popups
Bug: T360143
Change-Id: Ieed96c8be61ee4883daaa17d82d1d1214ef85869
2024-03-14 11:42:49 -07:00
jenkins-bot c38e0677c3 Merge "Migrate uses of codex-search in Vector to use CodexModule" 2024-03-13 16:27:55 +00:00
Moh'd Khier Abualruz 182bb7519b Migrate uses of codex-search in Vector to use CodexModule
- Loaded new skins.vector.search.codex.scripts module in skin.json, with only the CdxTypeaheadSearch component with codexScriptOnly flag set to true.
- Included skins.vector.search.codex.scripts in the script loading configuration for Vector22 within skin.json.
- Turned off the "interface-message-box" feature within Vector22's skins.vector.styles configuration in skin.json, as Codex now supplies these styles.
- Fix the style selector to add `.cdx-button` to `.vector-limited-width-toggle` in BottomDock.less since using the codex style
- Substituted "codex-search-styles" with "skins.vector.search.codex.styles" in the existing configuration.
- Ensured the availability of skins.vector.search.codex.scripts module for use, marking it in the list of modules in skin.js.
- Modified App.vue to utilize skins.vector.search.codex.scripts instead of @wikimedia/codex-search.
- Update App.test.js.snap to the latest output form
- Update bundlesize.config.json with newest values

Bug: T356677
Change-Id: I7fc223db01171efe6656792530d4b625be4c8edc
2024-03-13 15:58:26 +00:00
bwang 0531fbd117 Increase line height for medium and large font settings
Bug: T359030
Change-Id: I5be2e06c01c1959241d8d5347cb4f37c62c7cee2
2024-03-12 14:25:19 -05:00
Jon Robson 9048285310 Address FIXME relating to use of !important
The !important is no longer needed now that T354975 is done.

Change-Id: I62d9dfd03064167851a34e25751919b73734d1e2
2024-03-08 16:40:39 -08:00
Moh'd Khier Abualruz fb734a46f6 Interaction to Next Paint (INP) Core Web Vital Improvement
According to a Google contact, given we set viewport to 1000px
for mobile devices viewing Vector get a tap delay.

The solution was suggested in https://developer.chrome.com/blog/300ms-tap-delay-gone-away?hl=en
and Peter has confirmed helps improve performance.

A supports query is added to limit this rule to only browsers where
it applies.

Bug: T358380
Change-Id: Ifd7d8951e06e3ba0faaed354492d23e6e0bc8f69
2024-03-07 16:53:06 -08:00
bwang 230c837052 Remove language notice
Bug: T353619
Change-Id: I75430c8b1e66158f798fbe27eec4942a089f3931
2024-02-29 17:04:16 -06:00
Moh'd Khier Abualruz cb8be96f3c Table of contents button goes transparent on hover
- Exclude the checkbox in the TOC from the hack done in https://phabricator.wikimedia.org/T333394
- This patch might not be needed as a restructure of codex import to vector could resolve most of the issues

Bug: T344066
Change-Id: I35b2ffa7a761e3ea1460fa97642966486791bab9
2024-02-23 14:10:21 +00:00
jenkins-bot baf9430f30 Merge "icons: restore "background-" CSS rules" 2024-02-22 16:43:09 +00:00
jenkins-bot f10d65e067 Merge "Move pinnable element spacing from the pinnable element to the container" 2024-02-22 15:33:35 +00:00
Eric Gardner d60a644264 icons: restore "background-" CSS rules
Temporarily hard-codes some CSS background rules after Codex's
CSS-icon mixins stopped supplying them upstream (after changing
to use mask-image in icons).

Bug: T358160
Change-Id: I13be424c58b105472ef22f14e4381693f2985cd8
2024-02-21 21:42:46 -08:00
Jon Robson 9f1b94ce20 Correct how font sizes apply to headings
The margin and font rules are being overriden in DiscussionsTools
using equal specificity. The correction to the load order in
ResourceLoader skin module in
I83ac918ad8807c65aab2cd1dd8d7d2cd34b512af will break this.

Bug: T354975
Bug: T357929
Change-Id: I15eaf43c6750c76363ec804eda9b8ca6ec4709c2
2024-02-20 19:38:56 +00:00
jenkins-bot f004beb8a1 Merge "Provide a visual hint that night mode is being triggered in Vector" 2024-02-14 05:27:47 +00:00
Jon Robson 4a2e3f8917 Provide a visual hint that night mode is being triggered in Vector
Working on feature flag not having this is causing confusion. This
will speed up development by allowing me to more easily determine what
mode I am in at all times.

Change-Id: I5d4168bbf7df41f4754b36c6e6aa4955dbc609bb
2024-02-13 22:52:00 +00:00
Derk-Jan Hartman 73f53882d5 Make vector-2022 mw-indicators flex-wrap
Using an 8px gap by default. 8px is used a few times in vector-2022.
Wrapping is useful for userpages with a lot of indicators.

Bug: T340810
Change-Id: I75b59c633a6ff7a8bfdc624e6e5ba06f35fb6aee
2024-02-13 21:01:32 +00:00
bwang 809576b341 Move pinnable element spacing from the pinnable element to the container
Bug: T354431
Change-Id: I8acdb29fab7a0cd4bc8578a85509847d43abbab2
2024-02-13 14:48:48 -06:00
jenkins-bot a96dcb1099 Merge "Truncate long usernames with an ellipsis" 2024-02-08 19:23:53 +00:00
jenkins-bot 5a24f61c3b Merge "Fix extra space from pinned sticky container" 2024-02-08 17:45:21 +00:00
bwang de4b9faeba Fix extra space from pinned sticky container
VISUAL CHANGE:
* The gap between the title and the text "From mediawiki"
decreases - this is an improvement.

Bug: T357022
Change-Id: I436171448ca69413a004024157b24d502aa63bea
2024-02-08 17:11:47 +00:00
bwang 5012f7fff0 Zebra selector clean up
Change-Id: I6a942913ae2fec066b97c1824a09bb07a8eeef45
2024-02-08 10:49:49 -06:00
Jdlrobson 98817085b7 Changes to list spacing
Update <p> spacing to improve consistency of ul/ol spacing,
also update heading spacing to be more consistent,
relying on mw defaults more

This reverts commit 8d3bda7867.

Bug: T352875
Change-Id: I46bf5e3713b4648e9c3facf5e927e924ba51b23f
2024-02-07 20:21:17 +00:00
Ed Sanders 1637b2bbdf Truncate long usernames with an ellipsis
Bug: T356349
Change-Id: I386a8f2165cb29e06e1752050bbd595eae134492
2024-02-01 18:58:46 +00:00
bwang 142591afdc Hide limited width client prefs on screen sizes below 1400
Bug: T355331
Change-Id: Ic32cede70645637bdc887cfef23b1e7385a834a3
2024-01-30 02:14:50 +00:00
jenkins-bot 293ef7776f Merge "Document button alignment edge cases" 2024-01-29 16:02:44 +00:00
Jdrewniak 8d3bda7867 Revert "Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more"
This reverts commit ee73437745.

Reason for revert: This patch caused T355805

Bug: T355805
Bug: T354433
Change-Id: Ibe9edcf6c4d8f25c3cc0c35cebb3aadd5dc09b00
2024-01-24 21:15:46 +00:00
bwang a48a96a73e Document button alignment edge cases
Change-Id: Ib25fa1af2d76c9cb449002deeea6900d5e501c3c
2024-01-24 12:26:39 -08:00
bwang ee73437745 Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more
Bug: T352875
Change-Id: I1f08681c8145bd95781752cb5728ebc9e84dd218
2024-01-16 19:48:33 +00:00
jenkins-bot 4fdf90c515 Merge "Simplify heading styles. Avoid using .vector-body" 2024-01-16 17:43:49 +00:00
bwang 91c5357917 Simplify heading styles. Avoid using .vector-body
Bug: T352875
Change-Id: Iba444d2324aeb578fa739cb12f1b31fb630c9ec7
2024-01-16 11:16:06 -06:00
Volker E 26f47fe0c3 build: Update 'svgo' to latest v3.2.0
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
  relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible
Also unifiying npm command to qua standard notation `minify:svg`.

Bug: T354875
Change-Id: I4fffd9efd430786911fe36e409d2575bfab719bd
2024-01-11 23:28:28 +01:00
jenkins-bot cb96b7b379 Merge "Remove cache related FIXMES for CSS" 2024-01-11 12:52:34 +00:00
Moh'd Khier Abualruz 0d7f38ccc2 [Zebra] Remove !important
- Complying to fix me comment

Bug: T347712
Change-Id: Iacd0065b5a736249046ba89bb618bb13f7c0250a
2024-01-09 19:21:20 +01:00
Jon Robson 0ec9d2ecd6 Remove cache related FIXMES for CSS
Change-Id: I0b8bff3e880bef3e97341c24e40405401381006a
2024-01-09 09:48:06 -08:00
Moh'd Khier Abualruz f83cca3cc5 [Zebra] Merge skins.vector.zebra.styles module into skins.vector.styles
Merges all of the styles in the Zebra module into the default styles.

- skins.vector.zebra.styles ResourceLoader module is removed.
- FIXME's related to Zebra styles are removed.
- Top-level "&" that were used for scoping to feature-flag are removed.
- `$wgVectorZebraDesign` feature flag is removed.

Bug: T347712
Change-Id: I0177541ae87a5d070d5317629ca38de93613d620
2024-01-09 15:46:11 +01:00
jenkins-bot cbc858cfaf Merge "Use Codex upstream icon" 2023-12-06 15:32:15 +00:00
Jon Robson dd7a4e9083 Use Codex upstream icon
Don't use icon defined in mixin which can get repeated every
time mixin is imported.

Bug: T352642
Change-Id: I5716a71a8347f519e13687a475d80233813756ed
2023-12-06 14:49:10 +00:00
bwang badd229bab Fix nonzebra sticky container scrolling behavior and scrollable indicator
- Remove unnecessary CSS from old grid styles
- Consolidate scrollable indicator styles, delete old styles

Bug: T352464
Change-Id: Id33e6d99dba2c680f02b246bbccf26a2aa7e77d9
2023-12-05 19:32:36 +00:00
Moh'd Khier Abualruz 2384a32323 [Zebra] Make .vector-column-start cache compatible
preparing html and css to avoid caching issues
caused by differences between zebra and non-zebra HTML.

Bug: T347712
Bug: T351830
Change-Id: I6f8ae635ba38937729b77ea8517ef2eae0ae12f7
2023-12-04 14:29:06 -06:00
Jan Drewniak 531cbcbd25 Increase "large" font-size option for client-preferences
Increases "large" font-size option from
@font-size-large (18px equivalent) to
@font-size-x-large (20px equivalent)

Bug: T351693
Change-Id: I9e3dd8346b1d6f6a9efd04bb1e43fee9bfd79154
2023-11-30 12:57:37 -05:00
jenkins-bot 35a616368b Merge "Add styles for new heading HTML" 2023-11-28 22:42:11 +00:00
Jan Drewniak 522d655007 Adjust .vector-body paragraph margins
Adds bigger bottom margin (1em) while keeping
the smaller top margin (0.5em) as was previously define.

This keeps the headings close to the paragraphs
while seperating paragraphs from each other.

Bug: T351754
Change-Id: I833372002654ea30deb110af44fb412722bc0ccd
2023-11-27 14:50:03 -05:00
jenkins-bot e55034f3ad Merge "Fix misc client pref bugs" 2023-11-27 18:07:10 +00:00
jenkins-bot e75b2cda57 Merge "Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element" 2023-11-27 17:56:07 +00:00
bwang a304223f04 Fix misc client pref bugs
- fixes unpinned popup message not showing
- fixes radio button spacing in client pref dropdown in Zebra

Bug: T351141
Change-Id: Ieeb5caaa6ccbd83d28dae41d3ca30791c355fcc6
2023-11-27 11:40:53 -06:00
bwang b23f6f6722 Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element
Cached HTML change

Bug: T351141
Change-Id: I7d2b4417db15aad7ea788ac7adf131de2c702d27
2023-11-27 17:09:26 +00:00
Jan Drewniak edfdf05f12 Implement new font-sizes for custom front-size preference
Adds different font-sizes and line-heights for the custom
font-size UI. The custom font-size preference options are now:

1. Compact - 14px font-size & 22px line-height
2. Standard - 16px font-size & 24px line-height
3. Open - 20px font-size & 26px line-height

This removes the "xl" font-size option
(`vector-feature-custom-font-size-3`) and it's related i18n messages,
and changes the remaining message to match the new options.

The default font-size, when the custom font-size feature is disabled,
is "compact".

Bug: T351693
Change-Id: I5975a78ce7327f314fd55de55c222ac08d801fbd
2023-11-24 15:23:56 +00:00
Moh'd Khier Abualruz e480bfa2b5 Update theme icon for client preferences in user links
- Add appearance.svg file and classes
- Update the icon name in php
- Update icon name in test data and Snapshot

To test: change return value of
  isClientPreferencesPinned() from SkinVector22
  PHP Class to false

Bug: T351142
Change-Id: If61f3019430be3cb9c926b09bc397e27d8e636f2
2023-11-24 15:01:35 +00:00
Jan Drewniak 78f1f1c671 Follow-up to 7a8059d76 - Vector increase paragraph spacing to 1em
This patch changes the paragraph spacing for Vector 2022
instead of legacy Vector.

Bug: T351754
Change-Id: If205abd17236f9e325cb477b589fa35da246d623
2023-11-23 18:16:00 -05:00
bwang d2b413a721 Make client prefs fully pinnable
Bug: T351141
Change-Id: Ic4a166fb3234b27dbf3d37891abfdf15781c8867
2023-11-22 14:39:28 -06:00
Bartosz Dziewoński 3c2602b682 Add styles for new heading HTML
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.

See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes

Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: I62d7e8ad7d8f25d145ec1f33230d6043982aec1e
2023-11-17 20:36:56 +00:00
ksarabia 1a15dbd4d0 Fix sidebar component order
* This moves down the client pref menu
* For now when page tools is collapsed the client preference menu
is hidden. This will be revisited when we implement pinning
in the next sprint.

Bug: T350417
Change-Id: Ic94d6fd2c4ccb667b0ae602d03c564f88a14b8ec
2023-11-16 00:30:28 +00:00
Jon Robson 5a0678c77d Allow client side preferences to render in a dropdown
Known problems:

- For now, this can only be rendered by manually updating
the isClientPreferencesPinned local variable in SkinVector22
This will be addressed in T351141
- The icon is not correct. This will be addressed in
https://phabricator.wikimedia.org/T351142

Bug: T350195
Change-Id: I0b1ec445c4d292bbf417a39dbc5d2032b563f525
2023-11-15 12:50:54 +01:00
Moh'd Khier Abualruz 412c1f2d83 Create a sidebar for user preferences
* Adds mustache for sidebar
* Adds file to render sidebar

Bug: T350417
Change-Id: I691c8a0487e158e96027109c223569224f03a102
2023-11-14 14:33:01 -08:00
Jon Robson 07a26a9448 Refactor VectorComponentUserLinks to not use hooks
Bug: T350195
Change-Id: I6cbf45587475f0477657a7ce9309b2cd42da33c1
2023-11-09 17:32:10 -08:00
Moh'd Khier Abualruz 2690b5559e Remove trident-hack font-size from Vector
- The Less variable @font-size-base--trident-hack is removed
-  All instances of font-size: @font-size-base--trident-hack; usage is removed from Vector 2022

Bug: T349010
Change-Id: Ie131b8f0dbb4d8050d33df969c1c49963ddc95e2
2023-10-27 14:03:14 +00:00
Volker E b55d95c70c styles: Replace legacy Vector breakpoint tokens where applicable
Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
  token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.

Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.

Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
2023-10-25 22:03:46 +00:00
Jan Drewniak 751454d7a8 [Visual change] Normalize small font sizes in Vector 2022
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.

@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).

This removal requires the following changes:

* Removing max-height & box-sizing from tabs, since
  they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
  to use `unit( 12 / @font-size-browser, rem )` instead
  of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
  it's width/height depended on
  .mixin-vector-arrowed-dropdown-toggle()

Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
  is removed from Zebra

Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.

* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px

*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.

Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
2023-10-24 22:50:15 +00:00
jenkins-bot 0c4b6d9874 Merge "Introduce CSS custom properties under font-size feature flag" 2023-10-24 19:03:16 +00:00
Jan Drewniak 2223cb8c1b Introduce CSS custom properties under font-size feature flag
Introduces CSS custom properties for the purposes
of enabling client-side customizable font sizes.

CSS custom properties are contained in a Less file,
which imports values from Codex and converted them to rems
using the Less unit() function.

Includes ADR on CSS custom properties decisions.

Bug: T348984
Change-Id: Ic5e62d55f3c3585fe3a00e41f29f88d3a2f7470b
2023-10-24 14:33:33 +00:00
Volker E eb8f186a79 styles: Remove references to WikimediaUI Base and use skin variables
Removing all references to WikimediaUI Base and replacing them with
the Codex equivalents.
Also removing variables redefinitions that are not needed anymore.
Only value difference is a last family added before general fallback
called 'Source Serif Pro', which basically will never be visible due to
the general availability of Georgia and Times.
Also removing general font stack comments, see Codex design tokens
comments for these context explanations.

Bug: T334934
Change-Id: I61aa44e40830ffdb308aaea4ca30af0f25ba2274
2023-10-22 19:18:03 -07:00
Jon Robson 004b4c96f3 Add multiple font size to frontend
Use integer value going forward as it will be easier
to manage.

Bug: T346954
Change-Id: I041a0cb21e872700ceeeddd3a39922e456aa7bb8
2023-10-17 12:43:02 +00:00
jenkins-bot 48f2a52c96 Merge "Simplify TOC design for pinned TOC on no js small viewports" 2023-10-17 04:11:30 +00:00
Jan Drewniak 8a3e24e346 Simplify TOC design for pinned TOC on no js small viewports
Bug: T340571
Change-Id: Ie34d7d478b3a73cade9f5328439515e419692eb7
2023-10-16 23:31:18 -04:00
bwang 0e37765afb Remove cached CSS from vector-sidebar-container-no-toc
Change-Id: I3a300ae217ba71c272da83c90ac5c43cc0adf4df
2023-10-12 00:05:13 +00:00
Jan Drewniak 732069f7fc Move @font-size-base into mediawiki.skin.variables.less
Bug: T348572
Change-Id: Iaaf25e7904252a9ce3fa1363c8ed4a6b1bc95bc4
2023-10-10 20:43:29 +00:00
bwang 896645be29 Remove common CSS module
Bug: T345766
Change-Id: I57e388be4b620a437274524e20653ef9ba7289ed
2023-10-05 22:35:40 +00:00
bwang 967fc5d350 Copy common styles into vector
Bug: T345766
Change-Id: Ib7a10d3351ad99c025237ab03ece84c1e2c1e257
2023-10-05 13:28:16 -05:00
bwang 5e15edb9a2 Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent
Bug: T345766
Change-Id: I2ae1d1668849a04520b73ac04fe16e1ff7f22fa6
2023-10-03 19:13:21 +00:00
bwang 11f156d5ff Add replace .vector-sidebar-container-no-toc with .vector-toc-available and .vector-toc-not-available
Bug: T318011
Change-Id: Ib07ace50e762c2e9f59e668ad6746574a60a144b
2023-09-29 16:57:42 +00:00
Jon Robson d6544e4c5c Clean up FIXMES now the cache has cleared
Follow up to Iad8523037ed364f09962b2d6ca0a3d50d7bd2266

Bug: T346401
Change-Id: Ifa4ab87e43cf28143dc7d753e264d4f0957dcbfa
2023-09-19 20:28:56 +00:00
Jon Robson 65c48d4eb2 Feature: Client preferences interface
Notes:
* This is functional but intentionally not designed until the design
has been finalized.
* A feature flag is added that swaps out the limited width toggle with
a settings cog
* The preferences module is kept in a separate ResourceLoader module
(skins.vector.clientPreferences) to make it more portable for
when we eventually want to add it to Minerva as well.
* Intentionally have not focused on non-jS version given we will
likely revise this again in a future version/upstream to core.

Bug: T345363
Change-Id: I0c793b73e0676e32f031c6168c292f63908c72e3
2023-09-15 10:03:28 -07:00
Moh'd Khier Abualruz c88d72f1d7 [anon prefs] TOC pinned / unpinned
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC

Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1

Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
2023-09-14 21:37:50 +00:00
jenkins-bot 744193d177 Merge "Remove limited width cached HTML handling" 2023-08-28 12:16:23 +00:00
Ed Sanders 1177320e3c build: Update linters
Change-Id: Idff91da3e6a490bbd31b39651f35544e9cb3fd9c
2023-08-23 18:46:49 +01:00
Jon Robson 2ea12a11ef Remove limited width cached HTML handling
Bug: T343843
Change-Id: Ib49e8325fddef90e202d4e753526af45ed7b2c26
2023-08-10 22:04:32 +00:00
Abijeet 0739360cf5 Display ULS vector-dropdown-content when on non-content pages
Functionality in I37d8e61a1287b31d1a304d2a955f532b9b8fa505
was working until  Ic83eaa34ffa74a42c7cf6df7c0857dd7a9401aba

Bug: T342845
Change-Id: Ie7f18e2228420b3269b0be969474e605d48ba682
2023-08-08 23:07:23 +00:00
Jon Robson e5bf8adad7 Limited width uses new client preferences system
* Update classes to use clientpref-1 and clientpref-0 suffix for limited width
I've limited this to the only client preference for now to reduce
risk.
* For cached HTML retain existing CSS rules, and continue saving
a cookie
* Migrate cookie if found for newly generated pages. This will be
to ensure the old cookie and new cookie are in sync (this should be
a one time operation)

Depends-On: I1e635f843ac9b2f248b1f7618134598e80291b38
Bug: T341641
Change-Id: I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
2023-08-04 21:31:21 +00:00