diff options
Diffstat (limited to 'client/src/app/account/account-videos')
-rw-r--r-- | client/src/app/account/account-videos/account-videos.component.html | 12 | ||||
-rw-r--r-- | client/src/app/account/account-videos/account-videos.component.scss | 44 |
2 files changed, 55 insertions, 1 deletions
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 6c8ac4508..94b976869 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html | |||
@@ -3,7 +3,17 @@ | |||
3 | [infiniteScrollDistance]="0.5" | 3 | [infiniteScrollDistance]="0.5" |
4 | (scrolled)="onNearOfBottom()" | 4 | (scrolled)="onNearOfBottom()" |
5 | > | 5 | > |
6 | <div *ngFor="let video of videos"> | 6 | <div class="video" *ngFor="let video of videos"> |
7 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | 7 | <my-video-thumbnail [video]="video"></my-video-thumbnail> |
8 | |||
9 | <div class="video-info"> | ||
10 | <div class="video-info-name">{{ video.name }}</div> | ||
11 | <span class="video-info-date-views">{{ video.createdAt | fromNow }} - {{ video.views | numberFormatter }} views</span> | ||
12 | </div> | ||
13 | |||
14 | <a class="edit-button" [routerLink]="[ '/videos', video.id, '/edit' ]"> | ||
15 | <span class="icon icon-edit"></span> | ||
16 | Edit | ||
17 | </a> | ||
8 | </div> | 18 | </div> |
9 | </div> | 19 | </div> |
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index e69de29bb..b26933d22 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss | |||
@@ -0,0 +1,44 @@ | |||
1 | .video { | ||
2 | display: flex; | ||
3 | height: 130px; | ||
4 | padding-bottom: 20px; | ||
5 | margin-bottom: 20px; | ||
6 | border-bottom: 1px solid #C6C6C6; | ||
7 | |||
8 | my-video-thumbnail { | ||
9 | margin-right: 10px; | ||
10 | } | ||
11 | |||
12 | .video-info { | ||
13 | flex-grow: 1; | ||
14 | |||
15 | .video-info-name { | ||
16 | font-size: 16px; | ||
17 | font-weight: $font-semibold; | ||
18 | } | ||
19 | |||
20 | .video-info-date-views { | ||
21 | font-size: 13px; | ||
22 | } | ||
23 | } | ||
24 | |||
25 | .edit-button { | ||
26 | @include peertube-button-link; | ||
27 | |||
28 | font-size: 15px; | ||
29 | font-weight: $font-semibold; | ||
30 | color: #585858; | ||
31 | background-color: #E5E5E5; | ||
32 | |||
33 | .icon.icon-edit { | ||
34 | display: inline-block; | ||
35 | background: url('../../../assets/images/account/edit.svg') no-repeat; | ||
36 | background-size: contain; | ||
37 | width: 21px; | ||
38 | height: 21px; | ||
39 | vertical-align: middle; | ||
40 | position: relative; | ||
41 | top: -2px; | ||
42 | } | ||
43 | } | ||
44 | } | ||