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

Add fade to indicate scrollability in TOC

Browse source 
Bug: T302076
Change-Id: Ib803239602333e2a8232a26a10477a0f9933b819
This commit is contained in:
Clare Ming 2022-03-17 12:35:43 -06:00
parent ca25b944da
commit 1d574b86f1
3 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/TableOfContents.mustache
View file

@ -2,7 +2,7 @@
<div class="sidebar-toc-header">
<h2 class="sidebar-toc-title" aria-hidden="true">{{ msg-vector-toc-heading }}</h2>
</div>
<ul id="table-of-contents">
<ul class="sidebar-toc-contents">
{{#is-vector-toc-beginning-enabled}}
<li id="toc-mw-content-text"
class="sidebar-toc-list-item sidebar-toc-level-1">

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

@ -1,12 +1,14 @@
@import '../../common/variables.less';
@subcategory-indent: 8px;
@fade-height: 40px;
@vertical-padding: 25px;
.sidebar-toc {
display: none;
width: @width-sidebar;
max-height: 90vh;
padding: 20px 12px 20px 26px;
max-height: 75vh;
padding: @vertical-padding 12px 0 26px;
.box-sizing( border-box );
overflow: auto;
background-color: @border-color-sidebar;
@ -38,13 +40,18 @@
padding-bottom: 5px;
}
#table-of-contents,
.sidebar-toc-contents,
.sidebar-toc-list {
margin: 0;
list-style: none;
line-height: 18px;
}
.sidebar-toc-contents {
margin-bottom: -@fade-height;
padding-bottom: @vertical-padding;
}
.sidebar-toc-list-item {
display: block;
position: relative;
@ -66,6 +73,24 @@
}
}
// Hide scrollbar but allow scrolling for Chrome, Safari, and Opera
.sidebar-toc::-webkit-scrollbar {
display: none;
}
// T302076 Add scrollable indicator as fade
.sidebar-toc:after {
content: '';
display: block;
position: sticky; // Make it stick to the bottom like position:fixed inside an element
// By defining all the values it will always be fixed
bottom: 0;
left: 0;
height: @fade-height;
background: linear-gradient( rgba( 255, 255, 255, 0 ), @border-color-sidebar );
pointer-events: none; // Make the link below the fade clickable
}
// Highlight active section
.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
font-weight: bold;

4
tests/jest/__snapshots__/tableOfContents.test.js.snap
View file

@ -5,7 +5,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is false
<div class=\\"sidebar-toc-header\\">
<h2 class=\\"sidebar-toc-title\\" aria-hidden=\\"true\\">Contents</h2>
</div>
<ul id=\\"table-of-contents\\">
<ul class=\\"sidebar-toc-contents\\">
<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
<div class=\\"sidebar-toc-text\\">Beginning</div>
@ -62,7 +62,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is true
<div class=\\"sidebar-toc-header\\">
<h2 class=\\"sidebar-toc-title\\" aria-hidden=\\"true\\">Contents</h2>
</div>
<ul id=\\"table-of-contents\\">
<ul class=\\"sidebar-toc-contents\\">
<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
<div class=\\"sidebar-toc-text\\">Beginning</div>