mirror of https://github.com/Chocobozzz/PeerTube
Square channel avatar consistency
Chocobozzz
Chocobozzz
parent
100d9ce23b
commit
deb8b9cdb0
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ input[type=text] {
|
|||
@include row-blocks;
|
||||
|
||||
img {
|
||||
@include avatar(80px);
|
||||
@include channel-avatar(80px);
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -18,7 +24,7 @@
|
|||
@include peertube-button-file(21px);
|
||||
@include button-with-icon(19px);
|
||||
@include orange-button;
|
||||
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -70,4 +70,8 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
|
|||
hasAvatar () {
|
||||
return !!this.avatarUrl
|
||||
}
|
||||
|
||||
isChannel () {
|
||||
return !!(this.actor as VideoChannel).ownerAccount
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -25,8 +25,11 @@
|
|||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%,-50%)
|
||||
transform: translate(-50%,-50%);
|
||||
|
||||
&:not(.channel-avatar) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
a:nth-of-type(2) img {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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` ||
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ $play-overlay-width: 18px;
|
|||
align-items: center;
|
||||
|
||||
img {
|
||||
@include avatar(28px);
|
||||
@include channel-avatar(28px);
|
||||
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue