aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-list
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 18:26:09 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit897ec54d766902878d78abe04aa5b749f6b627f3 (patch)
tree821062ecb881286d45931c32c6b67b078ba47823 /client/src/app/videos/video-list
parentea9f487b40c7f1d7348d9f88703cb9d52c7e8603 (diff)
downloadPeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.tar.gz
PeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.tar.zst
PeerTube-897ec54d766902878d78abe04aa5b749f6b627f3.zip
Client: beautiful watch page
Diffstat (limited to 'client/src/app/videos/video-list')
-rw-r--r--client/src/app/videos/video-list/video-list.component.html21
-rw-r--r--client/src/app/videos/video-list/video-list.component.scss7
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html5
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss8
4 files changed, 15 insertions, 26 deletions
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 2a753adba..72d5512a6 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,16 +1,19 @@
1<div class="row col-md-12 videos-info"> 1<div class="row">
2 <div class="col-md-9 col-xs-5 videos-total-results"> 2 <div class="content-padding">
3 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> 3 <div class="videos-info">
4 4 <div class="col-md-9 col-xs-5 videos-total-results">
5 <my-loader [loading]="loading | async"></my-loader> 5 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
6 </div>
7 6
7 <my-loader [loading]="loading | async"></my-loader>
8 </div>
8 9
9 <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> 10 <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
11 </div>
12 </div>
10</div> 13</div>
11 14
12<div class="videos-miniatures"> 15<div class="content-padding videos-miniatures">
13 <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div> 16 <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
14 17
15 <my-video-miniature 18 <my-video-miniature
16 class="ng-animate" 19 class="ng-animate"
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 5ece9d003..eddcf0776 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -3,18 +3,12 @@
3 margin-left: 0; 3 margin-left: 0;
4 } 4 }
5 5
6 margin-bottom: 20px;
7 border-bottom: 1px solid #f1f1f1; 6 border-bottom: 1px solid #f1f1f1;
8 height: 40px; 7 height: 40px;
9 line-height: 40px; 8 line-height: 40px;
10 9
11 my-video-sort {
12 padding-right: 0;
13 }
14
15 .videos-total-results { 10 .videos-total-results {
16 font-size: 13px; 11 font-size: 13px;
17 padding-left: 0;
18 } 12 }
19 13
20 my-loader { 14 my-loader {
@@ -26,6 +20,7 @@
26.videos-miniatures { 20.videos-miniatures {
27 min-height: 720px; 21 min-height: 720px;
28 text-align: center; 22 text-align: center;
23 padding-top: 0;
29 24
30 my-video-miniature { 25 my-video-miniature {
31 text-align: left; 26 text-align: left;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 0b0b0d944..826aa6a29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -25,9 +25,6 @@
25 </span> 25 </span>
26 26
27 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a> 27 <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
28 <span class="video-miniature-views-created-at"> 28 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
29 <span class="video-miniature-views">{{ video.views }} views</span>
30 <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
31 </span>
32 </div> 29 </div>
33</div> 30</div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 1a73648c4..778bffa29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -64,7 +64,6 @@
64 font-weight: bold; 64 font-weight: bold;
65 transition: color 0.2s; 65 transition: color 0.2s;
66 font-size: 15px; 66 font-size: 15px;
67 color: $video-miniature-title-color;
68 67
69 &:hover { 68 &:hover {
70 text-decoration: none; 69 text-decoration: none;
@@ -88,17 +87,12 @@
88 } 87 }
89 } 88 }
90 89
91 .video-miniature-author, .video-miniature-views-created-at { 90 .video-miniature-author, .video-miniature-created-at {
92 display: block; 91 display: block;
93 margin-left: 1px; 92 margin-left: 1px;
94 font-size: 11px; 93 font-size: 11px;
95 color: $video-miniature-other-infos; 94 color: $video-miniature-other-infos;
96 opacity: 0.9; 95 opacity: 0.9;
97
98 .video-miniature-created-at::before {
99 content: '\002022';
100 margin: 0 2px 0 1px;
101 }
102 } 96 }
103 97
104 .video-miniature-author { 98 .video-miniature-author {