mirror of https://github.com/Chocobozzz/PeerTube
Fix actor avatar sizes
parent
a4b497c2a9
commit
206fe1de0e
|
@ -2,7 +2,7 @@
|
|||
<div class="account-info d-md-grid d-block">
|
||||
|
||||
<div class="account-avatar-row">
|
||||
<my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar>
|
||||
<my-actor-avatar [size]="getAccountAvatarSize()" actorType="account" [actor]="account"></my-actor-avatar>
|
||||
|
||||
<div>
|
||||
<div class="section-label" i18n>ACCOUNT</div>
|
||||
|
|
|
@ -101,6 +101,12 @@ export class AccountsComponent implements OnInit, OnDestroy {
|
|||
return this.screenService.isInSmallView()
|
||||
}
|
||||
|
||||
getAccountAvatarSize () {
|
||||
if (this.isInSmallView()) return 80
|
||||
|
||||
return 120
|
||||
}
|
||||
|
||||
isManageable () {
|
||||
if (!this.isUserLoggedIn()) return false
|
||||
|
||||
|
|
|
@ -23,7 +23,10 @@
|
|||
<div class="section-label" i18n>OWNER ACCOUNT</div>
|
||||
|
||||
<div class="avatar-row">
|
||||
<my-actor-avatar class="account-avatar" [actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"></my-actor-avatar>
|
||||
<my-actor-avatar
|
||||
class="account-avatar" [size]="getAccountAvatarSize()"
|
||||
[actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"
|
||||
></my-actor-avatar>
|
||||
|
||||
<div class="actor-info">
|
||||
<h4>
|
||||
|
@ -51,7 +54,7 @@
|
|||
</ng-template>
|
||||
|
||||
<div class="channel-avatar-row">
|
||||
<my-actor-avatar class="main-avatar" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
|
||||
<my-actor-avatar [size]="getChannelAvatarSize()" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
|
||||
|
||||
<div>
|
||||
<div class="section-label" i18n>VIDEO CHANNEL</div>
|
||||
|
|
|
@ -123,10 +123,6 @@
|
|||
font-size: var(--myGreyOwnerFontSize);
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
|
||||
.account-avatar {
|
||||
@include actor-avatar-size(48px);
|
||||
}
|
||||
}
|
||||
|
||||
.owner-description {
|
||||
|
@ -287,8 +283,7 @@ my-copy-button {
|
|||
}
|
||||
|
||||
.account-avatar {
|
||||
@include actor-avatar-size(64px);
|
||||
|
||||
// Resized to 64px by JS component
|
||||
margin: -30px 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -102,6 +102,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
|
|||
return this.screenService.isInSmallView()
|
||||
}
|
||||
|
||||
getAccountAvatarSize () {
|
||||
if (this.isInSmallView()) return 64
|
||||
|
||||
return 48
|
||||
}
|
||||
|
||||
getChannelAvatarSize () {
|
||||
if (this.isInSmallView()) return 80
|
||||
|
||||
return 120
|
||||
}
|
||||
|
||||
isUserLoggedIn () {
|
||||
return this.authService.isLoggedIn()
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
@mixin show-more-description {
|
||||
@include margin(10px, auto, 45px);
|
||||
|
||||
|
||||
color: pvar(--mainColor);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -73,15 +73,4 @@
|
|||
margin: 0 10px;
|
||||
color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
.main-avatar {
|
||||
@include actor-avatar-size(120px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
||||
.main-avatar {
|
||||
@include actor-avatar-size(80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue