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 @@
+
+
+
+
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 @@
--myGreyOwnerFontSize: 14px;
}
+.banner {
+ @include block-ratio('img', $banner-inverted-ratio);
+}
+
.section-label {
@include section-label-responsive;
}
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 @@
@import '_mixins';
.content {
- scrollbar-color: unset;
+ scrollbar-color: auto;
}
.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 {
this.maxBannerSize = config.banner.file.size.max
this.bannerExtensions = config.banner.file.extensions.join(', ')
- this.bannerFormat = $localize`maxsize: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+ // tslint:disable:max-line-length
+ this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
})
}
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;
$channel-background-color: #f6ede8;
-$banner-inverted-ratio: 1/5;
+$banner-inverted-ratio: 1/6;
$max-channels-width: 1200px;
diff --git a/server/initializers/constants.ts b/server/initializers/constants.ts
index 1deabec87..2637213a4 100644
--- a/server/initializers/constants.ts
+++ b/server/initializers/constants.ts
@@ -614,7 +614,7 @@ const ACTOR_IMAGES_SIZE = {
},
BANNERS: {
width: 1920,
- height: 384
+ height: 317 // 6/1 ratio
}
}