aboutsummaryrefslogtreecommitdiffhomepage
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
parent100d9ce23bb7c5186132607e4c444f9cba5002a4 (diff)
downloadPeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.tar.gz
PeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.tar.zst
PeerTube-deb8b9cdb03213efd8f1fc4b40ab94ae499fe058.zip
Square channel avatar consistency
-rw-r--r--client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss3
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss2
-rw-r--r--client/src/app/+search/search.component.scss2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss6
-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
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss6
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts5
-rw-r--r--client/src/sass/include/_miniature.scss2
-rw-r--r--client/src/sass/include/_mixins.scss80
14 files changed, 36 insertions, 103 deletions
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index f2f42459f..8804fa95c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -17,10 +17,11 @@ input[type=text] {
17 17
18.video-channel { 18.video-channel {
19 @include row-blocks; 19 @include row-blocks;
20
20 padding-bottom: 0; 21 padding-bottom: 0;
21 22
22 img { 23 img {
23 @include avatar(80px); 24 @include channel-avatar(80px);
24 25
25 margin-right: 10px; 26 margin-right: 10px;
26 } 27 }
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 5ead45dd8..9fc8be86c 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -9,7 +9,7 @@ input[type=text] {
9 @include row-blocks; 9 @include row-blocks;
10 10
11 img { 11 img {
12 @include avatar(80px); 12 @include channel-avatar(80px);
13 13
14 margin-right: 10px; 14 margin-right: 10px;
15 } 15 }
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 64927fa4b..d25fdd31d 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -48,7 +48,7 @@
48 $image-size: 130px; 48 $image-size: 130px;
49 $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature 49 $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
50 50
51 @include avatar($image-size); 51 @include channel-avatar($image-size);
52 52
53 margin: 0 ($margin-size + 10) 0 $margin-size; 53 margin: 0 ($margin-size + 10) 0 $margin-size;
54 } 54 }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 555126cbc..a67605217 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -179,12 +179,6 @@ $video-info-margin-left: 44px;
179 &:hover { 179 &:hover {
180 opacity: 0.8; 180 opacity: 0.8;
181 } 181 }
182
183 img {
184 @include avatar(18px);
185
186 margin: -2px 5px 0 0;
187 }
188 } 182 }
189 183
190 .video-info-channel-left { 184 .video-info-channel-left {
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 {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 7a6df7b64..e5b07896f 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -10,7 +10,7 @@
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-inline-flex video-miniature-meta"> 12 <div class="d-inline-flex video-miniature-meta">
13 <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 13 <a *ngIf="displayOptions.avatar" class="avatar" [ngClass]="{ channel: displayOwnerVideoChannel() }" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
14 <img [src]="getAvatarUrl()" alt="" /> 14 <img [src]="getAvatarUrl()" alt="" />
15 </a> 15 </a>
16 16
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 38cac5b6e..cd492e9ad 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -21,9 +21,13 @@ $more-margin-right: 15px;
21 .avatar { 21 .avatar {
22 margin: 10px 10px 0 0; 22 margin: 10px 10px 0 0;
23 23
24 img { 24 img:not(.channel) {
25 @include avatar(40px); 25 @include avatar(40px);
26 } 26 }
27
28 img.channel {
29 @include channel-avatar(40px);
30 }
27 } 31 }
28 32
29 .video-miniature-name { 33 .video-miniature-name {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index cc5665ab1..f08be9c25 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -183,7 +183,7 @@ export class VideoMiniatureComponent implements OnInit {
183 } 183 }
184 184
185 getAvatarUrl () { 185 getAvatarUrl () {
186 if (this.ownerDisplayTypeChosen === 'account') { 186 if (this.displayOwnerAccount()) {
187 return this.video.accountAvatarUrl 187 return this.video.accountAvatarUrl
188 } 188 }
189 189
@@ -250,7 +250,8 @@ export class VideoMiniatureComponent implements OnInit {
250 return 250 return
251 } 251 }
252 252
253 // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) 253 // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
254 // Or is just a suffix of the account (default created channel)
254 // -> Use the account name 255 // -> Use the account name
255 if ( 256 if (
256 this.video.channel.name === `${this.video.account.name}_channel` || 257 this.video.channel.name === `${this.video.account.name}_channel` ||
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 326d4677a..457a7151c 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -136,7 +136,7 @@ $play-overlay-width: 18px;
136 align-items: center; 136 align-items: center;
137 137
138 img { 138 img {
139 @include avatar(28px); 139 @include channel-avatar(28px);
140 140
141 margin-right: 8px; 141 margin-right: 8px;
142 } 142 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 82c60a59d..7b862a156 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -612,86 +612,6 @@
612 } 612 }
613} 613}
614 614
615@mixin sub-menu-with-actor {
616 position: initial;
617 z-index: unset;
618 height: max-content;
619 display: flex;
620 flex-direction: column;
621 align-items: flex-start;
622
623 .actor {
624 display: flex;
625 margin-top: 20px;
626 margin-bottom: 20px;
627
628 img {
629 @include avatar(80px);
630
631 margin-right: 20px;
632 }
633
634 .actor-info {
635 display: flex;
636 flex-direction: column;
637 justify-content: center;
638
639 .actor-names {
640 display: flex;
641 align-items: center;
642 flex-wrap: wrap;
643
644 .actor-display-name {
645 font-size: 23px;
646 font-weight: $font-bold;
647 margin-right: 7px;
648 }
649
650 .actor-name {
651 position: relative;
652 top: 3px;
653 font-size: 14px;
654 color: $grey-actor-name;
655 }
656 }
657
658 .actor-lower {
659 grid-area: lower;
660 }
661
662 .actor-followers {
663 font-size: 15px;
664 }
665
666 .actor-owner {
667 @include actor-owner;
668 }
669 }
670 }
671
672 .links {
673 margin-top: 0;
674 margin-bottom: 15px;
675
676 a {
677 margin-top: 0;
678 margin-bottom: 0;
679 text-transform: uppercase;
680 font-weight: 600;
681 font-size: 110%;
682
683 @media screen and (max-width: $mobile-view) {
684 font-size: 130%;
685 }
686 }
687
688 list-overflow {
689 display: inline-block;
690 width: max-content;
691 }
692 }
693}
694
695@mixin create-button { 615@mixin create-button {
696 @include peertube-button-link; 616 @include peertube-button-link;
697 @include orange-button; 617 @include orange-button;