mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-12 09:21:11 +00:00
78787d9665
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
240 lines
8 KiB
Plaintext
240 lines
8 KiB
Plaintext
@import '../../variables.less';
|
|
@import 'mediawiki.mixins.less';
|
|
|
|
// Putting a `skin-vector-max-width` class on the body and wrapping the rules
|
|
// herein enables the ability to feature flag the max-width design. This is
|
|
// listed in the acceptance criteria of T246420. In other words, if this class
|
|
// is present, the max-width design will appear. Without this class, max-width
|
|
// design will not appear. In either case, the appearance should not be broken.
|
|
.skin-vector-max-width {
|
|
@background-color-secondary--modern: #f8f9fa;
|
|
@max-width-page-container: 1650px;
|
|
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container );
|
|
@background-color-page-container: @background-color-base;
|
|
@max-width-workspace-container: 1440px;
|
|
@max-width-content-container: 960px;
|
|
// TODO: Remove @padding-content in variables.less when the max-width layout
|
|
// becomes the default layout since the value is different between legacy and
|
|
// latest.
|
|
@padding-content: 1.25em 0.5em 1.5em 0.5em;
|
|
// We want ~60px of space between the end of the sidebar and the start of the
|
|
// content container for aesthetic reasons. The sidebar is already displaced
|
|
// -30px so we simply add 30px of space to the width of the sidebar.
|
|
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em );
|
|
// Page container's total horizontal padding in em units.
|
|
@padding-horizontal-page-container-total: 2 * unit( @padding-horizontal-page-container / @font-size-browser, em );
|
|
// Equivalent to 1432px. This determines the maximum width breakpoint at which
|
|
// the content will have a fixed start margin applied to it when the sidebar
|
|
// is open. The content can shift its position when the sidebar is open/closed
|
|
// at or below this breakpoint and will maintain its position above this
|
|
// breakpoint.
|
|
@max-width-margin-start-content: ( 2 * @margin-start-content ) + @padding-horizontal-page-container-total + ( unit( @max-width-content-container / @font-size-browser, em ) );
|
|
@border-color-sidebar: @background-color-secondary--modern;
|
|
|
|
// Style overrides for existing elements. Mostly overrides layout.less rules.
|
|
background-color: @background-color-secondary--modern;
|
|
|
|
.mw-body {
|
|
border-left: 0;
|
|
border-bottom: 0;
|
|
padding: @padding-content;
|
|
}
|
|
|
|
.parsoid-body {
|
|
padding: @padding-content;
|
|
}
|
|
|
|
.mw-header {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.mw-body,
|
|
#mw-data-after-content,
|
|
#left-navigation,
|
|
.mw-footer {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy #mw-head {
|
|
width: auto;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy #left-navigation {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy #right-navigation {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy #p-personal {
|
|
right: 0;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy #p-search {
|
|
margin-right: 0;
|
|
}
|
|
|
|
#p-namespaces {
|
|
background-image: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
#mw-panel {
|
|
background-image: linear-gradient( to bottom, @background-color-base 0%, @background-color-secondary--modern 10%, @background-color-secondary--modern 90%, @background-color-base 100% );
|
|
// Sidebar is displaced from the workspace container so that the
|
|
// sidebar is flush with the edge of the screen at small widths.
|
|
left: -@padding-horizontal-page-container;
|
|
margin-top: 0;
|
|
// To avoid the white part of the gradient colliding with the sidebar links
|
|
// we apply top and bottom padding.
|
|
padding-top: 8px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.mw-footer {
|
|
border-top: @border-base;
|
|
padding: 32px 0 0 0;
|
|
}
|
|
|
|
// 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).
|
|
min-height: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 0 @padding-horizontal-page-container;
|
|
background-color: @background-color-page-container;
|
|
}
|
|
|
|
&.skin-vector-search-header .mw-page-container {
|
|
// Establish a new block formatting context to prevent header top margin
|
|
// collapsing and causing whitespace to appear between the header and
|
|
// viewport.
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Used as a container for absolutely positioned elements.
|
|
.mw-page-container-inner {
|
|
position: relative;
|
|
}
|
|
|
|
.mw-workspace-container {
|
|
max-width: @max-width-workspace-container;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&.skin-vector-search-header .mw-workspace-container {
|
|
// The sidebar is absolutely positioned relative to the
|
|
// mw-workspace-container.
|
|
position: relative;
|
|
}
|
|
|
|
.mw-content-container {
|
|
max-width: @max-width-content-container;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
|
|
margin-top: @height-header;
|
|
}
|
|
|
|
&.skin-vector-search-header .mw-article-toolbar-container {
|
|
// We want to keep the max-width of the article-toolbar-container the
|
|
// same max-width as the article page's content container in order to
|
|
// prevent it from moving when going from an article page to a
|
|
// history/special page.
|
|
max-width: @max-width-content-container;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.mw-sidebar-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.mw-footer-container {
|
|
padding-top: 50px;
|
|
padding-bottom: 82px;
|
|
}
|
|
|
|
// For container logic specific to special pages and history pages.
|
|
&.action-history,
|
|
&.ns-special {
|
|
// Allow the max-width of content on history/special pages to be wider than
|
|
// the max-width of content on article pages.
|
|
.mw-content-container {
|
|
max-width: none;
|
|
}
|
|
|
|
// We want to keep the max-width of the article-toolbar-container the
|
|
// same max-width as the article page's content container in order to
|
|
// prevent it from moving when going from an article page to a
|
|
// history/special page.
|
|
&.skin-vector-search-header-legacy .mw-article-toolbar-container {
|
|
max-width: @max-width-content-container;
|
|
}
|
|
|
|
// Adjusts the content when sidebar is open regardless of the viewport width.
|
|
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
|
|
margin-left: @margin-start-content;
|
|
}
|
|
}
|
|
|
|
// We want it to appear like the sidebar is going into/coming out of
|
|
// `.mw-page-container`, but we can't use `overflow: hidden` on
|
|
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
|
|
// calculate the maximum distance from the start of `mw-page-container` to the
|
|
// start of the sidebar.
|
|
&.skin-vector-search-header-legacy #mw-sidebar-checkbox:not( :checked ) ~ .mw-header .mw-sidebar,
|
|
&.skin-vector-search-header #mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container .mw-sidebar {
|
|
.transform( translateX( -( @max-width-page-container - @max-width-workspace-container ) / 2 ) );
|
|
}
|
|
|
|
// Responsive overrides.
|
|
@media ( min-width: @min-width-page-container--padded ) {
|
|
@border-color: @border-color-sidebar;
|
|
|
|
.mw-page-container {
|
|
border-left: 1px solid @border-color;
|
|
border-right: 1px solid @border-color;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @max-width-margin-start-content ) {
|
|
// Adjusts the content and mw-article-toolbar-container.
|
|
.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
|
|
&.skin-vector-search-header-legacy .mw-checkbox-hack-checkbox:checked ~ #mw-navigation .mw-content-container,
|
|
&.skin-vector-search-header .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
|
|
margin-left: @margin-start-content;
|
|
}
|
|
|
|
.mw-sidebar {
|
|
// Remove sidebar transition at smaller widths.
|
|
.transition( none );
|
|
}
|
|
}
|
|
|
|
@media ( min-width: ( @max-width-workspace-container + ( 2 * @padding-horizontal-page-container ) ) ) {
|
|
#mw-panel {
|
|
background: @background-color-page-container;
|
|
border-right: 1px solid @border-color-sidebar;
|
|
}
|
|
}
|
|
}
|