wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element

Browse source 
Cached HTML change

Bug: T351141
Change-Id: I7d2b4417db15aad7ea788ac7adf131de2c702d27
This commit is contained in:
bwang 2023-11-22 15:01:52 -06:00 committed by Bernard Wang
parent a4ed8727cb
commit b23f6f6722
7 changed files with 22 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
includes/templates/ColumnStart.mustache
View file

@ -1,15 +1,17 @@
{{#is-zebra-enabled}}<div class="vector-column-start">{{/is-zebra-enabled}} {{#is-zebra-enabled}}<div class="vector-column-start">{{/is-zebra-enabled}}
{{>MainMenuPinned}} {{>MainMenuPinned}}
{{#data-toc}} {{#data-toc}}
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container"> <div class="vector-sticky-pinned-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }} <nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
{{#data-toc-pinnable-container}} {{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{>PinnableContainer/Pinned/Open}} {{#data-toc-pinnable-container}}
{{#is-pinned}} {{>PinnableContainer/Pinned/Open}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}} {{#is-pinned}}
{{/is-pinned}} {{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{>PinnableContainer/Close}} {{/is-pinned}}
{{/data-toc-pinnable-container}} {{>PinnableContainer/Close}}
</nav> {{/data-toc-pinnable-container}}
</nav>
</div>
{{/data-toc}} {{/data-toc}}
{{#is-zebra-enabled}}</div>{{/is-zebra-enabled}} {{#is-zebra-enabled}}</div>{{/is-zebra-enabled}}

3
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -156,8 +156,7 @@
top: @height-header !important; top: @height-header !important;
} }
#vector-toc-pinned-container .vector-toc, .vector-sticky-pinned-container {
#vector-page-tools-pinned-container .vector-page-tools {
max-height: ~'calc( 100vh - @{height-header} - @{max-height-bottom-spacing-scroll-indicator} )'; max-height: ~'calc( 100vh - @{height-header} - @{max-height-bottom-spacing-scroll-indicator} )';
} }
} }

2
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -134,7 +134,7 @@
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar, &.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar, &.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
&.vector-feature-toc-pinned-clientpref-1 .mw-page-container-inner { &.vector-feature-toc-pinned-clientpref-1 .mw-page-container-inner {
> .vector-toc-landmark { .vector-toc-landmark {
display: block; display: block;
} }
} }

10
resources/skins.vector.zebra.styles/components/PinnableElement.less
View file

@ -10,12 +10,7 @@
.vector-pinned-container { .vector-pinned-container {
.mixin-vector-content-box(); .mixin-vector-content-box();
.mixin-vector-scrollable-with-fade();
// Border-box changes the height calculation.
box-sizing: border-box;
padding: @padding-vertical-dropdown-menu @padding-horizontal-dropdown-menu; padding: @padding-vertical-dropdown-menu @padding-horizontal-dropdown-menu;
// Height is viewport height - row gap above and below the container.
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
display: none; display: none;
// If there is no display grid support we remove pinnable elements // If there is no display grid support we remove pinnable elements
@ -25,9 +20,14 @@
} }
.vector-sticky-pinned-container { .vector-sticky-pinned-container {
.mixin-vector-scrollable-with-fade();
// Applies styles for making a pinned element sticky // Applies styles for making a pinned element sticky
position: sticky; position: sticky;
top: @grid-row-gap; top: @grid-row-gap;
// Border-box changes the height calculation.
box-sizing: border-box;
// Height is viewport height - row gap above and below the container.
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
} }
@media ( max-width: @max-width-breakpoint-tablet ) { @media ( max-width: @max-width-breakpoint-tablet ) {

5
resources/skins.vector.zebra.styles/components/StickyHeader.less
View file

@ -142,12 +142,9 @@
transform: translateY( 0 ); transform: translateY( 0 );
} }
.vector-pinned-container {
max-height: ~'calc( 100vh - @{height-header} - (@{grid-row-gap} * 2) )';
}
.vector-sticky-pinned-container { .vector-sticky-pinned-container {
top: @height-header; top: @height-header;
max-height: ~'calc( 100vh - @{height-header} - (@{grid-row-gap} * 2) )';
} }
// - T289817 `.mw-sticky-header-element` provides an API for template developers // - T289817 `.mw-sticky-header-element` provides an API for template developers

2
resources/skins.vector.zebra.styles/components/TableOfContents.less
View file

@ -105,7 +105,7 @@
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar, &.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar, &.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
&.vector-feature-toc-pinned-clientpref-1 .vector-column-start { &.vector-feature-toc-pinned-clientpref-1 .vector-column-start {
> .vector-toc-landmark { .vector-toc-landmark {
display: block; display: block;
} }
} }

5
resources/skins.vector.zebra.styles/mixins.less
View file

@ -64,6 +64,7 @@
} }
.mixin-vector-scrollable-with-fade() { .mixin-vector-scrollable-with-fade() {
overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
&::after { &::after {
@ -73,11 +74,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: ~'calc( 100% + @{padding-vertical-dropdown-menu} )';
height: @padding-vertical-dropdown-menu; height: @padding-vertical-dropdown-menu;
margin-top: -@padding-vertical-dropdown-menu;
margin-left: -@padding-vertical-dropdown-menu;
transform: translate( 0, @padding-vertical-dropdown-menu );
background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container ); background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
background-repeat: no-repeat; background-repeat: no-repeat;
pointer-events: none; // Make the link below the fade clickable pointer-events: none; // Make the link below the fade clickable