wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-04 20:18:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/components/PageTools.less

45 lines
1.3 KiB
Plaintext
Raw Normal View History

Replace 'more' menu with page tools pinnable dropdown Bug: T317897 Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-08 19:55:23 +00:00
// Ensure there is only 1 page tools landmark at anytime
Follow-up to 3cea6d41 “Scope styles related to zebra feature flag” In 3cea6d41, files were split between the zebra/non-zabra modules and scoped to the top-level zebra-enabled/disabled class. Since some selectors already target the html element, ampersands were added to these selectors to append the zebra-enabled/disabled class to them. This rule PageTools.less was overlooked. Change-Id: I5057a409da31ba6c4b2310048f8690154ca43e16
2023-04-24 22:57:35 +00:00
&.vector-feature-page-tools-pinned-enabled .vector-page-toolbar-container .vector-page-tools-landmark,
&.vector-feature-page-tools-pinned-disabled .vector-column-end .vector-page-tools-landmark {
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-28 15:26:22 +00:00
display: none;
Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable This patch involves cached HTML changes - Replace '-content-container' id with '-unpinned-container' - Replace '-content' id with '-pinnable-element' - Rename pinnableHeader.js to pinnableElement.js - Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close - Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close - Rename .vector-dropdown-content to .vector-pinnable-element - Add new PinnableElement.less stylesheet Bug: T318013 Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-28 21:08:40 +00:00
}
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-04 02:01:56 +00:00
.vector-column-end {
// T327460: Prevent subpixel rendering issues associated with the text and Chrome.
contain: paint;
.vector-page-tools-landmark {
position: sticky;
top: 0;
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-09 22:50:25 +00:00
margin-top: @margin-top-pinned-page-tools;
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-04 02:01:56 +00:00
}
}
[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-18 21:57:55 +00:00
#vector-page-tools-pinned-container .vector-page-tools {
width: 140px;
// Match spacing of TOC and main menu
margin-left: @padding-horizontal-dropdown-menu-item;
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
overflow-y: auto;
box-sizing: border-box;
padding-top: @padding-top-pinned-element;
// Add fade indicator.
.mixin-vector-scroll-indicator();
}
Replace 'more' menu with page tools pinnable dropdown Bug: T317897 Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-08 19:55:23 +00:00
[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-18 21:57:55 +00:00
// Ensure collapsible items are visible on lower resolutions
.vector-page-tools .vector-more-collapsible-item {
display: block;
Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable This patch involves cached HTML changes - Replace '-content-container' id with '-unpinned-container' - Replace '-content' id with '-pinnable-element' - Rename pinnableHeader.js to pinnableElement.js - Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close - Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close - Rename .vector-dropdown-content to .vector-pinnable-element - Add new PinnableElement.less stylesheet Bug: T318013 Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-28 21:08:40 +00:00
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-19 07:10:22 +00:00
@media ( min-width: @min-width-breakpoint-tablet ) {
[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-18 21:57:55 +00:00
display: none;
Replace 'more' menu with page tools pinnable dropdown Bug: T317897 Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-08 19:55:23 +00:00
}
[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-18 21:57:55 +00:00
}
Replace 'more' menu with page tools pinnable dropdown Bug: T317897 Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-08 19:55:23 +00:00
[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-18 21:57:55 +00:00
// Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present)
.vector-page-tools .vector-has-collapsible-items {
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-19 07:10:22 +00:00
@media ( max-width: @max-width-breakpoint-mobile ) {
[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-18 21:57:55 +00:00
display: block;
Replace 'more' menu with page tools pinnable dropdown Bug: T317897 Change-Id: Ia94ebc32041bb3c2f86d461b310766b2d14c66a2
2022-11-08 19:55:23 +00:00
}
}
Reference in a new issue Copy permalink