aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-08 09:13:42 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-04-08 10:07:53 +0200
commit02dd4f3c65536699cec47c7d4054889fd81b5cd4 (patch)
tree8ffdd7efec33c52aa5aa1e0f323e902dac28cfeb /client
parentcdeddff142fd20f8cb8bb346625909d61c596603 (diff)
downloadPeerTube-02dd4f3c65536699cec47c7d4054889fd81b5cd4.tar.gz
PeerTube-02dd4f3c65536699cec47c7d4054889fd81b5cd4.tar.zst
PeerTube-02dd4f3c65536699cec47c7d4054889fd81b5cd4.zip
Display banner on channel page
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+video-channels/video-channels.component.html4
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss4
-rw-r--r--client/src/app/menu/notification.component.scss2
-rw-r--r--client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts3
-rw-r--r--client/src/sass/include/_variables.scss2
5 files changed, 12 insertions, 3 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 87e1b294b..1312a1b3c 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,4 +1,8 @@
1<div class="root" *ngIf="videoChannel"> 1<div class="root" *ngIf="videoChannel">
2 <div class="banner" *ngIf="videoChannel.bannerUrl">
3 <img [src]="videoChannel.bannerUrl" alt="Channel banner">
4 </div>
5
2 <div class="channel-info"> 6 <div class="channel-info">
3 7
4 <ng-template #buttonsTemplate> 8 <ng-template #buttonsTemplate>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 12f5b9f3e..b19b4c81b 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -11,6 +11,10 @@
11 --myGreyOwnerFontSize: 14px; 11 --myGreyOwnerFontSize: 14px;
12} 12}
13 13
14.banner {
15 @include block-ratio('img', $banner-inverted-ratio);
16}
17
14.section-label { 18.section-label {
15 @include section-label-responsive; 19 @include section-label-responsive;
16} 20}
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index d85cc8e66..c65787779 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -2,7 +2,7 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4.content { 4.content {
5 scrollbar-color: unset; 5 scrollbar-color: auto;
6} 6}
7 7
8.notification-inbox-popover { 8.notification-inbox-popover {
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
index b92ecef4b..48451744c 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -36,7 +36,8 @@ export class ActorBannerEditComponent implements OnInit {
36 this.maxBannerSize = config.banner.file.size.max 36 this.maxBannerSize = config.banner.file.size.max
37 this.bannerExtensions = config.banner.file.extensions.join(', ') 37 this.bannerExtensions = config.banner.file.extensions.join(', ')
38 38
39 this.bannerFormat = $localize`maxsize: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}` 39 // tslint:disable:max-line-length
40 this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
40 }) 41 })
41 } 42 }
42 43
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3501b305f..d2a5d2bd9 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -53,7 +53,7 @@ $sub-menu-height: 81px;
53 53
54$channel-background-color: #f6ede8; 54$channel-background-color: #f6ede8;
55 55
56$banner-inverted-ratio: 1/5; 56$banner-inverted-ratio: 1/6;
57 57
58$max-channels-width: 1200px; 58$max-channels-width: 1200px;
59 59