mirror of https://github.com/Chocobozzz/PeerTube
Fix avatar responsive
parent
252e16e158
commit
4428ad543e
|
@ -2,7 +2,7 @@
|
||||||
<div class="account-info">
|
<div class="account-info">
|
||||||
|
|
||||||
<div class="account-avatar-row">
|
<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>
|
||||||
<div class="section-label" i18n>ACCOUNT</div>
|
<div class="section-label" i18n>ACCOUNT</div>
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<div class="section-label" i18n>OWNER ACCOUNT</div>
|
<div class="section-label" i18n>OWNER ACCOUNT</div>
|
||||||
|
|
||||||
<div class="avatar-row">
|
<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">
|
<div class="actor-info">
|
||||||
<h4>
|
<h4>
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
||||||
<div class="channel-avatar-row">
|
<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>
|
||||||
<div class="section-label" i18n>VIDEO CHANNEL</div>
|
<div class="section-label" i18n>VIDEO CHANNEL</div>
|
||||||
|
|
|
@ -124,6 +124,10 @@
|
||||||
font-size: var(--myGreyOwnerFontSize);
|
font-size: var(--myGreyOwnerFontSize);
|
||||||
color: pvar(--greyForegroundColor);
|
color: pvar(--greyForegroundColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account-avatar {
|
||||||
|
@include actor-avatar-size(48px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.owner-description {
|
.owner-description {
|
||||||
|
|
|
@ -23,7 +23,7 @@ export class ActorAvatarComponent {
|
||||||
|
|
||||||
@Input() previewImage: string
|
@Input() previewImage: string
|
||||||
|
|
||||||
@Input() size: ActorAvatarSize = '32'
|
@Input() size: ActorAvatarSize
|
||||||
|
|
||||||
// Use an external link
|
// Use an external link
|
||||||
@Input() href: string
|
@Input() href: string
|
||||||
|
@ -50,13 +50,13 @@ export class ActorAvatarComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
get defaultAvatarUrl () {
|
get defaultAvatarUrl () {
|
||||||
if (this.account) return Account.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.size)
|
if (this.channel) return VideoChannel.GET_DEFAULT_AVATAR_URL(this.getSizeNumber())
|
||||||
}
|
}
|
||||||
|
|
||||||
get avatarUrl () {
|
get avatarUrl () {
|
||||||
if (this.account) return Account.GET_ACTOR_AVATAR_URL(this.account, +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.size)
|
if (this.channel) return VideoChannel.GET_ACTOR_AVATAR_URL(this.channel, this.getSizeNumber())
|
||||||
|
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
@ -88,6 +88,12 @@ export class ActorAvatarComponent {
|
||||||
return !!this.account || !!this.channel
|
return !!this.account || !!this.channel
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getSizeNumber () {
|
||||||
|
if (this.size) return +this.size
|
||||||
|
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
private getColorTheme () {
|
private getColorTheme () {
|
||||||
const initialLowercase = this.initial.toLowerCase()
|
const initialLowercase = this.initial.toLowerCase()
|
||||||
|
|
||||||
|
|
|
@ -17,12 +17,12 @@ export class Account extends Actor implements ServerAccount {
|
||||||
|
|
||||||
userId?: number
|
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)
|
return Actor.GET_ACTOR_AVATAR_URL(actor, size)
|
||||||
}
|
}
|
||||||
|
|
||||||
static GET_DEFAULT_AVATAR_URL (size: number) {
|
static GET_DEFAULT_AVATAR_URL (size?: number) {
|
||||||
if (size <= 48) {
|
if (size && size <= 48) {
|
||||||
return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
|
return `${window.location.origin}/client/assets/images/default-avatar-account-48x48.png`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -20,8 +20,12 @@ export abstract class Actor implements ServerActor {
|
||||||
|
|
||||||
isLocal: boolean
|
isLocal: boolean
|
||||||
|
|
||||||
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) {
|
||||||
const avatar = actor.avatars.sort((a, b) => a.width - b.width).find(a => a.width >= size)
|
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) return ''
|
||||||
if (avatar.url) return avatar.url
|
if (avatar.url) return avatar.url
|
||||||
|
|
|
@ -70,6 +70,10 @@
|
||||||
color: pvar(--mainColor);
|
color: pvar(--mainColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-avatar {
|
||||||
|
@include actor-avatar-size(120px);
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $mobile-view) {
|
@media screen and (max-width: $mobile-view) {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue