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

Fixed navbar for RTL layouts

This commit is contained in:
Hadi Charara 2022-07-03 11:58:08 -04:00
parent d38518e1e5
commit 87190cf31a
6 changed files with 33 additions and 3 deletions

View file

@ -7,6 +7,7 @@ import browser from '../../scripts/browser';
import dom from '../../scripts/dom';
import './navdrawer.scss';
import '../../assets/css/scrollstyles.scss';
import { getIsRTL } from '../../scripts/globalize';
function getTouches(e) {
return e.changedTouches || e.targetTouches || e.touches;
@ -193,7 +194,7 @@ class NavDrawer {
options.target.classList.add('touch-menu-la');
options.target.style.width = options.width + 'px';
options.target.style.left = -options.width + 'px';
options.target.style.insetInlineStart = -options.width + 'px';
if (!options.disableMask) {
this.mask = document.createElement('div');
@ -205,7 +206,7 @@ class NavDrawer {
animateToPosition(pos) {
const options = this.options;
requestAnimationFrame(function () {
options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
options.target.style.transform = pos ? 'translateX(' + (getIsRTL() ? -pos : pos) + 'px)' : 'none';
});
}

View file

@ -15,6 +15,13 @@
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
-o-transition: transform ease-out 40ms, left ease-out 260ms;
transition: transform ease-out 40ms, left ease-out 260ms;
[div="rtl"] & {
-webkit-transition: -webkit-transform ease-out 40ms, right ease-out 260ms;
-o-transition: transform ease-out 40ms, right ease-out 260ms;
transition: transform ease-out 40ms, right ease-out 260ms;
}
z-index: 1099;
}
@ -22,6 +29,12 @@
-webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
-o-transition: transform ease-out 240ms, left ease-out 260ms;
transition: transform ease-out 240ms, left ease-out 260ms;
[div="rtl"] & {
-webkit-transition: -webkit-transform ease-out 240ms, right ease-out 260ms;
-o-transition: transform ease-out 240ms, right ease-out 260ms;
transition: transform ease-out 240ms, right ease-out 260ms;
}
}
.drawer-open {