[Grid preparation] ArticleToolbar component
Structural change to prepare for CSS grid usage. ArticleToolbar component is defined and self contained with all layout rules relating to toolbar UI regression testing suite shows 6 failures due to pixel alignment changes to tabs. When comparing to the current release, you should see 34 failures before /and/ after this change. Notable changes: - #mw-head element is no longer present in modern Vector skin to allow us to distinguish between cached HTML and modern HTML Bug: T303484 Change-Id: Ia261ea53931217f32a21b33c2ab3d4ec64efa48a
This commit is contained in:
Jon Robson
Jdlrobson
parent
9a2b3d6275
commit
305fbdacf8
|
|
@ -5,7 +5,7 @@
|
|||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.styles",
|
||||
"maxSize": "10.4 kB"
|
||||
"maxSize": "10.7 kB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.legacy.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<nav class="vector-article-toolbar" aria-label="{{msg-vector-article-tools-nav-label}}"
|
||||
role="navigation">
|
||||
<div class="mw-article-toolbar-container">
|
||||
{{#data-portlets}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
</div>
|
||||
<div id="right-navigation" class="vector-collapsible {{#data-views.is-empty}}{{#data-actions.is-empty}}right-navigation-empty{{/data-actions.is-empty}}{{/data-views.is-empty}}">
|
||||
{{#data-views}}{{>Menu}}{{/data-views}}
|
||||
{{#data-actions}}{{>Menu}}{{/data-actions}}
|
||||
</div>
|
||||
{{/data-portlets}}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,17 +1,4 @@
|
|||
<div id="mw-navigation">
|
||||
<nav id="mw-head" aria-label="{{msg-vector-article-tools-nav-label}}" role="navigation" >
|
||||
<div class="mw-article-toolbar-container">
|
||||
{{#data-portlets}}
|
||||
<div id="left-navigation">
|
||||
{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
|
||||
{{#data-variants}}{{>Menu}}{{/data-variants}}
|
||||
</div>
|
||||
<div id="right-navigation">
|
||||
{{#data-views}}{{>Menu}}{{/data-views}}
|
||||
{{#data-actions}}{{>Menu}}{{/data-actions}}
|
||||
</div>
|
||||
{{/data-portlets}}
|
||||
</div>
|
||||
</nav>
|
||||
{{>ArticleToolbar}}
|
||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
// FIXME: For cached CSS. can be dropped to legacy stylesheet when
|
||||
// Ia261ea53931217f32a21b33c2ab3d4ec64efa48a has been in production for a week.
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||
background-position: right bottom;
|
||||
|
|
@ -114,6 +116,7 @@
|
|||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
||||
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
|
||||
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
// #mw-head rule is legacy Vector only.
|
||||
.vector-menu-tabs,
|
||||
.vector-menu-tabs a,
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
|
|
|
|||
|
|
@ -26,3 +26,67 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
|
||||
.vector-article-toolbar .mw-article-toolbar-container {
|
||||
display: flex;
|
||||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
padding-right: @padding-horizontal-tabs - 1px;
|
||||
}
|
||||
|
||||
.vector-menu-tabs {
|
||||
// Account for background-image gradient.
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.vector-menu-dropdown .vector-menu-heading {
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||||
background-size: @border-width-base 100%;
|
||||
background-position: right bottom;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: end;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
margin-right: -1px;
|
||||
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
margin-right: -@border-base-ems * 3;
|
||||
}
|
||||
}
|
||||
|
||||
#left-navigation {
|
||||
display: flex;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||||
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
margin-left: @border-base-ems * 3;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-tabs li {
|
||||
margin-top: 1px;
|
||||
|
||||
&.selected {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Currently when right navigation is empty and sidebar is open no
|
||||
// border is shown. This can intentionally be removed at a later date but
|
||||
// is preserved to reduce number of UI regressions in current release.
|
||||
@media ( max-width: @width-breakpoint-tablet ) {
|
||||
#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ body {
|
|||
}
|
||||
|
||||
.mw-body {
|
||||
border-top: @border-width-base @border-style-base @border-color-content;
|
||||
border-top: @border-width-base @border-style-base transparent;
|
||||
/* Merge the border with tabs' one (in their background image) */
|
||||
margin-top: -@border-width-base;
|
||||
padding: @padding-content;
|
||||
|
|
|
|||
Loading…
Reference in New Issue