1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Merge pull request #1229 from ferferga/scrollbar-placeholder

Keep scrollbar always present to avoid UI clipping
This commit is contained in:
Vasily 2020-05-20 15:20:19 +03:00 committed by GitHub
commit 8f85ca24fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 0 deletions

View file

@ -120,3 +120,11 @@ div[data-role=page] {
.headroom--unpinned {
transform: translateY(-100%);
}
.force-scroll {
overflow-y: scroll;
}
.hide-scroll {
overflow-y: hidden;
}

View file

@ -109,6 +109,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
function hidePrePlaybackPage() {
let animatedPage = document.querySelector('.page:not(.hide)');
animatedPage.classList.add('hide');
// At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded
document.body.classList.remove('force-scroll');
}
function zoomIn(elem) {

View file

@ -137,6 +137,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
function onViewBeforeShow(e) {
if (e.detail && e.detail.type === 'video-osd') {
// This removes the space that the scrollbar takes while playing a video
document.body.classList.remove('force-scroll');
return;
}
@ -155,6 +157,9 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
}
}
}
// This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
// that need the scrollbar and pages that don't.
document.body.classList.add('force-scroll');
}
document.addEventListener('viewshow', onViewBeforeShow);

View file

@ -438,6 +438,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
inputManager.off(window, onInputCommand);
document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
// Shows page scrollbar
document.body.classList.remove('hide-scroll');
document.body.classList.add('force-scroll');
}
/**
@ -603,6 +606,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/
self.show = function () {
createElements(options);
// Hides page scrollbar
document.body.classList.remove('force-scroll');
document.body.classList.add('hide-scroll');
};
/**