aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-05 09:44:24 +0200
committerChocobozzz <me@florianbigard.com>2021-05-05 09:44:24 +0200
commit06ec4bdd15cdd1e938ec1744784cd2993aed9809 (patch)
treeca5e30bb4049d72bcc4ab1c3837a681840efad5d /client
parenta6e37eebfbef9aef91e35173ed799afb6c4a288b (diff)
downloadPeerTube-06ec4bdd15cdd1e938ec1744784cd2993aed9809.tar.gz
PeerTube-06ec4bdd15cdd1e938ec1744784cd2993aed9809.tar.zst
PeerTube-06ec4bdd15cdd1e938ec1744784cd2993aed9809.zip
Fix miniature avatar size
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html4
-rw-r--r--client/src/app/shared/shared-actor-image/actor-avatar.component.ts4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html4
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts3
-rw-r--r--client/src/sass/include/_miniature.scss3
-rw-r--r--client/src/sass/include/_mixins.scss7
6 files changed, 17 insertions, 8 deletions
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index e0e9f92e7..e1040fead 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -15,7 +15,9 @@
15 <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count"> 15 <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
16 <my-video-miniature 16 <my-video-miniature
17 [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow" 17 [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
18 (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"> 18 (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
19 actorImageSize="32"
20 >
19 </my-video-miniature> 21 </my-video-miniature>
20 22
21 <hr *ngIf="!playlist && i == 0 && length > 1" /> 23 <hr *ngIf="!playlist && i == 0 && length > 1" />
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
index 835e15110..e74dd1634 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts
@@ -9,6 +9,8 @@ type ActorInput = {
9 url: string 9 url: string
10} 10}
11 11
12export type ActorAvatarSize = '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120'
13
12@Component({ 14@Component({
13 selector: 'my-actor-avatar', 15 selector: 'my-actor-avatar',
14 styleUrls: [ './actor-avatar.component.scss' ], 16 styleUrls: [ './actor-avatar.component.scss' ],
@@ -20,7 +22,7 @@ export class ActorAvatarComponent {
20 22
21 @Input() previewImage: SafeResourceUrl 23 @Input() previewImage: SafeResourceUrl
22 24
23 @Input() size: '18' | '25' | '32' | '34' | '36' | '40' | '100' | '120' 25 @Input() size: ActorAvatarSize
24 26
25 // Use an external link 27 // Use an external link
26 @Input() href: string 28 @Input() href: string
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 7c4fcc491..645be92bd 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
@@ -12,12 +12,12 @@
12 <div class="d-flex video-miniature-meta"> 12 <div class="d-flex video-miniature-meta">
13 <my-actor-avatar 13 <my-actor-avatar
14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle" 14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle"
15 [channel]="video.channel" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]" 15 [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
16 ></my-actor-avatar> 16 ></my-actor-avatar>
17 17
18 <my-actor-avatar 18 <my-actor-avatar
19 *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle" 19 *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle"
20 [account]="video.account" size="40" [internalHref]="[ '/video-channels', video.byVideoChannel ]" 20 [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/video-channels', video.byVideoChannel ]"
21 ></my-actor-avatar> 21 ></my-actor-avatar>
22 22
23 <div class="w-100 d-flex flex-column"> 23 <div class="w-100 d-flex flex-column">
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 d74b70d4c..b58c118be 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
@@ -12,6 +12,7 @@ import {
12} from '@angular/core' 12} from '@angular/core'
13import { AuthService, ScreenService, ServerService, User } from '@app/core' 13import { AuthService, ScreenService, ServerService, User } from '@app/core'
14import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models' 14import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
15import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
15import { Video } from '../shared-main' 16import { Video } from '../shared-main'
16import { VideoPlaylistService } from '../shared-video-playlist' 17import { VideoPlaylistService } from '../shared-video-playlist'
17import { VideoActionsDisplayType } from './video-actions-dropdown.component' 18import { VideoActionsDisplayType } from './video-actions-dropdown.component'
@@ -51,6 +52,8 @@ export class VideoMiniatureComponent implements OnInit {
51 } 52 }
52 @Input() displayVideoActions = true 53 @Input() displayVideoActions = true
53 54
55 @Input() actorImageSize: ActorAvatarSize = '40'
56
54 @Input() displayAsRow = false 57 @Input() displayAsRow = false
55 58
56 @Input() videoLinkType: VideoLinkType = 'internal' 59 @Input() videoLinkType: VideoLinkType = 'internal'
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index fb504906c..070aa3398 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -3,9 +3,8 @@
3 3
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
6 @include peertube-word-wrap(false);
6 7
7 word-break: break-all;
8 word-wrap: break-word;
9 transition: color 0.2s; 8 transition: color 0.2s;
10 font-weight: $font-semibold; 9 font-weight: $font-semibold;
11 color: pvar(--mainForegroundColor); 10 color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 6d1e37bb6..b2083e516 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -50,11 +50,14 @@
50 } 50 }
51} 51}
52 52
53@mixin peertube-word-wrap { 53@mixin peertube-word-wrap ($with-hyphen: true) {
54 word-break: break-word; 54 word-break: break-word;
55 word-wrap: break-word; 55 word-wrap: break-word;
56 overflow-wrap: break-word; 56 overflow-wrap: break-word;
57 hyphens: auto; 57
58 @if $with-hyphen {
59 hyphens: auto;
60 }
58} 61}
59 62
60@mixin apply-svg-color ($color) { 63@mixin apply-svg-color ($color) {