Verified Commit 27bc9586 authored by Chocobozzz's avatar Chocobozzz
Browse files

Bidi support

parent 8beea2d3
Pipeline #422042 failed with stages
in 14 minutes and 12 seconds
...@@ -163,6 +163,14 @@ and the web server is automatically restarted. ...@@ -163,6 +163,14 @@ and the web server is automatically restarted.
$ npm run dev $ npm run dev
``` ```
### RTL layout
To test RTL layout using `ar` locale:
```
$ npm run dev -- --ar-locale
```
### Testing ### Testing
Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves
......
...@@ -202,6 +202,21 @@ ...@@ -202,6 +202,21 @@
} }
] ]
}, },
"ar-locale": {
"localize": ["ar"],
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"hmr": { "hmr": {
"localize": false, "localize": false,
"budgets": [ "budgets": [
...@@ -247,6 +262,9 @@ ...@@ -247,6 +262,9 @@
"hmr": { "hmr": {
"browserTarget": "PeerTube:build:hmr" "browserTarget": "PeerTube:build:hmr"
}, },
"ar-locale": {
"browserTarget": "PeerTube:build:ar-locale"
},
"e2e": { "e2e": {
"browserTarget": "PeerTube:build:e2e", "browserTarget": "PeerTube:build:e2e",
"proxyConfig": "e2e/proxy.config.json" "proxyConfig": "e2e/proxy.config.json"
......
...@@ -28,6 +28,10 @@ ...@@ -28,6 +28,10 @@
"target": "http://localhost:9000", "target": "http://localhost:9000",
"secure": false "secure": false
}, },
"/client/locales": {
"target": "http://localhost:9000",
"secure": false
},
"/!(client)**": { "/!(client)**": {
"target": "http://localhost:3000/client/index.html", "target": "http://localhost:3000/client/index.html",
"secure": false, "secure": false,
......
...@@ -23,9 +23,10 @@ ...@@ -23,9 +23,10 @@
margin-bottom: 20px; margin-bottom: 20px;
.badge { .badge {
@include margin-right(5px);
font-size: 12px; font-size: 12px;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-right: 5px;
&.category { &.category {
background-color: pvar(--mainColor); background-color: pvar(--mainColor);
...@@ -66,9 +67,10 @@ ...@@ -66,9 +67,10 @@
&:hover, &:hover,
&:active { &:active {
&::after { &::after {
@include margin-left(0.2em);
content: '#'; content: '#';
display: inline-block; display: inline-block;
margin-left: 0.2em;
} }
} }
......
...@@ -22,8 +22,9 @@ ...@@ -22,8 +22,9 @@
text-align: center; text-align: center;
li { li {
@include margin-right(10px);
display: inline-block; display: inline-block;
margin-right: 10px;
} }
} }
} }
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
my-actor-avatar { my-actor-avatar {
@include actor-avatar-size(75px); @include actor-avatar-size(75px);
@include margin-right(15px);
grid-column: 1; grid-column: 1;
grid-row: 1 / 3; grid-row: 1 / 3;
margin-right: 15px;
} }
a { a {
...@@ -51,13 +51,14 @@ ...@@ -51,13 +51,14 @@
} }
.actor-counters { .actor-counters {
@include margin-left(15px);
grid-row: 1; grid-row: 1;
grid-column: 3; grid-column: 3;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-size: 16px; font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 15px;
} }
.actor-counters > *:not(:last-child)::after { .actor-counters > *:not(:last-child)::after {
...@@ -92,7 +93,7 @@ my-subscribe-button { ...@@ -92,7 +93,7 @@ my-subscribe-button {
overflow: hidden; overflow: hidden;
my-video-miniature { my-video-miniature {
margin-right: 15px; @include margin-right(15px);
min-width: $video-thumbnail-medium-width; min-width: $video-thumbnail-medium-width;
max-width: $video-thumbnail-medium-width; max-width: $video-thumbnail-medium-width;
} }
......
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
max-width: $max-channels-width; max-width: $max-channels-width;
simple-search-input { simple-search-input {
margin-left: auto; @include margin-left(auto);
} }
} }
my-user-moderation-dropdown, my-user-moderation-dropdown,
.badge { .badge {
margin-left: 10px; @include margin-left(10px);
position: relative; position: relative;
top: 3px; top: 3px;
......
...@@ -14,6 +14,7 @@ form { ...@@ -14,6 +14,7 @@ form {
input[type=text] { input[type=text] {
@include peertube-input-text($form-base-input-width); @include peertube-input-text($form-base-input-width);
display: block; display: block;
} }
...@@ -53,13 +54,14 @@ my-select-checkbox { ...@@ -53,13 +54,14 @@ my-select-checkbox {
input[type=submit] { input[type=submit] {
@include peertube-button; @include peertube-button;
@include orange-button; @include orange-button;
@include margin-left(auto);
display: flex; display: flex;
margin-left: auto;
+ .form-error { + .form-error {
@include margin-left(5px);
display: inline; display: inline;
margin-left: 5px;
} }
} }
......
...@@ -18,6 +18,6 @@ a { ...@@ -18,6 +18,6 @@ a {
.action-cell { .action-cell {
my-button:first-child { my-button:first-child {
margin-right: 10px; @include margin-right(10px);
} }
} }
@import 'mixins'; @import 'mixins';
.form-sub-title { .form-sub-title {
@include margin-right(30px);
flex-grow: 0; flex-grow: 0;
margin-right: 30px;
} }
.badge { .badge {
......
...@@ -25,7 +25,7 @@ a { ...@@ -25,7 +25,7 @@ a {
.select-filter-block { .select-filter-block {
&:not(:last-child) { &:not(:last-child) {
margin-right: 10px; @include margin-right(10px);
} }
label { label {
......
@import 'mixins'; @import 'mixins';
my-feed { my-feed {
margin-left: 5px; @include margin-left(5px);
display: inline-block; display: inline-block;
width: 15px; width: 15px;
} }
......
...@@ -18,12 +18,13 @@ ...@@ -18,12 +18,13 @@
margin-bottom: 15px; margin-bottom: 15px;
my-global-icon { my-global-icon {
margin-right: 5px; @include margin-right(5px);
} }
} }
.badge { .badge {
@include margin-left(15px);
font-size: 13px; font-size: 13px;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-left: 15px;
} }
...@@ -12,8 +12,9 @@ ...@@ -12,8 +12,9 @@
margin-bottom: 10px; margin-bottom: 10px;
.plugin-name { .plugin-name {
@include margin-right(10px);
font-size: 16px; font-size: 16px;
margin-right: 10px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
...@@ -22,7 +23,7 @@ ...@@ -22,7 +23,7 @@
} }
.plugin-icon { .plugin-icon {
margin-left: 10px; @include margin-left(10px);
my-global-icon { my-global-icon {
@include apply-svg-color(pvar(--greyForegroundColor)); @include apply-svg-color(pvar(--greyForegroundColor));
...@@ -34,11 +35,11 @@ ...@@ -34,11 +35,11 @@
} }
.buttons { .buttons {
margin-left: auto; @include margin-left(auto);
width: max-content; width: max-content;
> *:not(:last-child) { > *:not(:last-child) {
margin-right: 10px; @include margin-right(10px);
} }
} }
} }
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
.select-filter-block { .select-filter-block {
&:not(:last-child) { &:not(:last-child) {
margin-right: 10px; @include margin-right(10px);
} }
label { label {
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
} }
td .glyphicon { td .glyphicon {
margin-right: 10px; @include margin-right(10px);
} }
pre { pre {
......
...@@ -19,8 +19,9 @@ ...@@ -19,8 +19,9 @@
} }
.log-level { .log-level {
@include margin-right(5px);
font-weight: $font-semibold; font-weight: $font-semibold;
margin-right: 5px;
} }
.log-by { .log-by {
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
my-button, my-button,
.peertube-select-container, .peertube-select-container,
ng-select { ng-select {
margin-left: 10px; @include margin-left(10px);
} }
} }
...@@ -65,8 +66,9 @@ ...@@ -65,8 +66,9 @@
.peertube-select-container, .peertube-select-container,
ng-select, ng-select,
my-button { my-button {
@include margin-left(0 !important);
width: 100% !important; width: 100% !important;
margin-left: 0 !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
...@@ -84,8 +86,9 @@ ...@@ -84,8 +86,9 @@
.peertube-select-container, .peertube-select-container,
ng-select, ng-select,
my-button { my-button {
@include margin-left(0 !important);
width: 100% !important; width: 100% !important;
margin-left: 0 !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
......
@import '_variables';
@import '_mixins';
.form-sub-title { .form-sub-title {
@include margin-right(30px);
flex-grow: 0; flex-grow: 0;
margin-right: 30px;
} }
...@@ -24,9 +24,10 @@ tr.banned > td { ...@@ -24,9 +24,10 @@ tr.banned > td {
} }
.user-table-primary-text .glyphicon { .user-table-primary-text .glyphicon {
@include margin-left(0.1rem);
font-size: 80%; font-size: 80%;
color: #808080; color: #808080;
margin-left: 0.1rem;
} }
p-tableCheckbox { p-tableCheckbox {
......
...@@ -14,7 +14,7 @@ input[type=email] { ...@@ -14,7 +14,7 @@ input[type=email] {
} }
.modal-body { .modal-body {
text-align: left; text-align: start;
.forgot-password-instructions { .forgot-password-instructions {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -55,13 +55,14 @@ input[type=email] { ...@@ -55,13 +55,14 @@ input[type=email] {
} }
.login-form-and-externals { .login-form-and-externals {
@include margin-left(10px);
@include margin-right(10px);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 15px; font-size: 15px;
max-width: 450px; max-width: 450px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 10px;
margin-right: 10px;
form { form {
margin: 0; margin: 0;
...@@ -125,11 +126,12 @@ input[type=email] { ...@@ -125,11 +126,12 @@ input[type=email] {
} }
.instance-information { .instance-information {
@include margin-left(10px);
@include margin-right(10px);
max-width: 600px; max-width: 600px;
min-width: 350px; min-width: 350px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 10px;
margin-right: 10px;
} }
.terms-anchor { .terms-anchor {
...@@ -146,9 +148,10 @@ input[type=email] { ...@@ -146,9 +148,10 @@ input[type=email] {
.login-form-and-externals, .login-form-and-externals,
.instance-information { .instance-information {
@include margin-left(0);
@include margin-right(0);
width: 100%; width: 100%;
margin-left: 0;
margin-right: 0;
max-width: 450px; max-width: 450px;
min-width: unset; min-width: unset;
align-self: center; align-self: center;
......
...@@ -17,12 +17,13 @@ label { ...@@ -17,12 +17,13 @@ label {
input[type=submit] { input[type=submit] {
@include peertube-button;