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/MainMenu.less

70 lines
2 KiB
Plaintext
Raw Normal View History

Reorganize LESS files to match ResourceLoader conventions Separating most LESS files into 2 ResourceLoader modules and a common folder: - skins.vector.styles - skins.vector.styles.legacy - common This changes aims to clearly separate the old (“legacy”), the new (“modern”) and the common styles which were previously all placed under `skins.vector.styles/`. Inside each directory are separate folders for `layouts` and `components`. The entry files, `skin.less` and `skin-legacy.less` are moved into the specific folders and a third, `common.less` entry file is created that contains the common imports for both old and new Vector. Aliases have been added to the Storybook Webpack config to avoid adding the story file changes to this patch. Images coming from CSS `url()`'s have also been temporarily disabled in Storybook until Storybook can be upgraded to use Webpack 5, and use array values for aliases, in a follow-up patch. This patch also slightly changes a footer layout specific rule so that existing `padding` remains unchanged in rendering due to new common and component structure. Bug: T264309 Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
2021-02-02 10:04:37 +00:00
@import '../../common/variables.less';
Technical: Generalize icon flushing This code is not resilient to changes in the mw-ui-icon definition In preparation for changing touch areas we need an easy way to flush these correctly based on feature flag. No expected visual changes. Bug: T314323 Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
2022-09-29 22:54:55 +00:00
@import '../../common/mixins.less';
[feature] add menu button to toggle panel visibility Add a menu button that toggles the panel's (also referred to as a sidebar) collapse state. When the screen is wide enough, animate the transition. The menu icon from OOUI is copied into Vector to avoid two ResourceLoaders modules (collapseHorizontal icon isn't ready for inclusion in the OOUI icon pack and ResourceLoaderOOUIIconPackModule doesn't support images). Additional polish and collaboration is needed but this patch fulfills the scope of its referenced task. Bug: T246419 Depends-On: I8e153c0ab927f9d880a68fb9efb0bf37b91d26b2 Change-Id: Ic9d54de7e19ef8d5dfd703d95a45b78c0aaf791a
2020-03-30 20:07:35 +00:00
@import 'mediawiki.mixins.less';
Merge EmphasizedSidebarAction.less into Sidebar.less The opt in link is part of the sidebar in the current modern version of vector. The legacy sidebar has been split out and frozen. For this reason I think it makes sense to move the styles for the button into the sidebar stylesheet. The class name is renamed to reflect the hierarchy. We are not using BEM but we are using hyphens to describe location so the newly proposed names `mw-sidebar` and `mw-sidebar-action` seem more applicable than the previous generic class names. This doesn't impact caching given anonymous users cannot see the opt in/out link. Change-Id: I2991e941592a0678f40c73bb6daeab71ada6b7c3
2020-05-26 17:38:24 +00:00
Use features.js for main menu pinning functionality - Register new feature for main menu pinned - Update UserPreferenceRequirement to optionally handle default config values - Add nav landmarks for the main menu Bug: T317900 Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
2022-12-15 22:52:24 +00:00
// Ensure there is only 1 main menu landmark at anytime
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 20:57:36 +00:00
&.vector-feature-main-menu-pinned-enabled .vector-header-start .vector-main-menu-landmark,
&.vector-feature-main-menu-pinned-disabled .vector-main-menu-container .vector-main-menu-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;
Use features.js for main menu pinning functionality - Register new feature for main menu pinned - Update UserPreferenceRequirement to optionally handle default config values - Add nav landmarks for the main menu Bug: T317900 Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
2022-12-15 22:52:24 +00:00
}
Update main menu templates and classes to be consistent with other pinnable elements - Rename data-portlets-main-menu to data-main-menu - Rename MainMenuContents.mustache to MainMenu - Replace usage of .vector-main-menu-contents in favor of .vector-main-menu - Add classes to PinnableContainer - Use PinnableContainer and PinnableElement in main menu - Remove MainMenuDropdown.less Bug: T317900 Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-14 20:57:25 +00:00
.vector-main-menu {
box-sizing: border-box;
Layout: Fixes table of contents alignment issues This patch also adds some grid variables to be reused Bug: T311793 Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
2022-06-30 22:37:08 +00:00
Follow up: Remove .vector-layout-grid, .mw-workspace-container classes Bug: T313559 Change-Id: If93860d13fb3161c0b66f7ea9e3e1831b0a2fc1e
2022-08-04 20:05:36 +00:00
// Hide #p-navigation label
#p-navigation .vector-menu-heading {
display: none;
Layout: Fixes table of contents alignment issues This patch also adds some grid variables to be reused Bug: T311793 Change-Id: Ib985e929b5ff013dfe9dcff1d0f33cebc24bbed6
2022-06-30 22:37:08 +00:00
}
Remove tablet specific styles for collapsed TOC, and misc CSS clean up This patch also fixes a regression for non grid layout Vector on tablet viewports when the sidebar and collapsed TOC is open https://jmp.sh/xZhkU6q No pixel regressions Change-Id: Ic371f9b7ddd017af835565834e26a65ad3c2afc8
2022-06-29 19:28:06 +00:00
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-06 17:07:29 +00:00
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
.mixin-vector-dropdown-menu-item();
}
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
2022-12-19 16:27:54 +00:00
.vector-main-menu-action-opt-out a {
font-weight: bold;
}
Clean up cached HTML code Follow-up: I59b3acd3d56cd5761e5978607634dfb9a88f60e3 Bug: T317900 Change-Id: Idfbd77c6b84c0c8541a81effc272f4f36f17b823
2022-12-14 22:26:48 +00:00
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-06 17:07:29 +00:00
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-top: 0;
}
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-05-19 16:45:26 +00:00
// Hide the sidebar alert if there are no languages and JavaScript is disabled (T326185)
.vector-main-menu-action-lang-alert.vector-main-menu-action-lang-alert-empty {
.client-nojs& {
display: none;
}
}
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
2022-12-19 16:27:54 +00:00
.vector-language-sidebar-alert {
// Override default .mw-message-box styles
padding: 8px;
margin: 0;
Add generic classes to pinnable container Bug: T324877 Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-19 17:40:17 +00:00
}
}
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
2022-12-19 16:27:54 +00:00
// Main menu when pinned in the sidebar
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
#vector-main-menu-pinned-container .vector-main-menu {
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-09 18:20:21 +00:00
// Align the left edge of the text with the page container
margin-left: -@padding-horizontal-dropdown-menu-item;
Misc page tools visual fixes - Fixes extra spacing introduced in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/877239 - Addresses last of design adjustments in https://phabricator.wikimedia.org/T324877#8519138 Bug: T324877 Change-Id: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
2023-01-12 17:35:01 +00:00
// Align border under pinnable header with border under page title
margin-top: 11px;
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
2022-12-19 16:27:54 +00:00
padding: @padding-vertical-dropdown-menu-item @padding-horizontal-dropdown-menu-item;
background-color: @background-color-secondary--modern;
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-06 17:07:29 +00:00
// Match styles of .mw-list-item a in PinnableElement.less
.vector-main-menu-action-opt-out a,
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
padding-left: 0;
padding-right: 0;
}
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
2022-12-19 16:27:54 +00:00
}
Add generic classes to pinnable container Bug: T324877 Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-19 17:40:17 +00:00
// Main menu when unpinned in the dropdown
#vector-main-menu-unpinned-container .vector-main-menu {
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
2022-12-19 16:27:54 +00:00
.vector-language-sidebar-alert {
margin-bottom: 6px;
Update main menu templates and classes to be consistent with other pinnable elements - Rename data-portlets-main-menu to data-main-menu - Rename MainMenuContents.mustache to MainMenu - Replace usage of .vector-main-menu-contents in favor of .vector-main-menu - Add classes to PinnableContainer - Use PinnableContainer and PinnableElement in main menu - Remove MainMenuDropdown.less Bug: T317900 Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-14 20:57:25 +00:00
}
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
2022-12-19 16:27:54 +00:00
}
Reference in a new issue Copy permalink