Fix search channel avatar size

Chocobozzz · Feb 27, 2024 · dee2e66 · dee2e66
1 parent bb21e0b
commit dee2e66
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
@@ -37,7 +37,7 @@
     <div *ngIf="isVideoChannel(result)" class="entry video-channel">
 
       <my-actor-avatar
-        [actor]="result" actorType="channel"
+        [actor]="result" actorType="channel" responseSize="true"
         [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"
       ></my-actor-avatar>
 

diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
@@ -3,10 +3,13 @@
 @use '_mixins' as *;
 
 @mixin build-channel-img-size ($video-img-width) {
-  $image-size: min(130px, $video-img-width);
+  $image-size: min(120px, $video-img-width);
   $margin-size: math.div(($video-img-width - $image-size), 2); // So we have the same width as the video miniature
 
-  @include actor-avatar-size($image-size);
+  width: $image-size;
+  height: $image-size;
+  min-height: $image-size;
+  min-width: $image-size;
 
   margin: 0 calc($margin-size + 1rem) 0 $margin-size;
 }
@@ -59,7 +62,7 @@
 
 .video-channel {
   my-actor-avatar {
-    @include margin-right(1rem);
+    @include build-channel-img-size($video-thumbnail-width);
   }
 }
 
@@ -88,7 +91,7 @@
   color: pvar(--greyForegroundColor);
 }
 
-// Use the same breakpoints than in video-miniature
+// Use the same breakpoints as in video-miniature
 @include on-small-main-col {
   .video-channel {
     display: grid;

diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild, numberAttribute } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, OnInit, ViewChild, booleanAttribute, numberAttribute } from '@angular/core'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 import { objectKeysTyped } from '@peertube/peertube-core-utils'
@@ -22,6 +22,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
   @Input() previewImage: string
 
   @Input({ transform: numberAttribute }) size = 120
+  @Input({ transform: booleanAttribute }) responseSize = false
 
   // Use an external link
   @Input() href: string
@@ -68,7 +69,7 @@ export class ActorAvatarComponent implements OnInit, OnChanges {
 
     this.classes = [ 'avatar' ]
 
-    if (this.size) {
+    if (this.size && !this.responseSize) {
       avatarSize = `${this.size}px`
 
       if (this.size <= 18) {