golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
VectorGOLEM/resources/skins.vector.styles/layout-default.less

115 lines
2.6 KiB
Plaintext
Raw Normal View History

[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
//
// Default layout for Modern Vector.
//
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: 12px;
[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
body {
// General background/foreground color definition as one exception to the rule.
background-color: @background-color-base;
color: @color-base;
// Vertical scrollbar always visible.
overflow-y: scroll;
}
.mw-body,
.parsoid-body {
direction: ltr;
padding: @padding-content;
}
.mw-body {
// Will be removed when we limit content width (T246420).
/* Border on top, left, and bottom side */
border: @border-width-base @border-style-base @border-color-content;
border-right-width: 0;
/* Merge the border with tabs' one (in their background image) */
margin-top: -@border-width-base;
.firstHeading {
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
overflow: visible;
}
}
Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
.mw-header {
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
margin: @margin-top-header 0 @margin-bottom-header;
padding: @padding-vertical-header @padding-horizontal-header;
// Vertical centering of header elements (IE>=11), requires flex.
// Non-flex fallback for IE<=9: float rule on the child elements.
.flex-display();
[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-wrap: wrap;
[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
// https://caniuse.com/#search=align-items
align-items: center;
z-index: @z-index-header;
}
/* Searchbox */
#p-search {
float: left;
margin: 0.5em 0.5em 0 0.5em;
min-width: 5em;
// 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: 20em;
}
/* Main column */
.mw-body,
#mw-data-after-content,
#left-navigation,
.mw-footer {
margin-left: @width-grid-column-one;
}
/* Content */
.mw-indicators {
float: right;
z-index: @z-index-indicators;
}
.mw-body-content {
position: relative;
z-index: @z-index-base;
}
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
/* Navigation Containers */
Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
.mw-article-toolbar-container {
// Clear the floats on #left-navigation and #right-navigation.
.mixin-clearfix();
}
#left-navigation {
float: left;
}
[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
#right-navigation {
float: right;
}
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
#mw-sidebar-button {
[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
float: left; // Browser: IE9 support - button as flex-child fallback.
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-left: -@margin-horizontal-sidebar-button-icon;
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}
Switch to navigation-first DOM order under `$wgVectorIsSearchInHeader` feature flag This moves the header, navigation, sidebar, and article toolbar to be before the content in the DOM. As a result, a lot of absolute positioning logic can be removed and styles can be simplified. Note that although the sidebar was moved from the header into the workspace container allowing it to de-absolutely positioned, its absolute positioning was kept intact as it has a fair amount of complexity that should be handled in a separate task. To activate, set `$wgVectorIsSearchInHeader = true;` Changes that could cause concern: * The "jump to search" link was removed as the search is now much earlier in the DOM and I questioned the value of keeping this. However, it can be added back in if this change is contentious. * A "jump to content" link was added to account for the new DOM order. * Because the sidebar was taken out of the header, users will not be able to tab from the sidebar button into the sidebar without additional tweaking (e.g. should we add JS to enable this?). It was deemed that this work can be saved as a follow-up task. * I applied `overflow-y: auto` to the `mw-page-container` because the header's top margin was collapsing and caused whitespace to appear between the viewport and the header. Alternatively, we could apply a top padding to the page container and remove the header's top margin. I went for the simplest solution but am open to alternatives. * I left the footer as-is in this patch to minimize risk. It might be cleaner later on to move the footer inside the workspace container which would leave only one workspace container. Bug: T261802 Change-Id: Ic553fab3bde25769b103d899b92b3b694c00c384
2020-09-08 23:20:58 +00:00
#mw-panel {
position: absolute;
[modern] Layout index file. Keep variables concerned with layout in the master file but pull out the default layout into a separate file. Change-Id: I4acc2937f8e8a76274a3ffb76e3729dc89ce1ad7
2020-08-10 21:40:06 +00:00
left: 0;
width: @width-grid-column-one;
.box-sizing( border-box );
margin-top: @margin-top-sidebar;
padding-left: @padding-left-sidebar;
z-index: @z-index-sidebar;
}