IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2024-11-24 09:40:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

Square channel avatar consistency

Browse Source
This commit is contained in:
Chocobozzz 2021-03-29 16:45:35 +02:00 committed by Chocobozzz
parent 100d9ce23b
commit deb8b9cdb0
14 changed files with 36 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
View File

@ -17,10 +17,11 @@ input[type=text] {
.video-channel {
@include row-blocks;
padding-bottom: 0;
img {
@include avatar(80px);
@include channel-avatar(80px);
margin-right: 10px;
}

2
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
View File

@ -9,7 +9,7 @@ input[type=text] {
@include row-blocks;
img {
@include avatar(80px);
@include channel-avatar(80px);
margin-right: 10px;
}

2
client/src/app/+search/search.component.scss
View File

@ -48,7 +48,7 @@
$image-size: 130px;
$margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
@include avatar($image-size);
@include channel-avatar($image-size);
margin: 0 ($margin-size + 10) 0 $margin-size;
}

6
client/src/app/+videos/+video-watch/video-watch.component.scss
View File

@ -179,12 +179,6 @@ $video-info-margin-left: 44px;
&:hover {
opacity: 0.8;
}
img {
@include avatar(18px);
margin: -2px 5px 0 0;
}
}
.video-info-channel-left {

3
client/src/app/shared/shared-main/account/actor-avatar-info.component.html
View File

@ -1,7 +1,7 @@
<ng-container *ngIf="actor">
<div class="actor">
<div class="d-flex">
<img [src]="actor.avatarUrl" alt="Avatar" />
<img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
<div class="actor-img-edit-container">
@ -19,7 +19,6 @@
</div>
</div>
<div class="actor-info">
<div class="actor-info-names">
<div class="actor-info-display-name">{{ actor.displayName }}</div>

10
client/src/app/shared/shared-main/account/actor-avatar-info.component.scss
View File

@ -5,9 +5,15 @@
display: flex;
img {
@include avatar(100px);
margin-right: 15px;
&:not(.channel) {
@include avatar(100px);
}
&.channel {
@include channel-avatar(100px);
}
}
.actor-img-edit-container {

4
client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
View File

@ -70,4 +70,8 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
hasAvatar () {
return !!this.avatarUrl
}
isChannel () {
return !!(this.actor as VideoChannel).ownerAccount
}
}

5
client/src/app/shared/shared-main/account/video-avatar-channel.component.html
View File

@ -1,8 +1,9 @@
<div class="wrapper" [ngClass]="'avatar-' + size">
<ng-container *ngIf="!isChannelAvatarNull() && !genericChannel">
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
<img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
<img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
</a>
<a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
<img [src]="video.accountAvatarUrl" i18n-alt alt="Account avatar" />
</a>
@ -14,7 +15,7 @@
</a>
<a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
<img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" />
<img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
</a>
</ng-container>

5
client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
View File

@ -25,8 +25,11 @@
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
&:not(.channel-avatar) {
border-radius: 50%;
transform: translate(-50%,-50%)
}
}
a:nth-of-type(2) img {

2
client/src/app/shared/shared-video-miniature/video-miniature.component.html
View File

@ -10,7 +10,7 @@
<div class="video-bottom">
<div class="video-miniature-information">
<div class="d-inline-flex video-miniature-meta">
<a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
<a *ngIf="displayOptions.avatar" class="avatar" [ngClass]="{ channel: displayOwnerVideoChannel() }" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
<img [src]="getAvatarUrl()" alt="" />
</a>

6
client/src/app/shared/shared-video-miniature/video-miniature.component.scss
View File

@ -21,9 +21,13 @@ $more-margin-right: 15px;
.avatar {
margin: 10px 10px 0 0;
img {
img:not(.channel) {
@include avatar(40px);
}
img.channel {
@include channel-avatar(40px);
}
}
.video-miniature-name {

5
client/src/app/shared/shared-video-miniature/video-miniature.component.ts
View File

@ -183,7 +183,7 @@ export class VideoMiniatureComponent implements OnInit {
}
getAvatarUrl () {
if (this.ownerDisplayTypeChosen === 'account') {
if (this.displayOwnerAccount()) {
return this.video.accountAvatarUrl
}
@ -250,7 +250,8 @@ export class VideoMiniatureComponent implements OnInit {
return
}
// If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
// If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
// Or is just a suffix of the account (default created channel)
// -> Use the account name
if (
this.video.channel.name === `${this.video.account.name}_channel` ||

2
client/src/sass/include/_miniature.scss
View File

@ -136,7 +136,7 @@ $play-overlay-width: 18px;
align-items: center;
img {
@include avatar(28px);
@include channel-avatar(28px);
margin-right: 8px;
}

80
client/src/sass/include/_mixins.scss
View File

@ -612,86 +612,6 @@
}
}
@mixin sub-menu-with-actor {
position: initial;
z-index: unset;
height: max-content;
display: flex;
flex-direction: column;
align-items: flex-start;
.actor {
display: flex;
margin-top: 20px;
margin-bottom: 20px;
img {
@include avatar(80px);
margin-right: 20px;
}
.actor-info {
display: flex;
flex-direction: column;
justify-content: center;
.actor-names {
display: flex;
align-items: center;
flex-wrap: wrap;
.actor-display-name {
font-size: 23px;
font-weight: $font-bold;
margin-right: 7px;
}
.actor-name {
position: relative;
top: 3px;
font-size: 14px;
color: $grey-actor-name;
}
}
.actor-lower {
grid-area: lower;
}
.actor-followers {
font-size: 15px;
}
.actor-owner {
@include actor-owner;
}
}
}
.links {
margin-top: 0;
margin-bottom: 15px;
a {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 600;
font-size: 110%;
@media screen and (max-width: $mobile-view) {
font-size: 130%;
}
}
list-overflow {
display: inline-block;
width: max-content;
}
}
}
@mixin create-button {
@include peertube-button-link;
@include orange-button;