aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+video-channels')
-rw-r--r--client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts13
-rw-r--r--client/src/app/+video-channels/video-channels.component.html8
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss14
3 files changed, 24 insertions, 11 deletions
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 803651505..5e2af1b92 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core' 5import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
6import { immutableAssign } from '@app/helpers' 6import { immutableAssign } from '@app/helpers'
7import { VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' 7import { VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
8import { AbstractVideoList } from '@app/shared/shared-video-miniature' 8import { AbstractVideoList, MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
9import { VideoFilter } from '@shared/models' 9import { VideoFilter } from '@shared/models'
10 10
11@Component({ 11@Component({
@@ -22,6 +22,17 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
22 22
23 filter: VideoFilter = null 23 filter: VideoFilter = null
24 24
25 displayOptions: MiniatureDisplayOptions = {
26 date: true,
27 views: true,
28 by: false,
29 avatar: false,
30 privacyLabel: true,
31 privacyText: false,
32 state: false,
33 blacklistInfo: false
34 }
35
25 private videoChannel: VideoChannel 36 private videoChannel: VideoChannel
26 private videoChannelSub: Subscription 37 private videoChannelSub: Subscription
27 38
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index d1eb15dff..9f9c1f2ca 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -2,17 +2,17 @@
2 <div class="channel-info"> 2 <div class="channel-info">
3 3
4 <ng-template #buttonsTemplate> 4 <ng-template #buttonsTemplate>
5 <a *ngIf="isManageable() && !isInSmallView()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n> 5 <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
6 Manage channel 6 Manage channel
7 </a> 7 </a>
8 8
9 <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button> 9 <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
10 </ng-template> 10 </ng-template>
11 11
12 <ng-template #ownerTemplate> 12 <ng-template #ownerTemplate>
13 <div class="owner-block"> 13 <div class="owner-block">
14 <div class="avatar-row"> 14 <div class="avatar-row">
15 <img class="channel-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 15 <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
16 16
17 <div class="actor-info"> 17 <div class="actor-info">
18 <h4>{{ videoChannel.ownerAccount.displayName }}</h4> 18 <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
@@ -36,7 +36,7 @@
36 </ng-template> 36 </ng-template>
37 37
38 <div class="channel-avatar-row"> 38 <div class="channel-avatar-row">
39 <img [src]="videoChannel.avatarUrl" alt="Avatar" /> 39 <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" />
40 40
41 <div> 41 <div>
42 <div class="section-label" i18n>VIDEO CHANNEL</div> 42 <div class="section-label" i18n>VIDEO CHANNEL</div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index f5547b4e9..fb71844bd 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -4,7 +4,7 @@
4@import '_miniature'; 4@import '_miniature';
5 5
6.root { 6.root {
7 --myGlobalPadding: 60px; 7 --myGlobalTopPadding: 60px;
8 --myChannelImgMargin: 30px; 8 --myChannelImgMargin: 30px;
9 --myFontSize: 16px; 9 --myFontSize: 16px;
10 --myGreyChannelFontSize: 16px; 10 --myGreyChannelFontSize: 16px;
@@ -16,17 +16,19 @@
16} 16}
17 17
18.links { 18.links {
19 @include fluid-videos-miniature-layout; 19 @include fluid-videos-miniature-margins;
20} 20}
21 21
22.channel-info { 22.channel-info {
23 @include fluid-videos-miniature-margins(false, 15px);
24
23 display: grid; 25 display: grid;
24 grid-template-columns: 1fr auto; 26 grid-template-columns: 1fr auto;
25 grid-template-rows: auto auto; 27 grid-template-rows: auto auto;
26 28
27 background-color: pvar(--channelBackgroundColor); 29 background-color: pvar(--channelBackgroundColor);
28 margin-bottom: 45px; 30 margin-bottom: 45px;
29 padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); 31 padding-top: var(--myGlobalTopPadding);
30 font-size: var(--myFontSize); 32 font-size: var(--myFontSize);
31} 33}
32 34
@@ -146,7 +148,7 @@
146 148
147@media screen and (max-width: 1100px) { 149@media screen and (max-width: 1100px) {
148 .root { 150 .root {
149 --myGlobalPadding: 45px; 151 --myGlobalTopPadding: 45px;
150 --myChannelImgMargin: 15px; 152 --myChannelImgMargin: 15px;
151 } 153 }
152 154
@@ -184,7 +186,7 @@
184 display: block; 186 display: block;
185 width: 100%; 187 width: 100%;
186 border-bottom: 2px solid $separator-border-color; 188 border-bottom: 2px solid $separator-border-color;
187 padding: var(--myGlobalPadding) 45px; 189 padding: var(--myGlobalTopPadding) 45px;
188 margin-bottom: 60px; 190 margin-bottom: 60px;
189 } 191 }
190 192
@@ -223,7 +225,7 @@
223 225
224@media screen and (max-width: $mobile-view) { 226@media screen and (max-width: $mobile-view) {
225 .root { 227 .root {
226 --myGlobalPadding: 15px; 228 --myGlobalTopPadding: 15px;
227 --myFontSize: 14px; 229 --myFontSize: 14px;
228 --myGreyChannelFontSize: 13px; 230 --myGreyChannelFontSize: 13px;
229 --myGreyOwnerFontSize: 13px; 231 --myGreyOwnerFontSize: 13px;