Merge "[Grid preparation] ArticleToolbar component"
This commit is contained in:
commit
b614616581
|
@ -5,7 +5,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.styles",
|
"resourceModule": "skins.vector.styles",
|
||||||
"maxSize": "10.4 kB"
|
"maxSize": "10.7 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.vector.legacy.js",
|
"resourceModule": "skins.vector.legacy.js",
|
||||||
|
|
15
includes/templates/ArticleToolbar.mustache
Normal file
15
includes/templates/ArticleToolbar.mustache
Normal file
|
@ -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">
|
<div id="mw-navigation">
|
||||||
<nav id="mw-head" aria-label="{{msg-vector-article-tools-nav-label}}" role="navigation" >
|
{{>ArticleToolbar}}
|
||||||
<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>
|
|
||||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||||
</div>
|
</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 {
|
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||||
background-position: right bottom;
|
background-position: right bottom;
|
||||||
|
@ -114,6 +116,7 @@
|
||||||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
// `.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.
|
// `.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 .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,
|
||||||
.vector-menu-tabs a,
|
.vector-menu-tabs a,
|
||||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
#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 {
|
.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) */
|
/* Merge the border with tabs' one (in their background image) */
|
||||||
margin-top: -@border-width-base;
|
margin-top: -@border-width-base;
|
||||||
padding: @padding-content;
|
padding: @padding-content;
|
||||||
|
|
Loading…
Reference in a new issue