Bidi support

8 files changed, 39 insertions, 32 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
index 667726c22..0b366716d 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
@@ -43,7 +43,7 @@ input {
   &[type=submit] {
     @include peertube-button;
     @include orange-button;
-    margin-left: auto;
+    @include margin-left(auto);
   }
 }
 
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index 191c5169d..c236f322f 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -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);
   }
 }
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 28b809f71..1451cf415 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -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;
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.scss b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
index dfc8fc99e..62763045d 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.scss
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.scss
@@ -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 {
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 6c1ddf716..d02f9ed27 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -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);
   }
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 67587a58a..f09500682 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -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);
     }
   }
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 94187efd4..f84b733a6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -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);
   }
 }
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 57623c36f..57d27aa8e 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -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);
   }
 }