Commit graph

190 commits

Author SHA1 Message Date
jenkins-bot ff7735edde Merge "styles: Increase line-heading-heading slightly to follow Codex" 2023-03-29 00:38:08 +00:00
Volker E ee03c15c4a styles: Increase line-heading-heading slightly to follow Codex
[EXPECTED VISUAL CHANGE]
Following Codex typography definitions. This minor change results in a
2px higher heading.

Bug: T332171
Change-Id: I5ac39492d8efc5c24e4340983e2b6973b7252c8f
2023-03-28 20:52:21 +00:00
Umherirrender f3dfc9df1e build: Updating npm dependencies
* stylelint-config-wikimedia: 0.13.0 → 0.14.0

Run stylelint fix to fix the new stylelint rule

Change-Id: I3f9e528ca9f8292a9e3630356f0e8bf5df5f6609
2023-03-28 22:22:36 +02:00
Volker E 6fa5e1758c build: Update SVGO to v3.0.2 & re-crush icons
svgo         ^2.8.0  →   ^3.0.2

Amending to new `cleanupIds` plugin name.
Re-crushing SVGs while at it.

Bug: T333158
Change-Id: I29e74ec1240142af3440004b68ac985558836410
2023-03-27 06:10:37 -07:00
jenkins-bot 66c547d452 Merge "styles: Remove obsolete @z-index-sidebar-button variable" 2023-03-17 20:36:47 +00:00
sushrith bbdc66fcd3 Reduce height of the article toolbar
[Visual change]
Height of the article toolbar is reduced, this is done by reducing the
padding on the top of the tabs and reducing the margin on the
top of the Watchstar and Wikilove icons.

Bug: T316950
Change-Id: Ic2a3146eab901c834712d23f80277e313c42d907
2023-03-14 19:01:16 +00:00
Volker E ca9ab0c0b7 styles: Don't include the "jump to" links when copy-pasting article text
They are included in the DOM for screen readers but there's a good
chance the user copy-pasting text from an article does _not_ wish to
copy-paste these visually-hidden-for-most-users accessibility
helper links.

Bug: T295647
Change-Id: I13f4cbb88930becf38bc0f10d4288c8c9c496522
2023-03-14 05:24:19 -07:00
Volker E e74e9396e7 styles: Remove obsolete @z-index-sidebar-button variable
Change-Id: I6bd9f4c9b24df2f73fde9951bac0fd21b88656d3
2023-03-14 04:02:50 -07:00
jenkins-bot 80c75fdafe Merge "Break words for long links" 2023-03-08 10:11:17 +00:00
Jon Robson abb2cc5a48 Break words for long links
Follow the solution we have on Minerva (mobile site)
and break long links in page.

Additional change:
Mostly whitespace updates. Use git diff -w to see.

Bug: T327334
Change-Id: I8d7e6a31b3a76375245da312e99f637766ffff8c
2023-03-08 01:37:03 +00:00
jenkins-bot 0e01a9cad0 Merge "styles: Update opacity values to align with Codex design system" 2023-03-08 00:26:32 +00:00
Volker E fdeb3187d9 styles: Update opacity values to align with Codex design system
Also replacing `opacity-base--disabled` with updated token key
`opacity-icon-base--disabled`.

Depends-On: I68a39002314b9c5a185ffa2856076922bfeab638
Change-Id: I0e28579c92df9880b98cfeb4d4b5c3b8b085965e
2023-03-07 13:42:46 -08:00
bwang c9389b7dab Update scroll threshold to be the same as scroll padding top
Bug: T317661
Bug: T314419
Change-Id: Ia2d14dca1e3e2069828b201d6d3a053e4df712fc
2023-03-07 18:28:23 +00:00
Jan Drewniak 7e6606b5ef Increase @scroll-padding-top to 75px
Increasing scroll-padding-top on HTML element
to account for TOC button placement on mobile
resolutions.

Bug: T314419
Change-Id: I5c3efa0f20f052ec74e91a6287f561c9e0105f90
2023-03-06 18:28:55 +00:00
Jan Drewniak cfc454f615 Increase scroll-padding-top for page sections
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.

This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.

This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.

Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
2023-02-28 14:48:31 -05:00
Derk-Jan Hartman e7a8d0f469 Vector: Break long bare external links
Break bare external links, which potentially would cause the
viewport or width restricted content to overflow.

Bug: T327334
Change-Id: Ia83e2cde7646670de0a1b09ba9457e1cfc47ce0f
2023-02-27 23:06:53 +00:00
jenkins-bot af2c9c61c6 Merge "Revert "Only apply vertical margin to #siteNotice content when non-empty"" 2023-02-23 19:57:05 +00:00
Bernard Wang 41bd9569cf Revert "Only apply vertical margin to #siteNotice content when non-empty"
This reverts commit ff8a5bc034.

Reason for revert: T325219 is expected

Change-Id: Id153bcd5d365263dfa84e7c2e45d69d1c72fabdd
2023-02-23 19:32:54 +00:00
jenkins-bot 4c8f7a5652 Merge "Revert "Updates for core temp user autocreation feature"" 2023-02-22 22:41:02 +00:00
jenkins-bot 4cba003a6d Merge "Only apply vertical margin to #siteNotice content when non-empty" 2023-02-22 22:13:00 +00:00
Ed Sanders ff8a5bc034 Only apply vertical margin to #siteNotice content when non-empty
Bug: T325219
Change-Id: I7fd7600172e72707d1d8065ed2be235841a401be
2023-02-22 20:42:02 +00:00
Jon Robson f2fb827630 Revert "Updates for core temp user autocreation feature"
This reverts commit 8d0659b1e6.
The logic for temporary users is now centralized inside
MediaWiki core, so Vector has no need to check whether a user
is temporary and instead work with the data it's given.

Depends-On: I36815aaef81ec7368e240a780e90bd574785df74
Bug: T328725
Change-Id: Ie30dd6a77ef391f74a435e0b9df74793ffdf73bb
2023-02-21 11:30:27 -06:00
Nicholas Ray 0440eeada4 Make space between top of TOC/Page tools and top of viewport/bottom of sticky header 30px
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.

* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools

* Consolidates some styles in TableOfContentsPinned.less

VISUAL CHANGE: table of contents moves down page.

Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
2023-02-10 19:43:05 +00:00
Nicholas Ray 0243a0125b Moving padding-bottom to mixin-vector-scroll-indicator
Follow-up to 886437, which suggested moving the bottom padding of the scroll
indicator's parent to the `mixin-vector-scroll-indicator-mixin`. This makes
sense because if the correct amount of bottom padding isn't applied, the scroll
indicator could overlap the text when scrolled all the way to the bottom.

Bug: T318169
Change-Id: I94f98ae75f9b80484114a2413caf2cb0c237e8ba
2023-02-07 16:33:44 -07:00
Nicholas Ray ffda1975e3 Make page tools sticky
* Adds sticky behavior to pinned page tools

* Moves scroll indicator styles into a mixin shared by TOC and page tools

* Replaces the 10px magic number in the TOC used to calculate the bottom padding with the
@padding-vertical-dropdown-menu variable.

* Increases the pinned TOC max-height per T319315

* Corrects spacing between bottom of sticky header and top of TOC after discussion with designer

* Causes 43 visual changes in Pixel that include intentional changes and subpixel
rendering changes associated with the `contain: paint` rule.

Bug: T318169
Bug: T319315
Change-Id: Ica0c4e0de1825d37d8136b589a9bf5decc96855e
2023-02-07 12:49:48 -07:00
Nicholas Ray 112cd9a085 Convert @width-column-start-desktop and @width-column-start-desktop-wide to relative units
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.

[1] https://phabricator.wikimedia.org/F36201423

Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
2023-01-13 12:20:49 -07:00
bwang d309544c80 Add default width and max width to dropdowns in modern Vector, preserve existing styles for legacy Vector
Bug: T324877
Change-Id: I2dc109e7601fa3a15b5710f0c1676066368a6e6e
2023-01-12 11:45:13 -06:00
bwang 4efafaf374 Fix TOC scrollable indicator
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb

- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width

Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
2023-01-10 17:21:26 -06:00
bwang 22c0e38997 Fix alignment/spacing of grid column items
-Addresses this feedback: https://phabricator.wikimedia.org/T324877#8505388

Bug: T319348
Bug: T324877
Change-Id: Ic371716f016309fb105c30b8e02e106c1de8310d
2023-01-10 11:36:53 -06:00
bwang c298d5d1ea Page tools styling followup
- Address feedback in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/870996/10/resources/skins.vector.styles/components/TableOfContentsPinned.less#28
- Avoid handling MainMenuAction styles in PinnableElement.less, move to MainMenu.less
- Reduce top spacing of the language alert
- Allow labels in menus to wrap
- Update TOC line height to match prototype

Bug: T324877
Change-Id: Ic5dc456d6e6126d3ff6cee854e6023cf5cf2595d
2023-01-09 17:07:13 -06:00
bwang 9db08ef300 Update TOC spacing to match spec
Bug: T324877
Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
2023-01-05 12:41:25 -06:00
bwang 8e4da83908 Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term

Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2023-01-04 17:48:03 -06:00
bwang af21dec1c1 Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization
Bug: T324877
Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2023-01-04 11:24:57 -05:00
bwang fe105edcdb Update dropdown and pinnable element styles to match spec
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools

Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
2023-01-04 11:24:55 -05:00
Andre Klapper 62a1406739 Make h2 use explicit font for ckb on Linux to avoid broken ligatures
Bug: T306317
Change-Id: I3104533544de78bdf0610b738337b9220261223e
2022-12-10 13:25:25 +01:00
jenkins-bot 9be75feb0d Merge "Prepare styles for Page Tools menu" 2022-11-22 18:26:09 +00:00
Jan Drewniak 69f3dcd7a7 Prepare styles for Page Tools menu
Makes the dropdown styles compatible with the pinned state of the
menu so that both states can share the same styles.

- New vector-menu-heading mixin shared between main menu headings
  and dropdown headings.
- New @font-size-dropdown variable so font-size is consistent in
  dropdown and pinned state.
- Ensure hidden 'more' menu works in both pinned and dropdown state.
- Removes extra <ul><li> from PinnableDropdownContents.mustache, as the
  child Menu template already contain <ul><li> elements.

Bug: T318434
Change-Id: Ie1a56d8584c1dc3f20c6643ff4cfc740be4007fa
2022-11-22 12:57:29 -05:00
Jon Robson 7c24aa46fb Drop the VisualEnhancementsNext feature flag
Bug: T320101
Change-Id: I6d536af034dafd66c6478183de8029be9ed3e8b7
2022-11-21 13:27:34 -08:00
bwang ddf8706ae4 Fix main menu button spacing when the VisualEnhancementNext flag is enabled
This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border

Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
2022-11-14 22:32:51 +00:00
jenkins-bot f5992cf7ee Merge "[Technical] Remove common Menu styles" 2022-11-11 18:36:42 +00:00
Jon Robson c56505de85 Dropdown arrow pixel should only apply to modern Vector
This is leaking into legacy Vector as well.

Bug: T322673
Change-Id: Iec9714395539ae7739b4136c87b481a691e2a516
2022-11-10 01:38:30 +00:00
Jon Robson d708478752 [Technical] Remove common Menu styles
There are no longer any common menu styles. These are moved to the legacy
skin and new rules are added to the dedicated components.

Change-Id: I1bf26bfb29bb495ee65e983fad60122007f62698
2022-11-08 14:31:14 -06:00
Jon Robson bc56ba86df Allow dropdowns to contain .vector-menu-content elements
Currently you cannot have menus inside dropdowns. To support this
we should limit the selector to direct children nodes.

This will allow us to put the main menu into the main menu icon
dropdown.

Change-Id: Ibf304843a62d5269992a01eb826edf71ce8d3c35
2022-11-07 15:44:13 -08:00
bwang 2ac38f2f9a Add generic PinnableHeader template, CSS & JS
Bug: T317897
Change-Id: Iedc5e6f64e72a4d7762cb4f2fa834980d6757793
2022-11-01 11:12:15 -05:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
Jan Drewniak d2618e9428 Split MenuPortal.less into legacy and modern Vector
Removes the common MenuPortal.lesss code and splits it into
Vector 2022 and Vector legacy in anticipation of changes to
the sidebar in Vector 2022.

Bug: T317583
Bug: T319348
Change-Id: I57d3dc3458a7d6a4877170c26c88ca9222e00ff7
2022-10-07 17:40:49 +00:00
jenkins-bot 21a63b7c42 Merge "Restrict margin between arrow and icon to feature flag" 2022-10-05 21:11:50 +00:00
Jon Robson e62062631d Restrict margin between arrow and icon to feature flag
Follow up to 1bb0a0e8f

Bug: T319070
Change-Id: I850088abdf815c0c65a05aa2a7dfd9445aa688f6
2022-10-05 19:18:55 +00:00
jenkins-bot ca3fe05c5e Merge "Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles" 2022-10-05 17:06:12 +00:00
bwang 7c172531c2 Move horizontal padding from .mw-body to .mw-page-container, improve .mw-page-container styles
Visual changes:
- Footer text and border is aligned with header icons
- Main page content has no padding, slightly wider on certain pages/viewports

Bug: T317573
Change-Id: Id0c4343b8bc4c16006c0b9abd914213ca2f307ca
2022-10-05 10:30:12 -05:00