wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-18 21:15:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/layout-search-header.less

65 lines
2.3 KiB
Plaintext
Raw Normal View History

Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 350px / @font-size-browser, em );
Reduce max-width and adjust margin-left * The margin-left should only be auto at small resolutions - otherwise on large monitors it becomes visually separated from the logo * the margin left should be larger * and max width should be smaller. Bug: T261686 Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
2020-09-03 16:56:36 +00:00
@max-width-search: unit( 450px / @font-size-browser, em );
@margin-horizontal-search: unit( 56px / @font-size-browser, em );
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
Allow personal tools to span 2 lines The calculations were a little incorrect as I failed to consider the sidebar button correctly and how the search's min width and max width impact layout. I also move rules from Sidebar.less regarding the placement of the button into layout where I believe they belong. We do not have a header component, so the positioning (margin) of the sidebar button in current form should be here. This can be revisited if we introduce a header component. Bug: T249363 Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-17 22:08:22 +00:00
@min-width-logo: unit( 180px / @font-size-browser, em );
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
Allow personal tools to span 2 lines The calculations were a little incorrect as I failed to consider the sidebar button correctly and how the search's min width and max width impact layout. I also move rules from Sidebar.less regarding the placement of the button into layout where I believe they belong. We do not have a header component, so the positioning (margin) of the sidebar button in current form should be here. This can be revisited if we introduce a header component. Bug: T249363 Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-17 22:08:22 +00:00
@min-width-personal-tools: unit( 300px / @font-size-browser, em );
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
@padding-horizontal-page-container: 30px;
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
Allow personal tools to span 2 lines The calculations were a little incorrect as I failed to consider the sidebar button correctly and how the search's min width and max width impact layout. I also move rules from Sidebar.less regarding the placement of the button into layout where I believe they belong. We do not have a header component, so the positioning (margin) of the sidebar button in current form should be here. This can be revisited if we introduce a header component. Bug: T249363 Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-17 22:08:22 +00:00
@margin-horizontal-sidebar-button-icon-ems: unit( @margin-horizontal-sidebar-button-icon / @font-size-browser, em );
Include @padding-horizontal-page-container in header adjustment calculations I overlooked the horizontal padding on the page container. This needs to be included in the decision on whether to make the header 2 lines on 1. Bug: T249363 Change-Id: I4fabac7d57e37db87d2363073317109f582de883
2020-08-26 21:31:08 +00:00
@padding-horizontal-page-container-ems: unit( @padding-horizontal-page-container / @font-size-browser, em );
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
Allow personal tools to span 2 lines The calculations were a little incorrect as I failed to consider the sidebar button correctly and how the search's min width and max width impact layout. I also move rules from Sidebar.less regarding the placement of the button into layout where I believe they belong. We do not have a header component, so the positioning (margin) of the sidebar button in current form should be here. This can be revisited if we introduce a header component. Bug: T249363 Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-17 22:08:22 +00:00
// the width of the container if you exclude consideration for search
Include @padding-horizontal-page-container in header adjustment calculations I overlooked the horizontal padding on the page container. This needs to be included in the decision on whether to make the header 2 lines on 1. Bug: T249363 Change-Id: I4fabac7d57e37db87d2363073317109f582de883
2020-08-26 21:31:08 +00:00
@min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @min-width-personal-tools + @padding-horizontal-page-container-ems;
Allow personal tools to span 2 lines The calculations were a little incorrect as I failed to consider the sidebar button correctly and how the search's min width and max width impact layout. I also move rules from Sidebar.less regarding the placement of the button into layout where I believe they belong. We do not have a header component, so the positioning (margin) of the sidebar button in current form should be here. This can be revisited if we introduce a header component. Bug: T249363 Change-Id: I4ff640380eafc8beedb2c3c8fb00a56c71c5cb45
2020-08-17 22:08:22 +00:00
@min-width-supported: @min-width-container-base + @min-width-search;
@width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search;
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
@height-personal-tools: 2em;
.skin-vector-search-header {
// Header components
#p-search {
[IE9] Layout flex-box adjustments Minor visual fix for IE9 for modern mode with search not in header. i.e. with these settings: $wgVectorIsSearchInHeader = false; $wgVectorDefaultSkinVersion = 2; Slight refactor of CSS. Removes block of styles that "reset" floats. These were uneccessary because as flex-children, the floats were ignored on those elements anyway. Moves flex-wrap on .mw-header from layout-search-header.less to layout-default.less since that's where display:flex is defined and the rule is general enough that it should apply for different layouts. Remove the @supports block with the `float:none;`. That is unnecessary because flex-children are not affected by floats. Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
2020-09-01 12:28:39 +00:00
flex-grow: 1;
// Support IE9: float will be disabled if display flex is supported
float: left;
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
// Override values to reflect new behaviour.
min-width: @min-width-search;
Flush search to right on smaller resolutions Bug: T261686 Change-Id: I30985009c05e64bff5aaa240f7c3970475fe0fba
2020-08-31 19:37:29 +00:00
max-width: 100%;
margin: 0 0 0 @margin-horizontal-search;
#searchform {
Reduce max-width and adjust margin-left * The margin-left should only be auto at small resolutions - otherwise on large monitors it becomes visually separated from the logo * the margin left should be larger * and max width should be smaller. Bug: T261686 Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
2020-09-03 16:56:36 +00:00
margin-left: 0;
Flush search to right on smaller resolutions Bug: T261686 Change-Id: I30985009c05e64bff5aaa240f7c3970475fe0fba
2020-08-31 19:37:29 +00:00
max-width: @max-width-search;
}
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
}
#p-personal {
[IE9] Layout flex-box adjustments Minor visual fix for IE9 for modern mode with search not in header. i.e. with these settings: $wgVectorIsSearchInHeader = false; $wgVectorDefaultSkinVersion = 2; Slight refactor of CSS. Removes block of styles that "reset" floats. These were uneccessary because as flex-children, the floats were ignored on those elements anyway. Moves flex-wrap on .mw-header from layout-search-header.less to layout-default.less since that's where display:flex is defined and the rule is general enough that it should apply for different layouts. Remove the @supports block with the `float:none;`. That is unnecessary because flex-children are not affected by floats. Change-Id: Ida3d2a7bc2b2f70238129df876714228fe5cdf84
2020-09-01 12:28:39 +00:00
flex-grow: 1;
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
text-align: right;
Accommodate longer user names in personal tools The width should apply at all resolutions. Note, because of the nature of flex box and flex-grow the personal tools can grow larger than this value. This avoids Alex Hollender (WMF) and similarly long usernames from every running to the next line before they are allowed to. Bug: T249363 Change-Id: I4640947aaaf7ab764cb17b911af7085ac291b7d1
2020-09-01 19:08:07 +00:00
flex-basis: @min-width-personal-tools;
Flush search to right on smaller resolutions Bug: T261686 Change-Id: I30985009c05e64bff5aaa240f7c3970475fe0fba
2020-08-31 19:37:29 +00:00
margin-left: @margin-horizontal-search;
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
// Support IE9: This is reset in @support query below if Flexbox is available.
float: right;
}
Reduce max-width and adjust margin-left * The margin-left should only be auto at small resolutions - otherwise on large monitors it becomes visually separated from the logo * the margin left should be larger * and max width should be smaller. Bug: T261686 Change-Id: Ia1331f51764a34f113e3336735e6cfd5fde1d49d
2020-09-03 16:56:36 +00:00
// At low resolutions the search must be pushed to the right of the screen
// 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 ) {
#p-search #searchform {
margin-left: auto;
}
}
Move the personal tools and search into header To support roll out and avoid issues with cached HTML the new styles for the new search feature are restricted to HTML where the body tag has `skin-vector-search-header` class. For legacy mode, we introduce a new class `skin-vector-search-header-legacy` and temporarily use a CSS3 `:not()` selector to ensure the styles ship during the phase where cached HTML can be served. While this will create some display issues in browsers that do not support CSS3 selectors, all grade A browsers in our compatability matrix support this. Bug: T249363 Change-Id: I7f8059d43eaab49de362405784b34a4fe502c7b0
2020-07-07 22:52:12 +00:00
}
Reference in a new issue Copy permalink