Commit graph

33 commits

Author SHA1 Message Date
bwang a8013e9db4 Avoid setting large z-index on headers
Bug: T340747
Change-Id: If78b2b6f0d98dc6b83263f5d94a7527afebde91c
2023-07-06 17:19:52 +00:00
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
jenkins-bot ad5cd567bd Merge "Ensure language button works for no js users," 2023-06-22 21:42:00 +00:00
bwang edf2c78765 Ensure language button works for no js users,
* Factor out mixin for right aligning menus

VISUAL CHANGE:
Results in a slight change to the alignment of the user menu.

Bug: T339321
Change-Id: I5c3a03161b1f2372d2ca25ba47dcd40065f4f2cc
2023-06-22 21:17:46 +00:00
bwang 8cc436ac4b Replace search loader indicator with Codex pending search message
Bug: T321106
Change-Id: Ic27ecf16277725f6a08038a5501d0903a2494b5f
2023-06-20 13:32:48 -05:00
jaydenb d1c0e6cd6f Hide language alert if there are none and JS is disabled
The languages alert is misleading when there are no languages and the user has JS disabled.

This change adds a class to the alert if there are 0 languages, and then adds "display: none" to the alert if the client-nojs class is present. This is the same approach being used for the language switcher button.

Bug: T326185
Change-Id: Iee292d661ed1f47700f588053712f5f547022b17
2023-06-16 17:30:34 +00:00
jenkins-bot 84864d21de Merge "Drop styles for cached HTML" 2023-06-16 16:32:31 +00:00
Jon Robson 24d69726f3 Drop styles for cached HTML
Performance: This reclaims 1.3kb of CSS.

Bug: T336526
Change-Id: I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d
2023-06-14 10:52:44 -07:00
jenkins-bot f39a8dc0e5 Merge "styles: Replace local var with Codex design token" 2023-06-13 23:37:02 +00:00
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
Volker E 8a369066ae styles: Replace local var with Codex design token
This replaces the local variable for line-height with the design token
of same value.

Bug: T331403
Change-Id: I08a5edfc355f36a16e780912af6945b2c4f50252
2023-06-08 14:55:18 -05:00
Volker E 3afbbce707 styles: Remove local var covered by mediawiki.skin.variables.less
Available since Codex v0.11.0 in I9db6eff7.

Change-Id: I9bf6c5ad74dcf7a6aea847d5758afba1a1cfb67a
2023-05-23 17:04:28 -07:00
jenkins-bot 425a7a5024 Merge "styles: Apply Codex z-index tokens" 2023-05-22 16:46:01 +00:00
jenkins-bot 4f4b1688cb Merge "Fix CSS causing multiple TOC landmarks to be present" 2023-05-19 14:56:10 +00:00
Volker E 6865b7e7f4 styles: Apply Codex z-index tokens
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.

Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
2023-05-15 17:34:36 -07:00
Jan Drewniak 4703bdf3f0 [Zebra] Remove horizontal scrolling from ToC
Bug: T335907
Change-Id: I7ed705a36d5a5d97fdae1b7937a1522c118eb348
2023-05-09 09:37:17 -04:00
bwang 70fb73c692 Fix CSS causing multiple TOC landmarks to be present
Change-Id: Ib54fa49df5def9372a2a42b66a73a0c4936df5a2
2023-05-08 18:31:20 -05:00
Jan Drewniak 8737fdf04f Remove scrollbars from body & 100% height
Removes the permanent scrollbars from Vector 2022
as well at the 100% height on `.mw-page-container`.

The permanent scrollbars ( overflow-y:scroll) are
an artifact of legacy Vector and no longer serve
a (known) purpose.

The 100% height on `.mw-page-container` was originally
added to fix T257518, however that fix is no longer
necessary with the use of CSS Grid for layout.

Bug: T335883
Change-Id: I57bb0274a9d51269bb58ae7904c0517742716ec8
2023-05-08 14:41:48 -04:00
Jan Drewniak 1b58f87493 [Zebra] Dropdown heading styles
Improve dropdown heading styles in accordance with
new designs.

Bug: T335155
Change-Id: I3665c25bfe2aa3a14178f57714ce466fb2a0f6d6
2023-05-05 12:54:12 -04:00
Jan Drewniak 036e1295ec [Zebra] Unify ToC & menu scroll behaviour
- Refactor the TOC toggle button position
- Move the TOC/pinnable scrollable element from
  `.vector-pinnable-element` to `.vector-pinned-container`
  and `.vector-dropdown-content`.
- Applies The Fade™️, as well as a vh max-height, to both
  pinned menus and dropdowns.

Changes the way The Fade™️ is positioned by using
position:sticky so that it can be applied to
dropdowns, sidebar menus as well as all ToC permutations.

Bug: T335155
Change-Id: I655a4438d43d878a09e66b3487b8c27cece3a5d2
2023-05-04 16:19:00 -04:00
Jan Drewniak 6d33d03a5e [Zebra] Add TableOfContents.less to Zebra module
Adds the TableOfContents.less file to the Zebra module

Bug: T335155
Change-Id: Id3ea707771e75125138eb8af88a549dd111ecd63
2023-05-03 17:09:53 -04:00
jenkins-bot a0387c54f0 Merge "[Zebra] Adjust content padding" 2023-05-02 19:27:08 +00:00
Jan Drewniak 760f9e5f41 [Zebra] Adjust content padding
Introduces Codex-based spacing variables for the
padding of the content area.

Padding is adjusted by using CSS custom properties
assigned at the HTML element, then changes only
these custom properties at the new breakpoint.

Also folds in changes from 3433525 (add top-margin
to indicators) into the zebra module.

Bug: T335155
Change-Id: Ic4883b86043882bd2ef5f71b3079896caab87531
2023-05-02 14:09:30 -04:00
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
Jan Drewniak 2775ec31b1 [Regression] Prevent ToC & language button in header from wrapping
Refactors the bottom border in the zebra update
so that it doesn't require flexwrap on the
`.vector-page-titlebar` element, which can cause the
PagTitlebar layout to break when the page title is
longer than one line.

The challenge with the underline in Zebra is that we
want to use padding to create the white background on the
content elements, but we *don't* want the underline
to stretch to edge of the box (which is what bottom-border
or box-shadow would produce), instead we want the
underline to only span the width of the content.

Bug: T335633
Change-Id: Ib942ff4e7674397cd7f0e1004a9e402169fbd206
2023-05-01 18:42:13 +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
bwang da04878adb [Zebra] Remove old grid styles
Change-Id: I378dc095887288ef7f72ce6543f79cd567f98239
2023-04-28 22:06:02 +00:00
Jan Drewniak 1c04c9d227 [Zebra] Make sidebar columns equal width
Makes the columns that contain the ToC and Page Tools
menu equal width.

Moves these width declarations into the grid.less file
and converts them, as well as a few associated width
variables, to rems.

Widens the content column to maintain the same
line-length as pre-zebra, due to the extra side-padding
on the content container.

Scopes the non-zebra grid.less less file to the
zebra-disabled flag.

Bug: T335155
Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
2023-04-28 17:32:05 -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
bwang bae8b3d717 Consolidate sticky pinned element styles under .vector-sticky-pinned-container class
Bug: T335155
Change-Id: I988f3c7e70d602b4dbd5fd2cbd124b86b104caa7
2023-04-24 19:08:49 +00:00
Jan Drewniak bd05ff4ae5 Add initial Zebra design update for page layout
Implements the zebra design update via the
skins.vector.zebra.styles module.

Refactors:
- Moves common variable and mixin imports from
individual files to skin.less file.
- Applies font-sizes to menu containers instead
of individual menu links.
- Adds mixins for dropdown and content-box styles.
- Unifies padding for pinned and unpinned menu states
  (including TOC).

Bug: T332600
Change-Id: I3d49095d84fa205cb5dcc889574133f42f1fd4ea
2023-04-21 11:02:56 -05:00
Jan Drewniak 3cea6d4132 Scope styles related to zebra feature flag
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e

.vector-feature-zebra-design-enabled {
    @import "./screen.less"
}

To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.

getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.

Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 23:09:08 -04:00
Jan Drewniak 5852e320a3 Create skins.vector.zebra.styles module
Creates a new skins.vector.zebra.styles module that
will hold style modifications for the Vector Zebra update.

Affected files are copied from skins.vector.styles
without modification (at this point) to improve
revision history in git.

The new module should compile without error and existing
styles should not be affected.

Bug: T332600
Change-Id: I9b367ca0a0afea32b49915b40bc03c05910d4227
2023-04-19 15:12:53 -04:00