From d309544c806a9c0bac5fdc844cbe86f054db0680 Mon Sep 17 00:00:00 2001 From: bwang Date: Tue, 10 Jan 2023 11:28:17 -0600 Subject: [PATCH] Add default width and max width to dropdowns in modern Vector, preserve existing styles for legacy Vector Bug: T324877 Change-Id: I2dc109e7601fa3a15b5710f0c1676066368a6e6e --- .../common/components/MenuDropdownCheckbox.less | 5 ----- .../components/MenuDropdown.less | 5 +++++ .../skins.vector.styles/components/Dropdown.less | 12 +++++++++++- .../skins.vector.styles/components/MainMenu.less | 3 --- .../skins.vector.styles/components/MenuTabs.less | 7 ++++++- .../components/TableOfContentsUnpinned.less | 9 +++++++++ .../skins.vector.styles/components/UserLinks.less | 7 ++++--- 7 files changed, 35 insertions(+), 13 deletions(-) diff --git a/resources/common/components/MenuDropdownCheckbox.less b/resources/common/components/MenuDropdownCheckbox.less index 2742e68b3..d1e9e71cf 100644 --- a/resources/common/components/MenuDropdownCheckbox.less +++ b/resources/common/components/MenuDropdownCheckbox.less @@ -20,8 +20,6 @@ height: 0; visibility: hidden; overflow: hidden; - // The menu content should not be narrower than the menu button. - min-width: 100%; margin: 0; padding: 0; z-index: @z-index-menu; @@ -38,9 +36,6 @@ margin: 0; a { - // displays all links in a single column. - display: block; - white-space: nowrap; cursor: pointer; } } diff --git a/resources/skins.vector.styles.legacy/components/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less index 1edd879ef..f108d8d09 100644 --- a/resources/skins.vector.styles.legacy/components/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -56,6 +56,8 @@ box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); transition-property: opacity; transition-duration: @transition-duration-base; + // The menu content should not be narrower than the menu button. + min-width: 100%; } // Open the dropdown container via hover. @@ -74,6 +76,9 @@ } a { + // displays all links in a single column. + display: block; + white-space: nowrap; padding: 0.625em; color: @color-link; } diff --git a/resources/skins.vector.styles/components/Dropdown.less b/resources/skins.vector.styles/components/Dropdown.less index a2fdb5ab5..e84d32ed9 100644 --- a/resources/skins.vector.styles/components/Dropdown.less +++ b/resources/skins.vector.styles/components/Dropdown.less @@ -26,6 +26,17 @@ box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); transition-property: opacity; transition-duration: @transition-duration-base; + + .vector-feature-page-tools-disabled & { + // The menu content should not be narrower than the menu button. + min-width: 100%; + } + + .vector-feature-page-tools-enabled & { + // TODO Add consistent min/max values for dropdowns in T316055 + width: max-content; + max-width: 200px; + } } } @@ -35,7 +46,6 @@ .vector-dropdown .mw-list-item { a { .mixin-vector-dropdown-menu-item(); - white-space: nowrap; color: @color-link; .vector-feature-page-tools-disabled & { diff --git a/resources/skins.vector.styles/components/MainMenu.less b/resources/skins.vector.styles/components/MainMenu.less index 4ef441cd3..138af8d3c 100644 --- a/resources/skins.vector.styles/components/MainMenu.less +++ b/resources/skins.vector.styles/components/MainMenu.less @@ -60,9 +60,6 @@ // Main menu when unpinned in the dropdown #vector-main-menu-unpinned-container .vector-main-menu { - // TODO: Standardize dropdown min and max width - width: 250px; - .vector-language-sidebar-alert { margin-bottom: 6px; } diff --git a/resources/skins.vector.styles/components/MenuTabs.less b/resources/skins.vector.styles/components/MenuTabs.less index d592c589a..6e4601936 100644 --- a/resources/skins.vector.styles/components/MenuTabs.less +++ b/resources/skins.vector.styles/components/MenuTabs.less @@ -52,10 +52,15 @@ margin: 0 @padding-horizontal-tabs; } +.vector-menu-tabs .mw-list-item, +.vector-page-toolbar-container .vector-menu-dropdown > .vector-menu-heading { + // Only apply no wrap + white-space: nowrap; +} + .vector-menu-tabs .mw-list-item, .vector-page-toolbar-container .vector-menu-dropdown { float: left; - white-space: nowrap; margin-bottom: 0; /* overrides default `li` styling */ // target links inside of .vector-tab-menu diff --git a/resources/skins.vector.styles/components/TableOfContentsUnpinned.less b/resources/skins.vector.styles/components/TableOfContentsUnpinned.less index b476a3fc8..408e0e0d8 100644 --- a/resources/skins.vector.styles/components/TableOfContentsUnpinned.less +++ b/resources/skins.vector.styles/components/TableOfContentsUnpinned.less @@ -27,6 +27,11 @@ .mixin-toc-unpinned() { display: block; + > .vector-menu-content { + // Override default dropdown max width + max-width: none; + } + // Shared unpinned TOC styles, applies across all unpinned cases (page titlebar, sticky header, floating) // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days .sidebar-toc, @@ -142,6 +147,10 @@ z-index: @z-index-menu; } + .vector-feature-page-tools-enabled .vector-toc { + padding-left: @padding-horizontal-dropdown-menu-item; + } + // FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days @{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc, @{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc { diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index 4c9769fab..9b03481e7 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -39,8 +39,10 @@ .vector-menu-content { left: auto; right: 0; - // TODO: Standardize dropdown min and max width - min-width: 200px; + + .vector-feature-page-tools-disabled & { + min-width: 200px; + } } .user-links-collapsible-item { @@ -60,7 +62,6 @@ .vector-feature-page-tools-disabled & { .mixin-vector-dropdown-menu-item-deprecated(); } - white-space: nowrap; color: @color-link; } }