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

Fix avatar responsive

This commit is contained in:
Chocobozzz 2022-05-02 13:46:09 +02:00
parent 252e16e158
commit 4428ad543e
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div class="account-info">
<div class="account-avatar-row">
<my-actor-avatar class="main-avatar" [account]="account" size="120"></my-actor-avatar>
<my-actor-avatar class="main-avatar" [account]="account"></my-actor-avatar>
<div>
<div class="section-label" i18n>ACCOUNT</div>

4
client/src/app/+video-channels/video-channels.component.html
View File

@ -23,7 +23,7 @@
<div class="section-label" i18n>OWNER ACCOUNT</div>
<div class="avatar-row">
<my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()" size="48"></my-actor-avatar>
<my-actor-avatar class="account-avatar" [account]="ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar>
<div class="actor-info">
<h4>
@ -51,7 +51,7 @@
</ng-template>
<div class="channel-avatar-row">
<my-actor-avatar class="main-avatar" [channel]="videoChannel" size="120"></my-actor-avatar>
<my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar>
<div>
<div class="section-label" i18n>VIDEO CHANNEL</div>

4
client/src/app/+video-channels/video-channels.component.scss
View File

@ -124,6 +124,10 @@
font-size: var(--myGreyOwnerFontSize);
color: pvar(--greyForegroundColor);
}
.account-avatar {
@include actor-avatar-size(48px);
}
}
.owner-description {

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

@ -23,7 +23,7 @@ export class ActorAvatarComponent {
@Input() previewImage: string
@Input() size: ActorAvatarSize = '32'
@Input() size: ActorAvatarSize
// Use an external link
@Input() href: string
@ -50,13 +50,13 @@ export class ActorAvatarComponent {
}
get defaultAvatarUrl () {
if (this.account) return Account.GET_DEFAULT_AVATAR_URL(+this.size)
if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(+this.size)
if (this.account) return Account.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
}
get avatarUrl () {
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +this.size)
if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, +this.size)
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, this.getSizeNumber())
if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
return ''
}
@ -88,6 +88,12 @@ export class ActorAvatarComponent {
return !!this.account || !!this.channel
}
private getSizeNumber () {
if (this.size) return +this.size
return undefined
}
private getColorTheme () {
const initialLowercase = this.initial.toLowerCase()

6
client/src/app/shared/shared-main/account/account.model.ts
View File

@ -17,12 +17,12 @@ export class Account extends Actor implements ServerAccount {
userId?: number
static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
return Actor.GET_ACTOR_AVATAR_URL(actor, size)
}
static GET_DEFAULT_AVATAR_URL (size: number) {
if (size <= 48) {
static GET_DEFAULT_AVATAR_URL (size?: number) {
if (size && size <= 48) {
return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
}

8
client/src/app/shared/shared-main/account/actor.model.ts
View File

@ -20,8 +20,12 @@ export abstract class Actor implements ServerActor {
isLocal: boolean
static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size: number) {
const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size)
static GET_ACTOR_AVATAR_URL (actor: { avatars: { width: number, url?: string, path: string }[] }, size?: number) {
const avatars = actor.avatars.sort((a, b) => a.width - b.width)
const avatar = size
? avatars.find(a => a.width >= size)
: avatars[0]
if (!avatar) return ''
if (avatar.url) return avatar.url

4
client/src/sass/include/_account-channel-page.scss
View File

@ -70,6 +70,10 @@
color: pvar(--mainColor);
}
.main-avatar {
@include actor-avatar-size(120px);
}
@media screen and (max-width: $mobile-view) {
margin-bottom: 15px;