diff --git a/resources/common/components/SearchBox.less b/resources/common/components/SearchBox.less
index d57f5b1..7047cb7 100644
--- a/resources/common/components/SearchBox.less
+++ b/resources/common/components/SearchBox.less
@@ -94,3 +94,21 @@
background: no-repeat center/unit( 16 / @font-size-browser / @font-size-search-input, em ) url( images/search.svg );
opacity: 0.67;
}
+
+.search-toggle {
+ // At lower resolutions the search input is hidden and a toggle is shown
+ display: block;
+ float: right;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: none;
+ }
+}
+
+.vector-search-box-collapses > div {
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: block;
+ }
+}
diff --git a/resources/common/components/UserLinks.less b/resources/common/components/UserLinks.less
index 54c9469..eb58433 100644
--- a/resources/common/components/UserLinks.less
+++ b/resources/common/components/UserLinks.less
@@ -14,7 +14,7 @@
/* Icon for registered user names & anonymous message */
#pt-anonuserpage,
-#pt-userpage a,
+.vector-user-menu-legacy #pt-userpage a,
#p-personal-label {
background-image: url( images/user-avatar.svg );
background-repeat: no-repeat;
diff --git a/resources/skins.vector.styles/components/Logo.less b/resources/skins.vector.styles/components/Logo.less
index ed0e1f4..44c4c8d 100644
--- a/resources/skins.vector.styles/components/Logo.less
+++ b/resources/skins.vector.styles/components/Logo.less
@@ -15,6 +15,12 @@
// This will be ignored in flexbox browsers.
float: left;
margin-right: 10px;
+ // Hide mobile icon at lower resolutions and defer to wordmark
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: block;
+ }
}
.mw-logo-container {
@@ -22,6 +28,24 @@
// This will be ignored in flexbox browsers.
// The two children `div`s will lay out in a row.
float: left;
+ // At mobile resolutions restrict logo to 120px to optimize for a 340px display (@min-width-supported)
+ // (based on https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)
+ // This accounts for up to 5 icons
+ // (Echo notifications x 2, search, hamburger and personal menu)
+ // where the icons have 44px each (44x5 = 220px)
+ max-width: 120px;
+
+ img {
+ width: 100%;
+ }
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ max-width: none;
+
+ img {
+ width: auto;
+ }
+ }
}
// Note for 3rd parties where no wgLogos['wordmark'] is defined
diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index 8d39ca5..33e09ba 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -5,6 +5,8 @@
align-items: center;
height: 30px;
position: relative;
+ justify-content: flex-end;
+ flex-shrink: 1;
// Overrides personal menu styles for consolidated user links.
.vector-user-menu {
@@ -57,6 +59,12 @@
display: block;
color: #000;
text-decoration: none;
+
+ &.user-links-collapsible-item {
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: none;
+ }
+ }
}
}
@@ -93,11 +101,18 @@
.mw-portlet-notifications {
li {
float: left;
- margin-left: 0.75em;
+ margin-left: 0;
}
}
.mw-portlet-user-page {
+ // For logged-in users, below tablet threshold, the menu will collapse the user name/link to user page into the user menu
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: block;
+ }
+
li {
margin-left: 1em;
padding-bottom: 0.5em;
@@ -112,6 +127,12 @@
.vector-user-links-createaccount {
margin-left: 0.75em;
+ // For logged-out users, below tablet threshold, the menu will collapse the create account link into the user menu
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: block;
+ }
}
// Adjust the user-interface-preferences menu.
@@ -119,6 +140,14 @@
margin-top: -0.2em;
margin-right: 0;
padding: 0;
+ // The menu is collapsed into the p-personal menu at lower resolutions, because the features
+ // are accessible via Special:Preferences with a few more clicks and there is not space to
+ // accomodate this icon at this resolution.
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: block;
+ }
// Hide the heading of the user-interface-preferences menu.
h3 {
diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
index 90ae60b..1435feb 100644
--- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
@@ -92,7 +92,9 @@
.transition( none );
}
- .p-search--show-thumbnail {
+ // FIXME: .p-search--show-thumbnail selector is for cached HTML relating to T276566.
+ .p-search--show-thumbnail,
+ .vector-search-box-show-thumbnail {
// Recreate WVUI expanding input.
#searchInput:focus {
position: relative;
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index 9ab0032..073f82b 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -103,6 +103,7 @@
unit( 500px / @font-size-browser, em ) -
( 2 * @padding-horizontal-page-container );
// 31.25em - 3.75em = 27.5em @ 16
+@min-width-supported-consolidated-links: unit( 340px / @font-size-browser, em );
// Width used to determine when to break the personal tools onto a separate line
// below the search box.
@@ -159,20 +160,30 @@ body {
// allow z-index to apply so search results overlay article
position: relative;
z-index: @z-index-header;
+
+ .skin-vector-consolidated-user-links & {
+ flex-wrap: nowrap;
+ }
}
/* Searchbox */
#p-search {
float: left;
margin: 0 0 0 @margin-horizontal-search;
- flex-grow: 1;
z-index: @z-index-menu;
- flex-basis: @min-width-search;
+ flex-grow: 1;
+
+ .skin-vector-consolidated-user-links & {
+ margin: 0;
+ }
// #searchform is only a direct child of #p-search before wvui-loads. After
// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
// element where these styles should apply.
+ // FIXME: The first selector (> #searchform)
+ // is for cached HTML. Should be removed when T276566 has been in production.
> #searchform,
+ > div > #searchform,
.wvui-typeahead-search {
// Border-box sizing is used for a smooth transition from legacy to Vue
// search. The width of the container should stay the same before/after the
@@ -296,10 +307,6 @@ body {
// Container logic.
.mw-page-container {
- // Set a min-width to make explicit we do not support anything below this threshold.
- // For devices too small, they should be more useable with horizontal scrolling.
- // e.g. Portrait on an iPad
- min-width: @min-width-supported;
max-width: @max-width-page-container;
// Fill the viewport even if the content height is small. This also helps
// mitigate a long sidebar overflowing the page container (T257518).
@@ -310,6 +317,15 @@ body {
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
padding: 0.05px ( @padding-horizontal-page-container / 2 );
background-color: @background-color-page-container;
+ // Set a min-width to make explicit we do not support anything below this threshold.
+ // For devices too small, they should be more useable with horizontal scrolling.
+ // e.g. Portrait on an iPad
+ min-width: @min-width-supported;
+
+ // When consolidated user links is enabled, there is more space for compression.
+ .skin-vector-consolidated-user-links & {
+ min-width: @min-width-supported-consolidated-links;
+ }
}
.skin--responsive .mw-page-container {
@@ -389,14 +405,6 @@ body {
}
@media ( max-width: @max-width-margin-start-content ) {
- #p-search {
- // Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
- width: 13.2em;
- // Support: Modern browsers, responsive width.
- width: 20vw;
- max-width: 100%;
- }
-
// Adjusts the content and mw-article-toolbar-container.
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
@@ -421,18 +429,34 @@ body {
// We use @width-comfortable to determine this threshold as we know it's not possible for
// personal tools to be on the same line at this resolution.
@media ( max-width: @width-comfortable ) {
- // #searchform is only a direct child of #p-search before wvui-loads. After
+ // #searchform is only a direct child of #p-search > div before wvui-loads. After
// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
// element where these styles should apply.
+ /// FIXME: The first selector (#p-search > #searchform) is for cached HTML.
+ // Should be removed when T276566 has been in production for a week.
#p-search > #searchform,
+ #p-search > div > #searchform,
#p-search .wvui-typeahead-search {
margin-left: auto;
}
}
@media ( min-width: @width-breakpoint-tablet ) {
- #p-search {
+ .mw-header {
+ flex-wrap: wrap;
+ }
+
+ #p-search,
+ .skin-vector-consolidated-user-links #p-search {
+ margin: 0 0 0 @margin-horizontal-search;
+ // Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
+ width: 13.2em;
+ // Support: Modern browsers, responsive width.
+ width: 20vw;
+ max-width: 100%;
min-width: @min-width-search-tablet;
+ flex-basis: @min-width-search;
+ flex-grow: 1;
}
.mw-page-container {
diff --git a/skin.json b/skin.json
index 80ba08d..d3ce297 100644
--- a/skin.json
+++ b/skin.json
@@ -44,6 +44,7 @@
"vector-jumptonavigation",
"vector-jumptosearch",
"vector-jumptocontent",
+ "search",
"sitesubtitle",
"sitetitle",
"tagline"
@@ -146,8 +147,10 @@
"variants": [],
"icons": [
"language",
+ "userAvatar",
"userTalk",
"markup",
+ "search",
"settings",
"labFlask",
"unStar",
@@ -194,6 +197,7 @@
},
"ResourceModuleSkinStyles": {
"vector": {
+ "+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less",
"jquery.tipsy": "skinStyles/jquery.tipsy.less",
"jquery.ui": [
diff --git a/skinStyles/ext.echo.styles.alert.less b/skinStyles/ext.echo.styles.alert.less
new file mode 100644
index 0000000..28406fd
--- /dev/null
+++ b/skinStyles/ext.echo.styles.alert.less
@@ -0,0 +1,16 @@
+@import 'mediawiki.ui/variables.less';
+
+// The "you have new messages" bar should be hidden at lower resolutions (temporary solution until T284243)
+.vector-user-links {
+ #ca-talk-alert {
+ display: none;
+
+ @media ( min-width: @width-breakpoint-tablet ) {
+ display: inline-block;
+ }
+ }
+
+ #pt-notifications-alert {
+ margin-right: 0.75em;
+ }
+}
diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less
index e55c8af..3e4a425 100644
--- a/skinStyles/mediawiki.ui.icon.less
+++ b/skinStyles/mediawiki.ui.icon.less
@@ -3,6 +3,8 @@
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
@import '../resources/common/variables.less';
+.vector-search-box .mw-ui-icon:before,
+.vector-search-box .mw-ui-icon.mw-ui-icon-element:before,
.mw-portlet-lang .mw-ui-icon:before {
background-size: unit( @size-icon / @font-size-base, em ) auto;
width: unit( @size-icon / @font-size-base, em );
diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js
index c38d7da..3b944bf 100644
--- a/stories/SearchBox.stories.data.js
+++ b/stories/SearchBox.stories.data.js
@@ -12,6 +12,7 @@ export { searchBoxTemplate };
*/
export const searchBoxData = {
'form-action': '/w/index.php',
+ class: 'vector-search-box vector-search-show-thumbnail',
'html-user-language-attributes': htmlUserLanguageAttributes,
'msg-search': 'Search',
'html-input': '',
diff --git a/stories/types.js b/stories/types.js
index bf95f5f..d9a2fbb 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -42,6 +42,8 @@
* @property {string} [html-user-language-attributes]
* @property {string} form-action URL
* @property {string|null} html-input
+ * @property {boolean} [is-collapsible]
+ * @property {string|null} [class] of the menu
* @property {string|null} page-title the title of the search page
* @property {string|null} html-button-search-fallback
* @property {string|null} html-button-search