match margin of abstract-video-list and sub-menu's fixed margin

diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
index 3ae11b49c3f88e397eeaa757855a2a0c1ac39c52..1f1987abafe647983ed65a2ff6a865f0d1fce97a 100644 (file)
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ b/client/src/app/+accounts/account-about/account-about.component.html
@@ -1,12 +1,14 @@
-<div *ngIf="account" class="row">
-  <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">DESCRIPTION</div>
-    <div class="content" [innerHtml]="getAccountDescription()"></div>
+<div class="margin-content">
+  <div *ngIf="account" class="row no-gutters">
+    <div class="block col-md-6 col-sm-12 pr-2">
+      <div i18n class="small-title">DESCRIPTION</div>
+      <div class="content" [innerHtml]="getAccountDescription()"></div>
+    </div>
+  
+    <div class="block col-md-6 col-sm-12">
+      <div i18n class="small-title">STATS</div>
+  
+      <div i18n class="content">Joined {{ account.createdAt | date }}</div>
+    </div>
   </div>
-
-  <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">STATS</div>
-
-    <div i18n class="content">Joined {{ account.createdAt | date }}</div>
-  </div>
-</div>
\ No newline at end of file
+</div>

diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 12170e3712b9270972691db5910ada0f294d66c9..e6ab3c036d4834b0f401129fd7b282b93671a125 100644 (file)
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,6 +15,13 @@
   }
 }
 
+.margin-content {
+  // margin-content is required, but child views have their own margins
+  // that match views outside the scope of accounts, so we only align
+  // them with the margins of .sub-menu when required.
+  margin: 0;
+}
+
 .right-buttons {
   display: flex;
   height: max-content;

diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
index c02213ebbee438163f2c00fd4e423f60e15aad03..8dff8ba91700cd1d613d476085d2a38c68fe58f5 100644 (file)
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
@@ -1,20 +1,22 @@
-<div *ngIf="videoChannel" class="row">
-  <div class="description col-md-6 col-sm-12">
-    <div class="block">
-      <div i18n class="small-title">DESCRIPTION</div>
-      <div class="content" [innerHtml]="getVideoChannelDescription()"></div>
+<div class="margin-content">
+  <div *ngIf="videoChannel" class="row no-gutters">
+    <div class="description col-md-6 col-sm-12 pr-2">
+      <div class="block">
+        <div i18n class="small-title">DESCRIPTION</div>
+        <div class="content" [innerHtml]="getVideoChannelDescription()"></div>
+      </div>
+  
+      <div class="block" *ngIf="supportHTML">
+        <div i18n class="small-title">SUPPORT THIS CHANNEL</div>
+        <div class="content" [innerHtml]="supportHTML"></div>
+      </div>
     </div>
-
-    <div class="block" *ngIf="supportHTML">
-      <div i18n class="small-title">SUPPORT THIS CHANNEL</div>
-      <div class="content" [innerHtml]="supportHTML"></div>
+  
+    <div class="stats col-md-6 col-sm-12">
+      <div class="block">
+        <div i18n class="small-title">STATS</div>
+        <div i18n class="content">Created {{ videoChannel.createdAt | date }}</div>
+      </div>
     </div>
   </div>
-
-  <div class="stats col-md-6 col-sm-12">
-    <div class="block">
-      <div i18n class="small-title">STATS</div>
-      <div i18n class="content">Created {{ videoChannel.createdAt | date }}</div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+</div>

diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index 3990e73da895a3dd66e8d986521d5d0b305c1d5e..663585010cc1fd9072acb27796065afc56771216 100644 (file)
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,11 +1,13 @@
-<div i18n class="title-page title-page-single">
-  Created {{ pagination.totalItems }} playlists
-</div>
+<div class="margin-content">
+  <div i18n class="title-page title-page-single">
+    Created {{ pagination.totalItems }} playlists
+  </div>
 
-<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
+  <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
 
-<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
-  <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container">
-    <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+  <div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
+    <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container">
+      <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
+    </div>
   </div>
 </div>

diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index f0fe7503fdf6096b9ae2d15c7af36ab8e3842f0a..cb29318585d4a79acb6f758db658b9c00bbc88c2 100644 (file)
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -1,3 +1,7 @@
+.title-page {
+  margin-top: 0;
+}
+
 .video-playlist {
   display: flex;
   flex-wrap: wrap;

diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 0a49f53cffacf1ef237491868404b9da1b8ba50a..22f21dcc6eee9e0ba2e536e233a20f06028c981a 100644 (file)
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -40,6 +40,13 @@
   }
 }
 
+.margin-content {
+  // margin-content is required, but child views have their own margins
+  // that match views outside the scope of accounts, so we only align
+  // them with the margins of .sub-menu when required.
+  margin: 0;
+}
+
 .right-buttons {
   display: flex;
   height: max-content;

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d79086723000a78fac7f9081950369a0c36cb0be..d82d78d58e91085d4ab4410a285828b838f33930 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -185,8 +185,8 @@ $play-overlay-width: 18px;
 }
 
 @mixin fluid-videos-miniature-layout {
-  margin-left: 3vw !important;
-  margin-right: 3vw !important;
+  margin-left: $not-expanded-horizontal-margins !important;
+  margin-right: $not-expanded-horizontal-margins !important;
 
   @media screen and (max-width: $mobile-view) {
     width: auto;