From d39db21a883d71d101912c0e6e42e97927edb693 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 12 Jun 2020 12:26:48 +0200
Subject: match margin of abstract-video-list and sub-menu's fixed margin
---
.../account-about/account-about.component.html | 24 ++++++++-------
client/src/app/+accounts/accounts.component.scss | 7 +++++
.../video-channel-about.component.html | 36 ++++++++++++----------
.../video-channel-playlists.component.html | 16 +++++-----
.../video-channel-playlists.component.scss | 4 +++
.../+video-channels/video-channels.component.scss | 7 +++++
client/src/sass/include/_miniature.scss | 4 +--
7 files changed, 61 insertions(+), 37 deletions(-)
(limited to 'client/src')
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 3ae11b49c..1f1987aba 100644
--- 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 12170e371..e6ab3c036 100644
--- 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 c02213ebb..8dff8ba91 100644
--- 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 3990e73da..663585010 100644
--- 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 f0fe7503f..cb2931858 100644
--- 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 0a49f53cf..22f21dcc6 100644
--- 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 d79086723..d82d78d58 100644
--- 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;
--
cgit v1.2.3