colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated styles to use logical properties/values 

- Intended to improve RTL support in the interface.
- Also adds hebrew to language dropdown since that was missing.

Related to #1794
This commit is contained in:
Dan Brown 2020-04-05 13:07:19 +01:00
parent f84bf8e883
commit f94fd44ff6
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
21 changed files with 228 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/dropdown.js
View File

@ -11,6 +11,7 @@ class DropDown {
this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]'); this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]');
this.moveMenu = elem.hasAttribute('dropdown-move-menu'); this.moveMenu = elem.hasAttribute('dropdown-move-menu');
this.toggle = elem.querySelector('[dropdown-toggle]'); this.toggle = elem.querySelector('[dropdown-toggle]');
this.direction = (document.dir === 'rtl') ? 'right' : 'left';
this.body = document.body; this.body = document.body;
this.showing = false; this.showing = false;
this.setupListeners(); this.setupListeners();
@ -28,7 +29,11 @@ class DropDown {
this.rect = this.menu.getBoundingClientRect(); this.rect = this.menu.getBoundingClientRect();
this.body.appendChild(this.menu); this.body.appendChild(this.menu);
this.menu.style.position = 'fixed'; this.menu.style.position = 'fixed';
this.menu.style.left = `${this.rect.left}px`; if (this.direction === 'right') {
this.menu.style.right = `${(this.rect.right - this.rect.width)}px`;
} else {
this.menu.style.left = `${this.rect.left}px`;
}
this.menu.style.top = `${this.rect.top}px`; this.menu.style.top = `${this.rect.top}px`;
this.menu.style.width = `${this.rect.width}px`; this.menu.style.width = `${this.rect.width}px`;
} }
@ -67,7 +72,7 @@ class DropDown {
this.toggle.setAttribute('aria-expanded', 'false'); this.toggle.setAttribute('aria-expanded', 'false');
if (this.moveMenu) { if (this.moveMenu) {
this.menu.style.position = ''; this.menu.style.position = '';
this.menu.style.left = ''; this.menu.style[this.direction] = '';
this.menu.style.top = ''; this.menu.style.top = '';
this.menu.style.width = ''; this.menu.style.width = '';
this.container.appendChild(this.menu); this.container.appendChild(this.menu);

1
resources/lang/en/settings.php
View File

@ -192,6 +192,7 @@ return [
'es' => 'Español', 'es' => 'Español',
'es_AR' => 'Español Argentina', 'es_AR' => 'Español Argentina',
'fr' => 'Français', 'fr' => 'Français',
'he' => 'עברית',
'hu' => 'Magyar', 'hu' => 'Magyar',
'it' => 'Italian', 'it' => 'Italian',
'ja' => '日本語', 'ja' => '日本語',

12
resources/sass/_blocks.scss
View File

@ -3,7 +3,7 @@
* Callouts * Callouts
*/ */
.callout { .callout {
border-left: 3px solid #BBB; border-inline-start: 3px solid #BBB;
background-color: #EEE; background-color: #EEE;
padding: $-s $-s $-s $-xl; padding: $-s $-s $-s $-xl;
display: block; display: block;
@ -109,7 +109,7 @@
background-color: #EEE; background-color: #EEE;
} }
.svg-icon { .svg-icon {
margin-right: 0px; margin-inline-end: 0px;
} }
} }
> div .outline input { > div .outline input {
@ -177,8 +177,8 @@
.content-wrap.card { .content-wrap.card {
padding: $-m $-xxl; padding: $-m $-xxl;
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
margin-bottom: $-xl; margin-bottom: $-xl;
overflow: initial; overflow: initial;
min-height: 60vh; min-height: 60vh;
@ -211,7 +211,7 @@
.tag-item { .tag-item {
display: inline-flex; display: inline-flex;
margin-bottom: $-xs; margin-bottom: $-xs;
margin-right: $-xs; margin-inline-end: $-xs;
border-radius: 4px; border-radius: 4px;
border: 1px solid #CCC; border: 1px solid #CCC;
overflow: hidden; overflow: hidden;
@ -229,7 +229,7 @@
fill: #888; fill: #888;
} }
.tag-value { .tag-value {
border-left: 1px solid #DDD; border-inline-start: 1px solid #DDD;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
} }

16
resources/sass/_buttons.scss
View File

@ -66,7 +66,7 @@ button {
} }
.button + .button { .button + .button {
margin-left: $-s; margin-inline-start: $-s;
} }
.button.small { .button.small {
@ -99,26 +99,28 @@ button {
.button.block { .button.block {
width: 100%; width: 100%;
text-align: left; text-align: start;
display: block; display: block;
} }
.button.icon { .button.icon {
.svg-icon { .svg-icon {
margin-right: 0; margin-inline-end: 0;
} }
} }
.button.svg { .button.svg {
display: flex;
align-items: center;
padding: $-s $-m;
padding-bottom: ($-s - 2px);
svg { svg {
display: inline-block; display: inline-block;
position: absolute;
left: $-m;
top: $-s - 2px;
width: 24px; width: 24px;
height: 24px; height: 24px;
bottom: auto;
margin-inline-end: $-m;
} }
padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
} }
.button[disabled] { .button[disabled] {

26
resources/sass/_components.scss
View File

@ -7,7 +7,7 @@
padding: $-m $-l; padding: $-m $-l;
background-color: #FFF; background-color: #FFF;
border-radius: 4px; border-radius: 4px;
border-left: 6px solid currentColor; border-inline-start: 6px solid currentColor;
box-shadow: $bs-large; box-shadow: $bs-large;
z-index: 999999; z-index: 999999;
cursor: pointer; cursor: pointer;
@ -26,7 +26,7 @@
svg { svg {
width: 2.8rem; width: 2.8rem;
height: 2.8rem; height: 2.8rem;
padding-right: $-s; padding-inline-end: $-s;
fill: currentColor; fill: currentColor;
} }
.dismiss { .dismiss {
@ -63,7 +63,7 @@
transition: all ease-in-out 180ms; transition: all ease-in-out 180ms;
user-select: none; user-select: none;
svg[data-icon="caret-right"] { svg[data-icon="caret-right"] {
margin-right: 0; margin-inline-end: 0;
font-size: 1rem; font-size: 1rem;
transition: all ease-in-out 180ms; transition: all ease-in-out 180ms;
transform: rotate(0deg); transform: rotate(0deg);
@ -73,7 +73,7 @@
transform: rotate(90deg); transform: rotate(90deg);
} }
svg[data-icon="caret-right"] + * { svg[data-icon="caret-right"] + * {
margin-left: $-xs; margin-inline-start: $-xs;
} }
} }
@ -243,7 +243,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
width: 300px; width: 300px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border-left: 1px solid #DDD; border-inline-start: 1px solid #DDD;
.inner { .inner {
padding: $-m; padding: $-m;
} }
@ -477,7 +477,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: block; display: block;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-left: -27px; margin-inline-start: -27px;
margin-top: -35px; margin-top: -35px;
} }
@ -511,7 +511,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
top: 50%; top: 50%;
margin-top: -8px; margin-top: -8px;
width: 80px; width: 80px;
margin-left: -40px; margin-inline-start: -40px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
transform: scale(1); transform: scale(1);
border-radius: 8px; border-radius: 8px;
@ -568,14 +568,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
left: 44px; left: 44px;
width: 0; width: 0;
height: 0; height: 0;
border-left: 6px solid transparent; border-inline-start: 6px solid transparent;
border-right: 6px solid transparent; border-inline-end: 6px solid transparent;
border-bottom: 6px solid $negative; border-bottom: 6px solid $negative;
} }
.tab-container .nav-tabs { .tab-container .nav-tabs {
text-align: left; text-align: start;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
margin-bottom: $-m; margin-bottom: $-m;
.tab-item { .tab-item {
@ -613,7 +613,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
max-width: 480px; max-width: 480px;
margin-bottom: $-s; margin-bottom: $-s;
a { a {
margin-right: $-xs; margin-inline-end: $-xs;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -659,7 +659,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
a { color: #666; } a { color: #666; }
span { span {
padding-left: $-xxs; padding-inline-start: $-xxs;
} }
} }
.text-muted { .text-muted {
@ -692,7 +692,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-left: 1px solid #DDD; border-inline-start: 1px solid #DDD;
} }
.template-item-actions button { .template-item-actions button {
cursor: pointer; cursor: pointer;

24
resources/sass/_forms.scss
View File

@ -107,15 +107,15 @@
} }
.markdown-display { .markdown-display {
margin-left: -1px; margin-inline-start: -1px;
} }
.markdown-editor-display { .markdown-editor-display {
background-color: #FFFFFF; background-color: #FFFFFF;
body { body {
background-color: #FFFFFF; background-color: #FFFFFF;
padding-left: 16px; padding-inline-start: 16px;
padding-right: 16px; pmargin-inline-end: 16px;
} }
[drawio-diagram]:hover { [drawio-diagram]:hover {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-primary);
@ -155,12 +155,12 @@ label.radio, label.checkbox {
font-weight: 400; font-weight: 400;
user-select: none; user-select: none;
input[type="radio"], input[type="checkbox"] { input[type="radio"], input[type="checkbox"] {
margin-right: $-xs; margin-inline-end: $-xs;
} }
} }
label.inline.checkbox { label.inline.checkbox {
margin-right: $-m; margin-inline-end: $-m;
} }
label + p.small { label + p.small {
@ -288,12 +288,12 @@ input[type=color] {
border: 1px solid #DDD; border: 1px solid #DDD;
border-radius: 4px; border-radius: 4px;
.collapse-title { .collapse-title {
margin-left: -$-m; margin-inline-start: -$-m;
margin-right: -$-m; margin-inline-end: -$-m;
padding: $-s $-m; padding: $-s $-m;
display: block; display: block;
width: calc(100% + 32px); width: calc(100% + 32px);
text-align: left; text-align: start;
} }
.collapse-title, .collapse-title label { .collapse-title, .collapse-title label {
cursor: pointer; cursor: pointer;
@ -306,7 +306,7 @@ input[type=color] {
.collapse-title label:before { .collapse-title label:before {
display: inline-block; display: inline-block;
content: '▸'; content: '▸';
margin-right: $-m; margin-inline-end: $-m;
transition: all ease-in-out 400ms; transition: all ease-in-out 400ms;
transform: rotate(0); transform: rotate(0);
} }
@ -373,10 +373,14 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 9px; top: 9px;
@include rtl {
right: 8px;
left: auto;
}
} }
input { input {
display: block; display: block;
padding-left: $-l + 4px; padding-inline-start: $-l + 4px;
width: 300px; width: 300px;
max-width: 100%; max-width: 100%;
} }

68
resources/sass/_header.scss
View File

@ -34,8 +34,8 @@ header {
fill: #FFF; fill: #FFF;
} }
.dropdown-container { .dropdown-container {
padding-left: $-m; padding-inline-start: $-m;
padding-right: 0; padding-inline-end: 0;
} }
.avatar, .user-name { .avatar, .user-name {
display: inline-block; display: inline-block;
@ -53,7 +53,7 @@ header {
vertical-align: top; vertical-align: top;
} }
> span { > span {
padding-left: $-xs; padding-inline-start: $-xs;
display: inline-block; display: inline-block;
padding-top: $-xxs; padding-top: $-xxs;
} }
@ -62,7 +62,7 @@ header {
font-size: 18px; font-size: 18px;
} }
@include between($l, $xl) { @include between($l, $xl) {
padding-left: $-xs; padding-inline-start: $-xs;
.name { .name {
display: none; display: none;
} }
@ -87,7 +87,7 @@ header .search-box {
border-radius: 40px; border-radius: 40px;
color: #EEE; color: #EEE;
z-index: 2; z-index: 2;
padding-left: 40px; padding-inline-start: 40px;
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.6);
@ -97,8 +97,12 @@ header .search-box {
fill: #EEE; fill: #EEE;
z-index: 1; z-index: 1;
left: 16px; left: 16px;
@include rtl {
left: auto;
right: 16px;
}
svg { svg {
margin-right: 0; margin-block-end: 0;
} }
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
@ -124,12 +128,12 @@ header .search-box {
font-size: 1.8em; font-size: 1.8em;
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
padding: 14px $-l 14px 0; @include padding(14px, $-l, 14px, 0);
vertical-align: top; vertical-align: top;
line-height: 1; line-height: 1;
} }
.logo-image { .logo-image {
margin: $-xs $-s $-xs 0; @include margin($-xs, $-s, $-xs, 0);
vertical-align: top; vertical-align: top;
height: 43px; height: 43px;
} }
@ -151,8 +155,14 @@ header .search-box {
margin: 0; margin: 0;
bottom: -2px; bottom: -2px;
} }
@include rtl() {
left: $-m;
right: auto;
}
} }
@include smaller-than($l) { @include smaller-than($l) {
header .header-links { header .header-links {
display: none; display: none;
@ -169,13 +179,13 @@ header .search-box {
} }
} }
header .links a, header .dropdown-container ul li a { header .links a, header .dropdown-container ul li a {
text-align: left; text-align: start;
display: block; display: block;
padding: $-s $-m; padding: $-s $-m;
color: $text-dark; color: $text-dark;
fill: $text-dark; fill: $text-dark;
svg { svg {
margin-right: $-s; margin-inline-end: $-s;
} }
&:hover { &:hover {
background-color: #EEE; background-color: #EEE;
@ -186,7 +196,7 @@ header .search-box {
} }
header .dropdown-container { header .dropdown-container {
display: block; display: block;
padding-left: 0; padding-inline-start: 0;
} }
header .links { header .links {
display: block; display: block;
@ -215,7 +225,7 @@ header .search-box {
border-bottom: 3px solid #BBB; border-bottom: 3px solid #BBB;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
border-right: 1px solid #DDD; border-inline-end: 1px solid #DDD;
} }
&.active { &.active {
border-bottom-color: currentColor; border-bottom-color: currentColor;
@ -253,7 +263,7 @@ header .search-box {
display: none; display: none;
} }
> span:first-child { > span:first-child {
margin-right: 0; margin-block-end: 0;
} }
} }
} }
@ -269,7 +279,7 @@ header .search-box {
} }
} }
.svg-icon { .svg-icon {
margin-right: 0; margin-block-end: 0;
} }
} }
@ -282,9 +292,17 @@ header .search-box {
position: absolute; position: absolute;
z-index: 80; z-index: 80;
right: -$-m; right: -$-m;
@include rtl {
right: auto;
left: -$-m;
}
.breadcrumb-listing-search .svg-icon { .breadcrumb-listing-search .svg-icon {
position: absolute; position: absolute;
left: $-s; left: $-s;
@include rtl {
right: $-s;
left: auto;
}
top: 11px; top: 11px;
fill: #888; fill: #888;
pointer-events: none; pointer-events: none;
@ -292,10 +310,10 @@ header .search-box {
.breadcrumb-listing-entity-list { .breadcrumb-listing-entity-list {
max-height: 400px; max-height: 400px;
overflow-y: scroll; overflow-y: scroll;
text-align: left; text-align: start;
} }
input { input {
padding-left: $-xl; padding-inline-start: $-xl;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@ -337,25 +355,25 @@ header .search-box {
display: inline-block; display: inline-block;
padding: $-xs $-s; padding: $-xs $-s;
&:last-child { &:last-child {
padding-right: 0; padding-inline-end: 0;
} }
&:first-child { &:first-child {
padding-left: 0; padding-inline-start: 0;
} }
} }
.action-buttons .dropdown-container:last-child a { .action-buttons .dropdown-container:last-child a {
padding-right: 0; padding-inline-end: 0;
padding-left: $-s; padding-inline-start: $-s;
} }
.action-buttons { .action-buttons {
text-align: right; text-align: end;
&.text-left { &.text-left {
text-align: left; text-align: start;
.text-button { .text-button {
padding-right: $-m; padding-inline-end: $-m;
padding-left: 0; padding-inline-start: 0;
} }
} }
&.text-center { &.text-center {
@ -368,6 +386,6 @@ header .search-box {
padding: $-xs $-xs; padding: $-xs $-xs;
} }
.action-buttons .dropdown-container:last-child a { .action-buttons .dropdown-container:last-child a {
padding-left: $-xs; padding-inline-start: $-xs;
} }
} }

26
resources/sass/_layout.scss
View File

@ -4,10 +4,10 @@
*/ */
.container { .container {
max-width: $xxl; max-width: $xxl;
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
padding-left: $-m; padding-inline-start: $-m;
padding-right: $-m; padding-inline-end: $-m;
&.small { &.small {
max-width: 840px; max-width: 840px;
} }
@ -198,8 +198,8 @@ body.flexbox {
*/ */
.tri-layout-container { .tri-layout-container {
display: grid; display: grid;
margin-left: $-xl; margin-inline-start: $-xl;
margin-right: $-xl; margin-inline-end: $-xl;
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c"; grid-template-areas: "a b c";
grid-column-gap: $-xxl; grid-column-gap: $-xxl;
@ -223,7 +223,7 @@ body.flexbox {
". b b"; ". b b";
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr; grid-template-rows: min-content min-content 1fr;
padding-right: $-l; padding-inline-end: $-l;
} }
} }
@include between($l, $xxl) { @include between($l, $xxl) {
@ -258,11 +258,11 @@ body.flexbox {
grid-template-areas: none; grid-template-areas: none;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-column-gap: 0; grid-column-gap: 0;
padding-right: $-xs; padding-inline-end: $-xs;
padding-left: $-xs; padding-inline-start: $-xs;
.tri-layout-left-contents, .tri-layout-right-contents { .tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-m; padding-inline-start: $-m;
padding-right: $-m; padding-inline-end: $-m;
} }
.tri-layout-left > *, .tri-layout-right > * { .tri-layout-left > *, .tri-layout-right > * {
display: none; display: none;
@ -316,7 +316,7 @@ body.flexbox {
@include smaller-than($m) { @include smaller-than($m) {
.tri-layout-container { .tri-layout-container {
margin-left: 0; margin-inline-start: 0;
margin-right: 0; margin-inline-end: 0;
} }
} }

84
resources/sass/_lists.scss
View File

@ -6,7 +6,7 @@
justify-self: stretch; justify-self: stretch;
align-self: stretch; align-self: stretch;
height: auto; height: auto;
margin-right: $-l; margin-inline-end: $-l;
} }
.icon:after { .icon:after {
opacity: 0.5; opacity: 0.5;
@ -60,7 +60,7 @@
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: $-xs $-m; padding: $-xs $-m;
width: 100%; width: 100%;
text-align: left; text-align: start;
} }
.chapter-expansion-toggle:hover { .chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
@ -88,13 +88,17 @@
.sidebar-page-nav { .sidebar-page-nav {
$nav-indent: $-m; $nav-indent: $-m;
list-style: none; list-style: none;
margin: $-s 0 $-m $-xs; @include margin($-s, 0, $-m, $-xs);
position: relative; position: relative;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@include rtl {
left: auto;
right: 0;
}
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
width: 2px; width: 2px;
top: 5px; top: 5px;
@ -107,22 +111,22 @@
position: relative; position: relative;
} }
.h1 { .h1 {
padding-left: $nav-indent; padding-inline-start: $nav-indent;
} }
.h2 { .h2 {
padding-left: $nav-indent * 1.5; padding-inline-start: $nav-indent * 1.5;
} }
.h3 { .h3 {
padding-left: $nav-indent * 2; padding-inline-start: $nav-indent * 2;
} }
.h4 { .h4 {
padding-left: $nav-indent * 2.5; padding-inline-start: $nav-indent * 2.5;
} }
.h5 { .h5 {
padding-left: $nav-indent*3; padding-inline-start: $nav-indent*3;
} }
.h6 { .h6 {
padding-left: $nav-indent*3.5; padding-inline-start: $nav-indent*3.5;
} }
.current-heading { .current-heading {
font-weight: bold; font-weight: bold;
@ -139,15 +143,19 @@
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2; box-shadow: 0 0 0 6px #F2F2F2;
z-index: 1; z-index: 1;
@include rtl {
left: auto;
right: -2px;
}
} }
} }
// Sidebar list // Sidebar list
.book-tree .sidebar-page-list { .book-tree .sidebar-page-list {
list-style: none; list-style: none;
margin: $-xs -$-s 0 -$-s; @include margin($-xs, -$-s, 0, -$-s);
padding-left: 0; padding-inline-start: 0;
padding-right: 0; padding-inline-end: 0;
position: relative; position: relative;
&:after, .sub-menu:after { &:after, .sub-menu:after {
@ -157,14 +165,18 @@
left: $-m; left: $-m;
top: 1rem; top: 1rem;
bottom: 1rem; bottom: 1rem;
border-left: 4px solid rgba(0, 0, 0, 0.1); border-inline-start: 4px solid rgba(0, 0, 0, 0.1);
z-index: 0; z-index: 0;
@include rtl {
left: auto;
right: $-m;
}
} }
ul { ul {
list-style: none; list-style: none;
padding-left: 1rem; padding-inline-start: 1rem;
padding-right: 0; padding-inline-end: 0;
} }
.entity-list-item { .entity-list-item {
@ -183,7 +195,7 @@
} }
.entity-list-item.no-hover { .entity-list-item.no-hover {
margin-top: -$-xs; margin-top: -$-xs;
padding-right: 0; padding-inline-end: 0;
} }
.entity-list-item-name { .entity-list-item-name {
font-size: 1em; font-size: 1em;
@ -192,10 +204,10 @@
.chapter-child-menu { .chapter-child-menu {
font-size: .8rem; font-size: .8rem;
margin-top: -.2rem; margin-top: -.2rem;
margin-left: -1rem; margin-inline-start: -1rem;
} }
[chapter-toggle] { [chapter-toggle] {
padding-left: .7rem; padding-inline-start: .7rem;
padding-bottom: .2rem; padding-bottom: .2rem;
} }
.entity-list-item .icon { .entity-list-item .icon {
@ -218,7 +230,7 @@
.chapter-child-menu { .chapter-child-menu {
ul.sub-menu { ul.sub-menu {
display: none; display: none;
padding-left: 0; padding-inline-start: 0;
position: relative; position: relative;
} }
[chapter-toggle].open + .sub-menu { [chapter-toggle].open + .sub-menu {
@ -254,10 +266,10 @@
justify-content: space-between; justify-content: space-between;
} }
.sort-box-options .button { .sort-box-options .button {
margin-left: 0; margin-inline-start: 0;
} }
.sortable-page-list { .sortable-page-list {
margin-left: 0; margin-inline-start: 0;
padding: 0; padding: 0;
.entity-list-item > span:first-child { .entity-list-item > span:first-child {
align-self: flex-start; align-self: flex-start;
@ -267,12 +279,12 @@
flex: 1; flex: 1;
} }
> ul { > ul {
margin-left: 0; margin-inline-start: 0;
} }
ul { ul {
margin-bottom: $-m; margin-bottom: $-m;
margin-top: 0; margin-top: 0;
padding-left: $-m; padding-inline-start: $-m;
} }
li { li {
border: 1px solid #DDD; border: 1px solid #DDD;
@ -280,7 +292,7 @@
min-height: 38px; min-height: 38px;
} }
li.text-page, li.text-chapter { li.text-page, li.text-chapter {
border-left: 2px solid currentColor; border-inline-start: 2px solid currentColor;
} }
li:first-child { li:first-child {
margin-top: $-xs; margin-top: $-xs;
@ -320,7 +332,7 @@ ul.pagination {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin: $-m 0; margin: $-m 0;
padding-left: 1px; padding-inline-start: 1px;
li { li {
float: left; float: left;
} }
@ -338,7 +350,7 @@ ul.pagination {
display: block; display: block;
padding: $-xxs $-s; padding: $-xxs $-s;
border: 1px solid #CCC; border: 1px solid #CCC;
margin-left: -1px; margin-inline-start: -1px;
user-select: none; user-select: none;
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
@ -402,13 +414,13 @@ ul.pagination {
color: #666; color: #666;
} }
> span:first-child { > span:first-child {
margin-right: $-m; margin-inline-end: $-m;
flex-basis: 1.88em; flex-basis: 1.88em;
flex: none; flex: none;
} }
> span:last-child { > span:last-child {
flex: 1; flex: 1;
text-align: left; text-align: start;
} }
&:not(.no-hover) { &:not(.no-hover) {
cursor: pointer; cursor: pointer;
@ -438,7 +450,7 @@ ul.pagination {
position: relative; position: relative;
top: 1px; top: 1px;
svg { svg {
margin-right: 0; margin-inline-end: 0;
} }
} }
@ -460,7 +472,7 @@ ul.pagination {
text-overflow: ellipsis; text-overflow: ellipsis;
height: 2.5em; height: 2.5em;
overflow: hidden; overflow: hidden;
text-align: left; text-align: start;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
@ -474,7 +486,7 @@ ul.pagination {
background-position: 50% 50%; background-position: 50% 50%;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
margin-right: $-l; margin-inline-end: $-l;
&.entity-list-item-image-wide { &.entity-list-item-image-wide {
width: 220px; width: 220px;
@ -484,7 +496,7 @@ ul.pagination {
color: #FFF; color: #FFF;
fill: #FFF; fill: #FFF;
font-size: 1.66rem; font-size: 1.66rem;
margin-right: 0; margin-inline-end: 0;
position: absolute; position: absolute;
bottom: $-xs; bottom: $-xs;
left: $-xs; left: $-xs;
@ -550,7 +562,7 @@ ul.pagination {
padding: $-xs 0; padding: $-xs 0;
color: #555; color: #555;
fill: #555; fill: #555;
text-align: left !important; text-align: start !important;
&.wide { &.wide {
min-width: 220px; min-width: 220px;
} }
@ -577,14 +589,14 @@ ul.pagination {
outline-offset: -2px; outline-offset: -2px;
} }
svg { svg {
margin-right: $-s; margin-inline-end: $-s;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
} }
} }
button { button {
width: 100%; width: 100%;
text-align: left; text-align: start;
} }
li.border-bottom { li.border-bottom {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@ -615,7 +627,7 @@ ul.pagination {
color: #FFF; color: #FFF;
fill: #FFF; fill: #FFF;
font-size: 2rem; font-size: 2rem;
margin-right: 0; margin-inline-end: 0;
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 6px; left: 6px;

24
resources/sass/_mixins.scss
View File

@ -8,3 +8,27 @@
@mixin between($min, $max) { @mixin between($min, $max) {
@media screen and (min-width: $min) and (max-width: $max) { @content; } @media screen and (min-width: $min) and (max-width: $max) { @content; }
} }
// Padding shorthand using logical operators to better support RTL.
@mixin padding($t, $r, $b, $l) {
padding-block-start: $t;
padding-block-end: $b;
padding-inline-start: $l;
padding-inline-end: $r;
}
// Margin shorthand using logical operators to better support RTL.
@mixin margin($t, $r, $b, $l) {
margin-block-start: $t;
margin-block-end: $b;
margin-inline-start: $l;
margin-inline-end: $r;
}
// Create a RTL specific style block.
// Mostly used as a patch until browser support improves for logical properties.
@mixin rtl() {
html[dir=rtl] & {
@content;
}
}

50
resources/sass/_pages.scss
View File

@ -59,7 +59,7 @@ body.mce-fullscreen, body.markdown-fullscreen {
text-align: center; text-align: center;
svg { svg {
fill: #FFF; fill: #FFF;
margin-right: 0; margin-inline-end: 0;
} }
} }
@ -174,14 +174,14 @@ body.mce-fullscreen, body.markdown-fullscreen {
bottom: -9px; bottom: -9px;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: -8px; margin-inline-start: -8px;
content: ''; content: '';
display: block; display: block;
background-color:#FFF; background-color:#FFF;
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: 50% 50%; transform-origin: 50% 50%;
border-bottom: 1px solid #CCC; border-inline-startom: 1px solid #CCC;
border-right: 1px solid #CCC; border-inline-end: 1px solid #CCC;
z-index: 56; z-index: 56;
} }
input, button, a { input, button, a {
@ -255,7 +255,7 @@ body.mce-fullscreen, body.markdown-fullscreen {
} }
.tabs { .tabs {
display: block; display: block;
border-right: 1px solid #DDD; border-inline-end: 1px solid #DDD;
width: 48px; width: 48px;
flex: 0 1 auto; flex: 0 1 auto;
} }
@ -294,8 +294,8 @@ body.mce-fullscreen, body.markdown-fullscreen {
width: 100%; width: 100%;
min-width: 50px; min-width: 50px;
} }
.tags td, .tag-table > div > div > div { .tags td, .inline-start-table > div > div > div {
padding-right: $-s; padding-inline-end: $-s;
padding-top: $-s; padding-top: $-s;
position: relative; position: relative;
} }
@ -319,42 +319,6 @@ body.mce-fullscreen, body.markdown-fullscreen {
display: none; display: none;
} }
.tag-display {
position: relative;
table {
width: 100%;
margin: 0;
padding: 0;
}
tr:first-child td {
padding-top: 0;
}
.heading th {
padding: $-xs $-s;
color: rgba(100, 100, 100, 0.7);
border: 0;
font-weight: 400;
}
td {
border: 0;
border-bottom: 1px solid #EEE;
padding: $-xs $-s;
color: #444;
}
tr td:first-child {
padding-left:0;
}
.tag-value {
color: #888;
}
tr:last-child td {
border-bottom: none;
}
.tag {
padding: $-s;
}
}
.suggestion-box { .suggestion-box {
position: absolute; position: absolute;
background-color: #FFF; background-color: #FFF;

8
resources/sass/_spacing.scss
View File

@ -7,8 +7,8 @@
#{$prop}: $size !important; #{$prop}: $size !important;
} }
.#{$propLetter}x-#{$sizeLetter} { .#{$propLetter}x-#{$sizeLetter} {
#{$prop}-left: $size !important; #{$prop}-inline-start: $size !important;
#{$prop}-right: $size !important; #{$prop}-inline-end: $size !important;
} }
.#{$propLetter}y-#{$sizeLetter} { .#{$propLetter}y-#{$sizeLetter} {
#{$prop}-top: $size !important; #{$prop}-top: $size !important;
@ -18,13 +18,13 @@
#{$prop}-top: $size !important; #{$prop}-top: $size !important;
} }
.#{$propLetter}r-#{$sizeLetter} { .#{$propLetter}r-#{$sizeLetter} {
#{$prop}-right: $size !important; #{$prop}-inline-end: $size !important;
} }
.#{$propLetter}b-#{$sizeLetter} { .#{$propLetter}b-#{$sizeLetter} {
#{$prop}-bottom: $size !important; #{$prop}-bottom: $size !important;
} }
.#{$propLetter}l-#{$sizeLetter} { .#{$propLetter}l-#{$sizeLetter} {
#{$prop}-left: $size !important; #{$prop}-inline-start: $size !important;
} }
} }
} }

4
resources/sass/_tables.scss
View File

@ -23,7 +23,7 @@ table.table {
border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} }
th, td { th, td {
text-align: left; text-align: start;
border: none; border: none;
padding: $-s $-s; padding: $-s $-s;
vertical-align: middle; vertical-align: middle;
@ -36,7 +36,7 @@ table.table {
background-color: #EEE; background-color: #EEE;
} }
.text-right { .text-right {
text-align: right; text-align: end;
} }
.text-center { .text-center {
text-align: center; text-align: center;

10
resources/sass/_text.scss
View File

@ -313,10 +313,10 @@ li > ol, li > ul {
text-align: center; text-align: center;
} }
.text-left { .text-left {
text-align: left; text-align: start;
} }
.text-right { .text-right {
text-align: right; text-align: end;
} }
@each $sizeLetter, $size in $screen-sizes { @each $sizeLetter, $size in $screen-sizes {
@ -325,10 +325,10 @@ li > ol, li > ul {
text-align: center; text-align: center;
} }
.text-#{$sizeLetter}-left { .text-#{$sizeLetter}-left {
text-align: left; text-align: start;
} }
.text-#{$sizeLetter}-right { .text-#{$sizeLetter}-right {
text-align: right; text-align: end;
} }
} }
} }
@ -384,6 +384,6 @@ span.sep {
display: inline-block; display: inline-block;
position: relative; position: relative;
bottom: -0.105em; bottom: -0.105em;
margin-right: $-xs; margin-inline-end: $-xs;
pointer-events: none; pointer-events: none;
} }

8
resources/sass/print-styles.scss
View File

@ -20,8 +20,8 @@ html, body {
.tri-layout-container { .tri-layout-container {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "b"; grid-template-areas: "b";
margin-left: 0; margin-inline-start: 0;
margin-right: 0; margin-inline-end: 0;
display: block; display: block;
} }
@ -30,6 +30,6 @@ html, body {
} }
.content-wrap.card { .content-wrap.card {
padding-left: 0; padding-inline-start: 0;
padding-right: 0; padding-inline-end: 0;
} }

18
resources/sass/styles.scss
View File

@ -74,7 +74,7 @@ $loadingSize: 10px;
animation-duration: 1.4s; animation-duration: 1.4s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.62, .28, .23, .99); animation-timing-function: cubic-bezier(.62, .28, .23, .99);
margin-right: 4px; margin-inline-end: 4px;
background-color: var(--color-page); background-color: var(--color-page);
animation-delay: 0.3s; animation-delay: 0.3s;
} }
@ -89,7 +89,7 @@ $loadingSize: 10px;
animation-delay: 0.6s; animation-delay: 0.6s;
} }
> span { > span {
margin-left: $-s; margin-inline-start: $-s;
font-style: italic; font-style: italic;
color: #888; color: #888;
vertical-align: top; vertical-align: top;
@ -110,7 +110,7 @@ $btt-size: 40px;
svg { svg {
width: $btt-size / 1.5; width: $btt-size / 1.5;
height: $btt-size / 1.5; height: $btt-size / 1.5;
margin-right: 4px; margin-inline-end: 4px;
} }
width: $btt-size; width: $btt-size;
height: $btt-size; height: $btt-size;
@ -138,7 +138,7 @@ $btt-size: 40px;
input, button { input, button {
border-radius: 0; border-radius: 0;
border: 1px solid #DDD; border: 1px solid #DDD;
margin-left: -1px; margin-inline-start: -1px;
} }
input { input {
flex: 5; flex: 5;
@ -177,8 +177,8 @@ $btt-size: 40px;
overflow-y: scroll; overflow-y: scroll;
height: 400px; height: 400px;
background-color: #EEEEEE; background-color: #EEEEEE;
margin-right: 0; margin-inline-end: 0;
margin-left: 0; margin-inline-start: 0;
} }
.entity-list-item { .entity-list-item {
background-color: #FFF; background-color: #FFF;
@ -252,7 +252,7 @@ $btt-size: 40px;
} }
.list-sort { .list-sort {
display: inline-grid; display: inline-grid;
margin-left: $-s; margin-inline-start: $-s;
grid-template-columns: minmax(120px, max-content) 40px; grid-template-columns: minmax(120px, max-content) 40px;
font-size: 0.9rem; font-size: 0.9rem;
border: 2px solid #DDD; border: 2px solid #DDD;
@ -264,14 +264,14 @@ $btt-size: 40px;
color: #555; color: #555;
} }
.list-sort-type { .list-sort-type {
text-align: left; text-align: start;
} }
.list-sort-type, .list-sort-dir { .list-sort-type, .list-sort-dir {
padding: $-xs $-s; padding: $-xs $-s;
cursor: pointer; cursor: pointer;
} }
.list-sort-dir { .list-sort-dir {
border-left: 2px solid #DDD; border-inline-start: 2px solid #DDD;
fill: #888; fill: #888;
.svg-icon { .svg-icon {
transition: transform ease-in-out 120ms; transition: transform ease-in-out 120ms;

2
resources/views/auth/forms/login/saml2.blade.php
View File

@ -4,7 +4,7 @@
<div> <div>
<button id="saml-login" class="button outline block svg"> <button id="saml-login" class="button outline block svg">
@icon('saml2') @icon('saml2')
{{ trans('auth.log_in_with', ['socialDriver' => config('saml2.name')]) }} <span>{{ trans('auth.log_in_with', ['socialDriver' => config('saml2.name')]) }}</span>
</button> </button>
</div> </div>

2
resources/views/auth/login.blade.php
View File

@ -17,7 +17,7 @@
<div> <div>
<a id="social-login-{{$driver}}" class="button outline block svg" href="{{ url("/login/service/" . $driver) }}"> <a id="social-login-{{$driver}}" class="button outline block svg" href="{{ url("/login/service/" . $driver) }}">
@icon('auth/' . $driver) @icon('auth/' . $driver)
{{ trans('auth.log_in_with', ['socialDriver' => $name]) }} <span>{{ trans('auth.log_in_with', ['socialDriver' => $name]) }}</span>
</a> </a>
</div> </div>
@endforeach @endforeach

2
resources/views/auth/register.blade.php
View File

@ -44,7 +44,7 @@
<div> <div>
<a id="social-register-{{$driver}}" class="button block outline svg" href="{{ url("/register/service/" . $driver) }}"> <a id="social-register-{{$driver}}" class="button block outline svg" href="{{ url("/register/service/" . $driver) }}">
@icon('auth/' . $driver) @icon('auth/' . $driver)
{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }} <span>{{ trans('auth.sign_up_with', ['socialDriver' => $name]) }}</span>
</a> </a>
</div> </div>
@endforeach @endforeach

2
resources/views/base.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ config('app.lang') }}" class="@yield('body-class')"> <html lang="{{ config('app.lang') }}" dir="{{ config('app.rtl') ? 'rtl' : 'ltr' }}" class="@yield('body-class')">
<head> <head>
<title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title> <title>{{ isset($pageTitle) ? $pageTitle . ' | ' : '' }}{{ setting('app-name') }}</title>

16
tests/LanguageTest.php
View File

@ -11,7 +11,7 @@ class LanguageTest extends TestCase
public function setUp(): void public function setUp(): void
{ {
parent::setUp(); parent::setUp();
$this->langs = array_diff(scandir(resource_path('lang')), ['..', '.', 'check.php', 'format.php']); $this->langs = array_diff(scandir(resource_path('lang')), ['..', '.']);
} }
public function test_locales_config_key_set_properly() public function test_locales_config_key_set_properly()
@ -22,6 +22,20 @@ class LanguageTest extends TestCase
$this->assertEquals(implode(':', $configLocales), implode(':', $this->langs), 'app.locales configuration variable does not match those found in lang files'); $this->assertEquals(implode(':', $configLocales), implode(':', $this->langs), 'app.locales configuration variable does not match those found in lang files');
} }
// Not part of standard phpunit test runs since we sometimes expect non-added langs.
public function do_test_locales_all_have_language_dropdown_entry()
{
$dropdownLocales = array_keys(trans('settings.language_select', [], 'en'));
sort($dropdownLocales);
sort($this->langs);
$diffs = array_diff($this->langs, $dropdownLocales);
if (count($diffs) > 0) {
$diffText = implode(',', $diffs);
$this->addWarning("Languages: {$diffText} found in files but not in language select dropdown.");
}
$this->assertTrue(true);
}
public function test_correct_language_if_not_logged_in() public function test_correct_language_if_not_logged_in()
{ {
$loginReq = $this->get('/login'); $loginReq = $this->get('/login');