Refactor video edit css

client/src/app/+admin/plugins/plugin-search/plugin-search.component.html

@@ -20,7 +20,7 @@
     <my-global-icon iconName="search"></my-global-icon>
 
     <ng-container i18n>
-      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}"
+      {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
     </ng-container>
   </ng-container>
 </div>

client/src/app/+videos/+video-edit/shared/video-edit.component.html

@@ -5,7 +5,7 @@
       <a ngbNavLink i18n>Basic info</a>
 
       <ng-template ngbNavContent>
-        <div class="row">
+        <div class="form-columns">
           <div class="col-video-edit">
             <div class="form-group">
               <label i18n for="name">Title</label>

client/src/app/+videos/+video-edit/shared/video-edit.component.scss

@@ -1,9 +1,3 @@
-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
 @import 'variables';
 @import 'mixins';
 
@@ -57,63 +51,60 @@ my-peertube-checkbox {
   }
 }
 
-.captions {
+.captions-header {
+  text-align: right;
+  margin-bottom: 1rem;
+}
 
-  .captions-header {
+.create-caption {
-    text-align: right;
+  @include create-button;
-    margin-bottom: 1rem;
+}
 
-    .create-caption {
+.caption-entry {
-      @include create-button;
+  display: flex;
+  height: 40px;
+  align-items: center;
+
+  a.caption-entry-label {
+    @include disable-default-a-behaviour;
+
+    flex-grow: 1;
+    color: #000;
+
+    &:hover {
+      opacity: 0.8;
     }
   }
 
-  .caption-entry {
+  .caption-entry-label {
-    display: flex;
-    height: 40px;
-    align-items: center;
-
-    a.caption-entry-label {
-      @include disable-default-a-behaviour;
-
-      flex-grow: 1;
-      color: #000;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    .caption-entry-label {
-      font-size: 15px;
-      font-weight: bold;
-
-      margin-right: 20px;
-      width: 150px;
-    }
-
-    .caption-entry-state {
-      width: 200px;
-
-      &.caption-entry-state-create {
-        color: #39CC0B;
-      }
-
-      &.caption-entry-state-delete {
-        color: #FF0000;
-      }
-    }
-
-    .caption-entry-delete {
-      @include peertube-button;
-      @include grey-button;
-    }
-  }
-
-  .no-caption {
-    text-align: center;
     font-size: 15px;
+    font-weight: bold;
+
+    margin-right: 20px;
+    width: 150px;
   }
+
+  .caption-entry-state {
+    width: 200px;
+
+    &.caption-entry-state-create {
+      color: #39CC0B;
+    }
+
+    &.caption-entry-state-delete {
+      color: #FF0000;
+    }
+  }
+
+  .caption-entry-delete {
+    @include peertube-button;
+    @include grey-button;
+  }
+}
+
+.no-caption {
+  text-align: center;
+  font-size: 15px;
 }
 
 .submit-container {
@@ -143,35 +134,15 @@ p-calendar {
   }
 }
 
-// columns for the video
+.form-columns {
-.col-video-edit {
+  display: grid;
-  @include make-col-ready();
 
-  @include media-breakpoint-up(md) {
+  grid-template-columns: 66% 1fr;
-    @include make-col(7);
+  grid-gap: 30px;
-
-    + .col-video-edit {
-      @include make-col(5);
-    }
-  }
-
-  @include media-breakpoint-up(xl) {
-    @include make-col(8);
-
-    + .col-video-edit {
-      @include make-col(4);
-    }
-  }
 }
 
-:host-context(.expanded) {
+@include on-small-main-col {
-  .col-video-edit {
+  .form-columns {
-    @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr;
-      @include make-col(8);
-
-      + .col-video-edit {
-        @include make-col(4);
-      }
-    }
   }
 }