Commit graph

203 commits

Author SHA1 Message Date
bwang dd2284cf16 Update instances of Button.mustache to use to use VectorComponentButton
Bug: T334881
Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a
2023-05-02 18:00:41 +00:00
Brandon Fowler 3433525941 Apply margin-top to indicators
Bug: T335627
Change-Id: Ic384f9d532ed0a1165c29869e53d99cd0c7dc495
2023-05-02 15:03:42 +00:00
Jan Drewniak 91077bcd2c [Regression] Move #siteSub display rule into common.less
Moves the CSS rule that hides the #siteSub element by
default into /resources/common/typography.less in
order to prevent it from being feature flagged
(and thereby overriding the specificity of on-wiki edits)
during the Zebra update.

Bug: T335625
Change-Id: If41fadc6a369ab371f6c1e75e9cf3022a01574a0
2023-05-01 12:41:50 -04:00
Volker E 4efefdc420 styles: Remove 'mediawiki.ui/variables' call
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.

Also
- replacing deprecated keys with new Codex token equivalent keys

Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
2023-04-25 12:58:30 -07:00
Jan Drewniak da92ecf7cc [Refactor] Prepare existing styles for zebra module
This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:

    .vector-feature-zebra-design-disabled {
        @import './layouts/preZebra.less';
    }

This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands

The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.

No visual differences are expected with this change.

Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-19 18:53:11 +00:00
bwang 4698583307 Clean up leftover Sidebar CSS
- Delete unused CSS variables
- Move CSS variables to legacy
- Consolidate Sidebar.less into LegacySidebar.less

Change-Id: Idc47fda1c20fe3bbf3b9f1c1fcb889fe5b297aa4
2023-04-17 21:02:58 +00:00
Jon Robson c3e57e0ecd Merge skins.vector.es6 into skins.vector.js
With T178356 ES6 is the default, so these can now be
managed in the same module. Keeping them in the same module
will hopefully allow us to make more optimizations on the long
term.

Change-Id: I3fe9e50143b85b4cdc3d9171a60c3720a7c26b4b
2023-04-11 23:18:46 +00:00
jenkins-bot 16dc80fdd1 Merge "Remove custom checkbox-hack implementations" 2023-04-05 22:52:40 +00:00
bwang 628804871e Implement new zebra design for the header under the flag
Bug: T332449
Depends-On: Ia21c14f72631e607e0d626408557eacb83529a03
Change-Id: I9a7d6fac7c44be1983281a44766d34a16f515b40
2023-04-04 21:27:31 +00:00
Jan Drewniak 6e8a98ca8b Remove custom checkbox-hack implementations
Removes several styles that were used for
expanding/collapsing the table of contents at narrow
widths for non-js users as well as the main menu
for no-js users.

Existing `.vector-menu-checkbox` styles address this
use-case with the addition of a display:none rule for the
two affected checkboxes.

Related to the Page Tools clean-up since these styles
were once scoped to the .vector-page-tools-disabled
class.

Bug: T332090
Change-Id: I13efd4a87bacecb0e9f5a5e44d5e15861d632c62
2023-04-04 10:01:09 -04:00
jenkins-bot 6a2204682a Merge "icons: Remove unnecessary code from SVG files" 2023-04-01 12:42:23 +00:00
thiemowmde f32daab81a icons: Remove unnecessary code from SVG files
The extra complexity provided by these SVG source code constructs is
apparently not needed. They look the same as before.

Change-Id: Iff2ef6b8549d182655b6eb1f3f93d0389e1b4c6b
2023-04-01 12:23:11 +00:00
Jan Drewniak 3aaf8666cd Remove CSS selectors for Page Tools feature flag
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.

Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
2023-03-31 11:34:37 -05:00
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