aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-main
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-29 16:45:35 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commitdeb8b9cdb03213efd8f1fc4b40ab94ae499fe058 (patch)
tree7ba35e933530a706ec939b9c26c152d760710990 /client/src/app/shared/shared-main
parent100d9ce23bb7c5186132607e4c444f9cba5002a4 (diff)
downloadPeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.tar.gz
PeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.tar.zst
PeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.zip
Square channel avatar consistency
Diffstat (limited to 'client/src/app/shared/shared-main')
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.html3
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.scss12
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.ts4
-rw-r--r--client/src/app/shared/shared-main/account/video-avatar-channel.component.html5
-rw-r--r--client/src/app/shared/shared-main/account/video-avatar-channel.component.scss7
5 files changed, 22 insertions, 9 deletions
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
index 30584fd00..f3db55310 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
@@ -1,7 +1,7 @@
1<ng-container *ngIf="actor"> 1<ng-container *ngIf="actor">
2 <div class="actor"> 2 <div class="actor">
3 <div class="d-flex"> 3 <div class="d-flex">
4 <img [src]="actor.avatarUrl" alt="Avatar" /> 4 <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
5 5
6 <div class="actor-img-edit-container"> 6 <div class="actor-img-edit-container">
7 7
@@ -19,7 +19,6 @@
19 </div> 19 </div>
20 </div> 20 </div>
21 21
22
23 <div class="actor-info"> 22 <div class="actor-info">
24 <div class="actor-info-names"> 23 <div class="actor-info-names">
25 <div class="actor-info-display-name">{{ actor.displayName }}</div> 24 <div class="actor-info-display-name">{{ actor.displayName }}</div>
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
index 57c298508..40ba4269b 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
@@ -5,9 +5,15 @@
5 display: flex; 5 display: flex;
6 6
7 img { 7 img {
8 @include avatar(100px);
9
10 margin-right: 15px; 8 margin-right: 15px;
9
10 &:not(.channel) {
11 @include avatar(100px);
12 }
13
14 &.channel {
15 @include channel-avatar(100px);
16 }
11 } 17 }
12 18
13 .actor-img-edit-container { 19 .actor-img-edit-container {
@@ -18,7 +24,7 @@
18 @include peertube-button-file(21px); 24 @include peertube-button-file(21px);
19 @include button-with-icon(19px); 25 @include button-with-icon(19px);
20 @include orange-button; 26 @include orange-button;
21 27
22 margin-top: 10px; 28 margin-top: 10px;
23 margin-bottom: 5px; 29 margin-bottom: 5px;
24 border-radius: 50%; 30 border-radius: 50%;
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
index b459c591f..87e9e917c 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -70,4 +70,8 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
70 hasAvatar () { 70 hasAvatar () {
71 return !!this.avatarUrl 71 return !!this.avatarUrl
72 } 72 }
73
74 isChannel () {
75 return !!(this.actor as VideoChannel).ownerAccount
76 }
73} 77}
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
index 310cc926f..5058f05dd 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
+++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.html
@@ -1,8 +1,9 @@
1<div class="wrapper" [ngClass]="'avatar-' + size"> 1<div class="wrapper" [ngClass]="'avatar-' + size">
2 <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel"> 2 <ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
3 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 3 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" /> 4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
5 </a> 5 </a>
6
6 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle"> 7 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
7 <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" /> 8 <img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
8 </a> 9 </a>
@@ -14,7 +15,7 @@
14 </a> 15 </a>
15 16
16 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 17 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
17 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" /> 18 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
18 </a> 19 </a>
19 </ng-container> 20 </ng-container>
20 21
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
index 37709fce6..ea7cb2cf7 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
@@ -25,8 +25,11 @@
25 position: absolute; 25 position: absolute;
26 top:50%; 26 top:50%;
27 left:50%; 27 left:50%;
28 border-radius: 50%; 28 transform: translate(-50%,-50%);
29 transform: translate(-50%,-50%) 29
30 &:not(.channel-avatar) {
31 border-radius: 50%;
32 }
30 } 33 }
31 34
32 a:nth-of-type(2) img { 35 a:nth-of-type(2) img {