archive/BookStackApp_BookStack
0
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-03 15:59:57 +00:00
Code Issues Projects Releases Wiki Activity

Made a range of rtl fixes

Browse source 
Mostly around dropdowns and other items that had right/left specific
styling.
For
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

7
resources/js/components/dropdown.js
View file

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

5
resources/sass/_components.scss
View file

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

4
resources/sass/_forms.scss
View file

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

6
resources/sass/_lists.scss
View file

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