diff options
Diffstat (limited to 'client/src/app/+video-channels')
3 files changed, 25 insertions, 6 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index b9ac13f09..87e1b294b 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html | |||
@@ -17,10 +17,14 @@ | |||
17 | <ng-template #ownerTemplate> | 17 | <ng-template #ownerTemplate> |
18 | <div class="owner-block"> | 18 | <div class="owner-block"> |
19 | <div class="avatar-row"> | 19 | <div class="avatar-row"> |
20 | <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> | 20 | <a [routerLink]="getAccountUrl()" title="View account" i18n-title> |
21 | <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> | ||
22 | </a> | ||
21 | 23 | ||
22 | <div class="actor-info"> | 24 | <div class="actor-info"> |
23 | <h4>{{ videoChannel.ownerAccount.displayName }}</h4> | 25 | <h4> |
26 | <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a> | ||
27 | </h4> | ||
24 | 28 | ||
25 | <div class="actor-handle">@{{ videoChannel.ownerBy }}</div> | 29 | <div class="actor-handle">@{{ videoChannel.ownerBy }}</div> |
26 | </div> | 30 | </div> |
@@ -30,11 +34,11 @@ | |||
30 | <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div> | 34 | <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div> |
31 | </div> | 35 | </div> |
32 | 36 | ||
33 | <a class="view-account short" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n> | 37 | <a class="view-account short" [routerLink]="getAccountUrl()" i18n> |
34 | View account | 38 | View account |
35 | </a> | 39 | </a> |
36 | 40 | ||
37 | <a class="view-account complete" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n> | 41 | <a class="view-account complete" [routerLink]="getAccountUrl()" i18n> |
38 | View owner account | 42 | View owner account |
39 | </a> | 43 | </a> |
40 | </div> | 44 | </div> |
@@ -83,7 +87,7 @@ | |||
83 | <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div> | 87 | <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div> |
84 | </div> | 88 | </div> |
85 | 89 | ||
86 | <div *ngIf="!channelDescriptionExpanded" class="show-more" role="button" | 90 | <div *ngIf="hasShowMoreDescription()" class="show-more" role="button" |
87 | (click)="channelDescriptionExpanded = !channelDescriptionExpanded" | 91 | (click)="channelDescriptionExpanded = !channelDescriptionExpanded" |
88 | title="Show the complete description" i18n-title i18n | 92 | title="Show the complete description" i18n-title i18n |
89 | > | 93 | > |
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index ec8f67a7e..3b27f3aa1 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -42,6 +42,7 @@ | |||
42 | 42 | ||
43 | .channel-description { | 43 | .channel-description { |
44 | grid-column: 1; | 44 | grid-column: 1; |
45 | word-break: break-word; | ||
45 | } | 46 | } |
46 | 47 | ||
47 | .show-more { | 48 | .show-more { |
@@ -108,6 +109,10 @@ | |||
108 | h4 { | 109 | h4 { |
109 | font-size: 18px; | 110 | font-size: 18px; |
110 | margin: 0; | 111 | margin: 0; |
112 | |||
113 | a { | ||
114 | color: pvar(--mainForegroundColor); | ||
115 | } | ||
111 | } | 116 | } |
112 | 117 | ||
113 | .actor-handle { | 118 | .actor-handle { |
@@ -118,6 +123,7 @@ | |||
118 | 123 | ||
119 | .owner-description { | 124 | .owner-description { |
120 | height: 140px; | 125 | height: 140px; |
126 | word-break: break-word; | ||
121 | 127 | ||
122 | @include fade-text(120px, pvar(--mainBackgroundColor)); | 128 | @include fade-text(120px, pvar(--mainBackgroundColor)); |
123 | } | 129 | } |
@@ -217,7 +223,8 @@ | |||
217 | } | 223 | } |
218 | 224 | ||
219 | .view-account.complete { | 225 | .view-account.complete { |
220 | display: inline-block; | 226 | display: block; |
227 | text-align: right; | ||
221 | margin-top: 10px; | 228 | margin-top: 10px; |
222 | color: pvar(--mainColor); | 229 | color: pvar(--mainColor); |
223 | } | 230 | } |
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index a8ca3d6ff..2739047ed 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts | |||
@@ -103,10 +103,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { | |||
103 | this.notifier.success($localize`Username copied`) | 103 | this.notifier.success($localize`Username copied`) |
104 | } | 104 | } |
105 | 105 | ||
106 | hasShowMoreDescription () { | ||
107 | return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100 | ||
108 | } | ||
109 | |||
106 | showSupportModal () { | 110 | showSupportModal () { |
107 | this.supportModal.show() | 111 | this.supportModal.show() |
108 | } | 112 | } |
109 | 113 | ||
114 | getAccountUrl () { | ||
115 | return [ '/accounts', this.videoChannel.ownerBy ] | ||
116 | } | ||
117 | |||
110 | private loadChannelVideosCount () { | 118 | private loadChannelVideosCount () { |
111 | this.videoService.getVideoChannelVideos({ | 119 | this.videoService.getVideoChannelVideos({ |
112 | videoChannel: this.videoChannel, | 120 | videoChannel: this.videoChannel, |