diff options
author | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-04-28 11:49:34 +0200 |
commit | 746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch) | |
tree | 7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/app/+video-channels | |
parent | ec489ce2f74570f94dffb62266f4ed6f18621b3e (diff) | |
download | PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip |
Refactor actor avatar display
Diffstat (limited to 'client/src/app/+video-channels')
3 files changed, 16 insertions, 16 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index 9308d5bb6..b4d81fe39 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html | |||
@@ -6,16 +6,16 @@ | |||
6 | <div class="channel-info"> | 6 | <div class="channel-info"> |
7 | 7 | ||
8 | <ng-template #buttonsTemplate> | 8 | <ng-template #buttonsTemplate> |
9 | <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n> | 9 | <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n> |
10 | Manage channel | 10 | Manage channel |
11 | </a> | 11 | </a> |
12 | 12 | ||
13 | <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> | 13 | <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> |
14 | 14 | ||
15 | <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted"> | 15 | <button *ngIf="videoChannel.support" (click)="showSupportModal()" class="support-button peertube-button orange-button-inverted"> |
16 | <my-global-icon iconName="support" aria-hidden="true"></my-global-icon> | 16 | <my-global-icon iconName="support" aria-hidden="true"></my-global-icon> |
17 | <span class="icon-text" i18n>Support</span> | 17 | <span class="icon-text" i18n>Support</span> |
18 | </button> | 18 | </button> |
19 | </ng-template> | 19 | </ng-template> |
20 | 20 | ||
21 | <ng-template #ownerTemplate> | 21 | <ng-template #ownerTemplate> |
@@ -23,7 +23,7 @@ | |||
23 | <div class="section-label" i18n>OWNER ACCOUNT</div> | 23 | <div class="section-label" i18n>OWNER ACCOUNT</div> |
24 | 24 | ||
25 | <div class="avatar-row"> | 25 | <div class="avatar-row"> |
26 | <my-account-avatar [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()" size="120"></my-account-avatar> | 26 | <my-actor-avatar class="account-avatar" [account]="videoChannel.ownerAccount" [internalHref]="getAccountUrl()"></my-actor-avatar> |
27 | 27 | ||
28 | <div class="actor-info"> | 28 | <div class="actor-info"> |
29 | <h4> | 29 | <h4> |
@@ -49,7 +49,7 @@ | |||
49 | </ng-template> | 49 | </ng-template> |
50 | 50 | ||
51 | <div class="channel-avatar-row"> | 51 | <div class="channel-avatar-row"> |
52 | <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" /> | 52 | <my-actor-avatar class="main-avatar" [channel]="videoChannel"></my-actor-avatar> |
53 | 53 | ||
54 | <div> | 54 | <div> |
55 | <div class="section-label" i18n>VIDEO CHANNEL</div> | 55 | <div class="section-label" i18n>VIDEO CHANNEL</div> |
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index e946707ef..360a99342 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -107,8 +107,8 @@ | |||
107 | display: flex; | 107 | display: flex; |
108 | margin-bottom: 15px; | 108 | margin-bottom: 15px; |
109 | 109 | ||
110 | img { | 110 | .account-avatar { |
111 | @include avatar(48px); | 111 | @include actor-avatar-size(48px); |
112 | } | 112 | } |
113 | 113 | ||
114 | .actor-info { | 114 | .actor-info { |
@@ -289,8 +289,8 @@ | |||
289 | margin-top: -5px; | 289 | margin-top: -5px; |
290 | } | 290 | } |
291 | 291 | ||
292 | img { | 292 | .account-avatar { |
293 | @include channel-avatar(64px); | 293 | @include actor-avatar-size(64px); |
294 | 294 | ||
295 | margin: -30px 0 0 15px; | 295 | margin: -30px 0 0 15px; |
296 | } | 296 | } |
diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts index 2e387f401..35c39cc2e 100644 --- a/client/src/app/+video-channels/video-channels.module.ts +++ b/client/src/app/+video-channels/video-channels.module.ts | |||
@@ -10,7 +10,7 @@ import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video- | |||
10 | import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' | 10 | import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' |
11 | import { VideoChannelsRoutingModule } from './video-channels-routing.module' | 11 | import { VideoChannelsRoutingModule } from './video-channels-routing.module' |
12 | import { VideoChannelsComponent } from './video-channels.component' | 12 | import { VideoChannelsComponent } from './video-channels.component' |
13 | import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/shared-account-avatar.module' | 13 | import { SharedActorImageModule } from '../shared/shared-actor-image/shared-actor-image.module' |
14 | 14 | ||
15 | @NgModule({ | 15 | @NgModule({ |
16 | imports: [ | 16 | imports: [ |
@@ -23,7 +23,7 @@ import { SharedAccountAvatarModule } from '../shared/shared-account-avatar/share | |||
23 | SharedUserSubscriptionModule, | 23 | SharedUserSubscriptionModule, |
24 | SharedGlobalIconModule, | 24 | SharedGlobalIconModule, |
25 | SharedSupportModal, | 25 | SharedSupportModal, |
26 | SharedAccountAvatarModule | 26 | SharedActorImageModule |
27 | ], | 27 | ], |
28 | 28 | ||
29 | declarations: [ | 29 | declarations: [ |