Merge "Add page title to sticky header"

This commit is contained in:
jenkins-bot 2021-09-14 19:31:33 +00:00 committed by Gerrit Code Review
commit b7ef3d9a0e
3 changed files with 17 additions and 6 deletions

View File

@ -308,8 +308,6 @@ class SkinVector extends SkinMustache {
*/
private function getStickyHeaderData() {
return [
'title' => 'Audre Lorde',
'heading' => 'Introduction',
'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
'data-button-start' => self::NO_ICON,
'data-buttons' => [

View File

@ -7,8 +7,7 @@
{{/data-button-start}}
</div>
<div class="vector-sticky-header-context-bar">
<div class="vector-sticky-header-context-bar-primary">{{title}}</div>
<div class="vector-sticky-header-context-bar-secondary">{{heading}}</div>
<div class="vector-sticky-header-context-bar-primary">{{html-title}}</div>
</div>
</div>
<div class="vector-sticky-header-end">

View File

@ -70,8 +70,22 @@
}
&-context-bar-primary {
padding-right: 15px;
font-size: unit( 22 / @font-size-browser, em );
position: relative;
max-width: 500px;
// T289814 Fade out page titles longer than 500px.
/* Stylelint rule broken for vendor prefixes: https://github.com/stylelint/stylelint/issues/1939 */
/* stylelint-disable function-linear-gradient-no-nonstandard-direction */
&:after {
content: '';
position: absolute;
left: 480px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: -webkit-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
}
}
&-context-bar-secondary {