Reorder playlists when adding an element

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-playlist / video-add-to-playlist.component.scss

diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index b84cacece486f8f4f58b6c0b6f756dad9ce4fa68..de2f1032b1b3061bc23b6bd9fe8dcb98529e9130 100644 (file)
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,9 +1,5 @@
-@import '_variables';
-@import '_mixins';
-
-$optional-rows-checkbox-width: 34px;
-$timestamp-width: 50px;
-$timestamp-margin-right: 10px;
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .header,
 .dropdown-item,
@@ -44,7 +40,7 @@ $timestamp-margin-right: 10px;
   }
 
   > .optional-rows {
-    padding-left: 24px;
+    @include padding-left(24px);
   }
 
   &.has-optional-row:hover {
@@ -52,12 +48,12 @@ $timestamp-margin-right: 10px;
   }
 }
 
-.primary-row,
-.optional-rows > div {
+.primary-row {
   display: flex;
 
   my-peertube-checkbox {
-    margin-right: 10px;
+    @include margin-right(10px);
+
     align-self: center;
   }
 
@@ -78,44 +74,36 @@ $timestamp-margin-right: 10px;
 
     my-global-icon {
       @include apply-svg-color(#333);
+      @include margin-right(0);
 
       width: 19px;
       height: 19px;
-      margin-right: 0;
-    }
-  }
-
-  my-timestamp-input {
-    margin-right: $timestamp-margin-right;
-
-    ::ng-deep .ui-inputtext {
-      padding: 0;
-      width: $timestamp-width;
     }
   }
 }
 
 .optional-rows {
-  > div {
-    padding: 8px 5px 5px 10px;
-  }
+  display: grid;
+  grid-template-columns: 35px 80px 80px;
+  row-gap: 3px;
+  column-gap: 10px;
+  align-items: center;
 
   my-peertube-checkbox {
-    display: block;
-    width: $optional-rows-checkbox-width;
-    margin-right: 0 !important;
+    @include margin-left(auto);
   }
 
-  .labels {
-    margin-left: $optional-rows-checkbox-width;
+  .header-label {
     font-size: 13px;
     color: pvar(--greyForegroundColor);
-    padding-top: 5px;
-    padding-bottom: 0;
+    padding-left: 2px;
+
+    &:nth-child(1) {
+      grid-column: 2;
+    }
 
-    div {
-      margin-right: $timestamp-margin-right;
-      width: $timestamp-width;
+    &:nth-child(2) {
+      grid-column: 3;
     }
   }
 }
@@ -126,16 +114,16 @@ $timestamp-margin-right: 10px;
   border-top: 1px solid $separator-border-color;
 }
 
-.new-playlist-button  {
+.new-playlist-button {
   cursor: pointer;
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(4px);
 
     position: relative;
     left: -1px;
     top: -1px;
-    margin-right: 4px;
     width: 21px;
     height: 21px;
   }