OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix search channel avatar size

pull/6266/head
Chocobozzz 2024-02-27 17:13:49 +01:00
parent bb21e0b3c8
commit dee2e66e02
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+search/search.component.html
View File

@ -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>

11
client/src/app/+search/search.component.scss
View File

@ -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;

5
client/src/app/shared/shared-actor-image/actor-avatar.component.ts
View File

@ -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) {