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
......@@ -38,7 +38,7 @@ my-user-notifications {
}
.peertube-select-container {
margin-left: 0 !important;
@include margin-left(0 !important);
}
}
}
......
......@@ -43,7 +43,7 @@ input {
&[type=submit] {
@include peertube-button;
@include orange-button;
margin-left: auto;
@include margin-left(auto);
}
}
......
......@@ -15,7 +15,7 @@ input[type=text] {
}
my-edit-button {
margin-right: 10px;
@include margin-right(10px);
}
.video-channel {
......@@ -25,8 +25,7 @@ my-edit-button {
my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
@include margin-right(10px);
}
}
......@@ -49,9 +48,10 @@ my-edit-button {
}
.video-channel-name {
@include margin-left(5px);
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
.video-channel-buttons {
......@@ -77,7 +77,7 @@ my-edit-button {
padding-bottom: 10px;
img {
margin-right: 0;
@include margin-right(0);
}
.video-channel-buttons {
......@@ -97,7 +97,7 @@ my-edit-button {
}
.video-channel-name {
margin-left: 0 !important;
@include margin-left(0 !important);
}
}
......
......@@ -24,11 +24,11 @@
}
.history-switch {
grid-column: 3;
@include margin-left(auto);
@include margin-right(15px);
grid-column: 3;
display: flex;
margin-left: auto;
margin-right: 15px;
label {
margin: 0 0 0 5px;
......
......@@ -16,10 +16,10 @@
$image-height: 45px;
@include miniature-thumbnail;
@include margin-right(0.5rem);
height: $image-height;
width: #{(16/9) * $image-height};
margin-right: 0.5rem;
border-radius: 2px;
border: 0;
background: transparent;
......@@ -59,9 +59,10 @@
line-height: 1rem;
div .glyphicon {
@include margin-left(0.1rem);
font-size: 80%;
color: #808080;
margin-left: 0.1rem;
}
div + div {
......
......@@ -11,7 +11,7 @@ input[type=text] {
> my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
@include margin-right(10px);
}
}
......@@ -32,9 +32,10 @@ input[type=text] {
}
.video-channel-name {
@include margin-left(5px);
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
}
}
......@@ -50,7 +51,7 @@ input[type=text] {
}
my-actor-avatar {
margin-left: 7px;
@include margin-left(7px);
display: inline-block;
vertical-align: top;
}
......@@ -78,6 +79,6 @@ input[type=text] {
}
img {
margin-right: 0;
@include margin-right(0);
}
}
......@@ -8,9 +8,10 @@
}
.playlist-info {
@include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
grid-column: 1;
background-color: pvar(--submenuBackgroundColor);
margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom;
padding: 15px;
......@@ -34,7 +35,7 @@
@include grey-button;
@include apply-svg-color(pvar(--actionButtonColor));
margin-right: 10px;
@include margin-right(10px);
}
}
......@@ -91,8 +92,8 @@ my-video-playlist-miniature {
my-video-playlist-miniature,
.playlist-buttons {
margin-left: auto;
margin-right: auto;
@include margin-left(auto);
@include margin-right(auto);
}
::ng-deep my-video-playlist-element-miniature {
......@@ -102,7 +103,7 @@ my-video-playlist-miniature {
}
.position {
margin-right: 5px !important;
@include margin-right(5px !important);
}
}
}
......@@ -18,8 +18,9 @@ input[type=text] {
}
.video-playlist-buttons {
@include margin-left(10px);
display: flex;
margin-left: 10px;
align-self: flex-end;
}
......@@ -33,7 +34,7 @@ my-video-playlist-miniature {
}
my-delete-button {
margin-right: 10px;
@include margin-right(10px);
}
@include on-small-main-col {
......@@ -46,8 +47,9 @@ my-delete-button {
}
.video-playlist-buttons {
@include margin-left(auto);
margin-top: 10px;
margin-left: auto;
}
}
......@@ -62,6 +64,6 @@ my-delete-button {
}
.action-button {
margin-left: 0;
@include margin-left(0);
}
}
......@@ -7,7 +7,7 @@ input[type=text] {
.peertube-select-container {
@include peertube-select-container(auto);
margin-left: 0.5rem;
@include margin-left(0.5rem);
}
h1 {
......@@ -20,7 +20,7 @@ h1 {
@include button-with-icon(18px, 3px, -1px);
&:not(:last-child) {
margin-right: 10px;
@include margin-right(10px);
}
}
}
......@@ -38,13 +38,14 @@ h1 {
}
.action-button {
@include margin-left(10px);
display: flex;
margin-left: 10px;
align-self: flex-end;
}
my-edit-button {
margin-right: 10px;
@include margin-right(10px);
}
@include on-small-main-col {
......@@ -58,8 +59,9 @@ my-edit-button {
}
.action-button {
@include margin-left(auto);
margin-top: 10px;
margin-left: auto;
}
}
......@@ -72,11 +74,11 @@ my-edit-button {
margin-bottom: 12px;
}
.peertube-select-container {
margin-left: 0;
@include margin-left(0);
}
}
.action-button {
margin-left: 0;
@include margin-left(0);
}
}
......@@ -2,9 +2,10 @@
@import '_mixins';
.root {
@include margin-left(auto);
@include margin-right(auto);
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 150px;
display: flex;
......@@ -12,20 +13,21 @@
flex-direction: column-reverse;
.box {
text-align: left;
text-align: start;
font-size: 120%;
padding: 0 15px;
}
img {
margin-left: auto;
@include margin-left(auto);
width: 220px;
height: auto;
}
@media screen and (max-width: $mobile-view) {
img {
margin-right: auto;
@include margin-right(auto);
}
}
......
......@@ -12,9 +12,9 @@ form {
.peertube-radio-container {
@include peertube-radio-container;
@include margin-right(30px);
display: inline-block;
margin-right: 30px;
}
.peertube-select-container {
......@@ -38,19 +38,18 @@ input[type=submit] {
}
.submit-button {
text-align: right;
text-align: end;
}
.reset-button {
@include peertube-button;
@include margin-right(1rem);
font-weight: $font-semibold;
display: inline-block;
padding: 0 10px;
white-space: nowrap;
background: transparent;
margin-right: 1rem;
}
.reset-button-small {
......
......@@ -37,10 +37,10 @@
.icon.icon-filter {
@include icon(20px);
@include margin-right(5px);
position: relative;
top: -1px;
margin-right: 5px;
background-image: url('../../assets/images/feather/filter.svg');
}
}
......@@ -78,9 +78,10 @@
}
.video-channel-name {
@include margin-left(5px);
font-size: $video-miniature-row-info-font-size;
color: pvar(--greyForegroundColor);
margin-left: 5px;
}
// Use the same breakpoints than in video-miniature
......
......@@ -5,8 +5,8 @@ $grey-color: #9CA3AB;
$index-block-height: 32px;
.container {
padding-left: 0;
padding-right: 0;
@include padding-left(0);
@include padding-right(0);
max-width: unset !important;
}
......
......@@ -8,7 +8,7 @@
justify-content: center;
.playlist-wrapper {
margin-right: 15px;
@include margin-right(15px);
padding-bottom: 15px;
}
}
......@@ -24,9 +24,9 @@
}
.playlists {
justify-content: left;
@include margin-left(pvar(--horizontalMarginContent) !important);
@include margin-right(pvar(--horizontalMarginContent) !important);
margin-left: pvar(--horizontalMarginContent) !important;
margin-right: pvar(--horizontalMarginContent) !important;
justify-content: left;
}
}
......@@ -71,12 +71,12 @@
flex-wrap: wrap;
> *:not(:last-child) {
margin-right: 15px;
@include margin-right(15px);
}
}
.channel-buttons.right {
margin-left: 45px;
@include margin-left(45px);
}
// Only used by mobile
......@@ -85,7 +85,7 @@
}
.owner-card {
margin-left: 105px;
@include margin-left(105px);
grid-column: 2;
// Takes all the column
grid-row: 1 / 3;
......@@ -112,7 +112,7 @@
}
.actor-info {
margin-left: 15px;
@include margin-left(15px);
}
h4 {
......@@ -160,8 +160,9 @@
}
.owner-card {
@include margin-left(60px);
grid-row: 2;
margin-left: 60px;
}
}
......@@ -215,8 +216,9 @@
padding: 0;
.avatar-row {
@include margin-right(30px);
grid-column: 1;
margin-right: 30px;
}
.owner-description {
......@@ -233,7 +235,7 @@
.view-account.complete {
display: block;
text-align: right;
text-align: end;
margin-top: 10px;
color: pvar(--mainColor);
}
......
......@@ -52,7 +52,7 @@ my-peertube-checkbox {
}
.captions-header {
text-align: right;
text-align: end;
margin-bottom: 1rem;
}
......@@ -77,10 +77,10 @@ my-peertube-checkbox {
}
.caption-entry-label {
@include margin-right(20px);
font-size: 15px;
font-weight: bold;
margin-right: 20px;
width: 150px;
}
......@@ -108,12 +108,12 @@ my-peertube-checkbox {
}
.submit-container {
text-align: right;
text-align: end;
.message-submit {
display: inline-block;
margin-right: 25px;
@include margin-right(25px);
display: inline-block;
color: pvar(--greyForegroundColor);
font-size: 15px;
}
......
......@@ -23,6 +23,7 @@
.progress {
@include progressbar;
flex-grow: 1;
height: 30px;
font-size: 14px;
......@@ -31,12 +32,13 @@
.progress-bar {
background-color: $green;
line-height: 30px;
text-align: left;
text-align: start;
font-weight: $font-semibold;
span {
@include margin-left(13px);
color: pvar(--mainBackgroundColor);
margin-left: 13px;
}
}
}
......@@ -44,7 +46,6 @@
input {
@include peertube-button;
@include grey-button;
margin-left: 10px;
@include margin-left(10px);
}
}
......@@ -10,7 +10,10 @@
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
</textarea>
<my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
<my-help
[ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown"
tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"
>
<ng-template ptTemplate="customHtml">
<span i18n>Markdown compatible that supports:</span>
......
......@@ -14,7 +14,7 @@ form {
margin-bottom: 10px;
my-actor-avatar {
margin-right: 10px;
@include margin-right(10px);
}
.form-group {
......@@ -26,12 +26,12 @@ form {
textarea {
@include peertube-textarea(100%, $peertube-textarea-height);
@include button-focus(pvar(--mainColorLightest));
@include padding-right($markdown-icon-width + 15px !important);
min-height: calc(#{$peertube-textarea-height} - 15px * 2);
padding-right: $markdown-icon-width + 15px !important;
@media screen and (max-width: 600px) {
padding-right: $markdown-icon-width + 19px !important;
@include padding-right($markdown-icon-width + 19px !important);
}
&:focus::placeholder {
......@@ -45,6 +45,12 @@ form {
top: 5px;
right: 9px;
// inset-inline is not well supported by web browsers
&.is-rtl {
right: unset;
left: 9px;
}
::ng-deep .help-tooltip-button {
my-global-icon {
height: $markdown-icon-height;
......@@ -86,9 +92,10 @@ form {
flex: 1;
code {
@include margin-left(5px);
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
}
}