diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html index 44a862273..a6a28b35e 100644 --- a/client/src/app/+search/search.component.html +++ b/client/src/app/+search/search.component.html @@ -37,7 +37,7 @@
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss index 65f1a1668..5b733ea9e 100644 --- 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 index 4fd196ad6..448414d27 100644 --- 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) {