Made a range of rtl fixes

Mostly around dropdowns and other items that had right/left specific
styling.
For #3702
This commit is contained in:
Dan Brown 2022-09-06 21:30:28 +01:00
parent 623ccd4cfa
commit 98aed794cc
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 13 additions and 9 deletions

View File

@ -37,12 +37,8 @@ class DropDown {
if (this.moveMenu) {
this.body.appendChild(this.menu);
this.menu.style.position = 'fixed';
if (this.direction === 'right') {
this.menu.style.right = `${(menuOriginalRect.right - menuOriginalRect.width)}px`;
} else {
this.menu.style.left = `${menuOriginalRect.left}px`;
}
this.menu.style.width = `${menuOriginalRect.width}px`;
this.menu.style.left = `${menuOriginalRect.left}px`;
heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top;
}
@ -94,6 +90,7 @@ class DropDown {
this.menu.style.position = '';
this.menu.style[this.direction] = '';
this.menu.style.width = '';
this.menu.style.left = '';
this.container.appendChild(this.menu);
}

View File

@ -814,7 +814,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.template-item-actions {
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
width: 50px;
height: 100%;
display: flex;
@ -828,6 +828,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border: 0;
border-top: 1px solid #DDD;
}
.template-item-actions button svg {
margin: 0;
}
.template-item-actions button:first-child {
border-top: 0;
}

View File

@ -210,6 +210,10 @@ select {
background-size: 12px;
background-position: calc(100% - 20px) 70%;
background-repeat: no-repeat;
@include rtl {
background-position: 20px 70%;
}
}
input[type=date] {

View File

@ -197,7 +197,7 @@
.chapter-contents-toggle {
display: block;
width: 100%;
text-align: left;
text-align: start;
padding: $-xxs $-s ($-xxs * 2) $-s;
border-radius: 0 3px 3px 0;
line-height: 1;
@ -630,7 +630,7 @@ ul.pagination {
z-index: 999;
top: 0;
list-style: none;
right: 0;
inset-inline-end: 0;
margin: $-m 0;
@include lightDark(background-color, #fff, #333);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
@ -715,7 +715,7 @@ ul.pagination {
// being cut by scrollable container.
.tri-layout-right .dropdown-menu,
.tri-layout-left .dropdown-menu {
right: $-xs;
inset-inline-end: $-xs;
}
// Books grid view