interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix miniature avatar size

This commit is contained in:
Chocobozzz 2021-05-05 09:44:24 +02:00
parent a6e37eebfb
commit 06ec4bdd15
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
6 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
View File

@ -15,7 +15,9 @@
<ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count"> <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
<my-video-miniature <my-video-miniature
[displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow" [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
(videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"> (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
actorImageSize="32"
>
</my-video-miniature> </my-video-miniature>
<hr *ngIf="!playlist && i == 0 && length > 1" /> <hr *ngIf="!playlist && i == 0 && length > 1" />

4
client/src/app/shared/shared-actor-image/actor-avatar.component.ts
View File

@ -9,6 +9,8 @@ type ActorInput = {
url: string url: string
} }
export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
@Component({ @Component({
selector: 'my-actor-avatar', selector: 'my-actor-avatar',
styleUrls: [ './actor-avatar.component.scss' ], styleUrls: [ './actor-avatar.component.scss' ],
@ -20,7 +22,7 @@ export class ActorAvatarComponent {
@Input() previewImage: SafeResourceUrl @Input() previewImage: SafeResourceUrl
@Input() size: '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120' @Input() size: ActorAvatarSize
// Use an external link // Use an external link
@Input() href: string @Input() href: string

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

@ -12,12 +12,12 @@
<div class="d-flex video-miniature-meta"> <div class="d-flex video-miniature-meta">
<my-actor-avatar <my-actor-avatar
*ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle" *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle"
[channel]="video.channel" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]" [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
></my-actor-avatar> ></my-actor-avatar>
<my-actor-avatar <my-actor-avatar
*ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle" *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
[account]="video.account" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]" [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
></my-actor-avatar> ></my-actor-avatar>
<div class="w-100 d-flex flex-column"> <div class="w-100 d-flex flex-column">

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

@ -12,6 +12,7 @@ import {
} from '@angular/core' } from '@angular/core'
import { AuthService, ScreenService, ServerService, User } from '@app/core' import { AuthService, ScreenService, ServerService, User } from '@app/core'
import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models' import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
import { Video } from '../shared-main' import { Video } from '../shared-main'
import { VideoPlaylistService } from '../shared-video-playlist' import { VideoPlaylistService } from '../shared-video-playlist'
import { VideoActionsDisplayType } from './video-actions-dropdown.component' import { VideoActionsDisplayType } from './video-actions-dropdown.component'
@ -51,6 +52,8 @@ export class VideoMiniatureComponent implements OnInit {
} }
@Input() displayVideoActions = true @Input() displayVideoActions = true
@Input() actorImageSize: ActorAvatarSize = '40'
@Input() displayAsRow = false @Input() displayAsRow = false
@Input() videoLinkType: VideoLinkType = 'internal' @Input() videoLinkType: VideoLinkType = 'internal'

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

@ -3,9 +3,8 @@
@mixin miniature-name { @mixin miniature-name {
@include ellipsis-multiline(1.1em, 2); @include ellipsis-multiline(1.1em, 2);
@include peertube-word-wrap(false);
word-break: break-all;
word-wrap: break-word;
transition: color 0.2s; transition: color 0.2s;
font-weight: $font-semibold; font-weight: $font-semibold;
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);

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

@ -50,11 +50,14 @@
} }
} }
@mixin peertube-word-wrap { @mixin peertube-word-wrap ($with-hyphen: true) {
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto;
@if $with-hyphen {
hyphens: auto;
}
} }
@mixin apply-svg-color ($color) { @mixin apply-svg-color ($color) {