aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 11:06:33 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (patch)
treeae0541d99056d75b08f14e8e4ea73f67f173d942 /client/src/app/videos
parent240c64c5f4277f0ce36c094f0663bd30d264ec40 (diff)
downloadPeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.gz
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.zst
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.zip
Client: responsive design
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/video-list/video-list.component.scss2
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts2
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html20
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss61
4 files changed, 48 insertions, 37 deletions
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 010f0dbfe..5ece9d003 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -25,8 +25,10 @@
25 25
26.videos-miniatures { 26.videos-miniatures {
27 min-height: 720px; 27 min-height: 720px;
28 text-align: center;
28 29
29 my-video-miniature { 30 my-video-miniature {
31 text-align: left;
30 transition: all 0.5s ease; 32 transition: all 0.5s ease;
31 33
32 &.ng-enter { 34 &.ng-enter {
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index b9f19b4f1..16e1b5bcc 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -22,7 +22,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false); 22 loading: BehaviorSubject<boolean> = new BehaviorSubject(false);
23 pagination: RestPagination = { 23 pagination: RestPagination = {
24 currentPage: 1, 24 currentPage: 1,
25 itemsPerPage: 9, 25 itemsPerPage: 25,
26 totalItems: null 26 totalItems: null
27 }; 27 };
28 sort: SortField; 28 sort: SortField;
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 b8b448631..0b0b0d944 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()"> 1<div class="video-miniature" (mouseenter)="onHover()" (mouseleave)="onBlur()">
2 <a 2 <a
3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description" 3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
4 class="video-miniature-thumbnail" 4 class="video-miniature-thumbnail"
@@ -8,18 +8,20 @@
8 NSFW 8 NSFW
9 </div> 9 </div>
10 10
11 <span class="video-miniature-duration">{{ video.duration }}</span> 11 <div class="video-miniature-thumbnail-overlay">
12 <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
13 <span class="video-miniature-thumbnail-overlay-duration">{{ video.duration }}</span>
14 </div>
12 </a> 15 </a>
13 16
17 <span
18 *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
19 class="video-miniature-remove glyphicon glyphicon-remove"
20 ></span>
21
14 <div class="video-miniature-informations"> 22 <div class="video-miniature-informations">
15 <span class="video-miniature-name-tags"> 23 <span class="video-miniature-name">
16 <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a> 24 <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
17
18 <div class="video-miniature-tags">
19 <span *ngFor="let tag of video.tags" class="video-miniature-tag">
20 <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
21 </span>
22 </div>
23 </span> 25 </span>
24 26
25 <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>
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 f88ced819..1a73648c4 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,15 +1,11 @@
1@import "../../../sass/pre-customizations.scss"; 1@import "../../../sass/pre-customizations.scss";
2 2
3.video-miniature { 3.video-miniature {
4 @media screen and (max-width: 400px) {
5 padding: 0;
6 }
7
8 margin-top: 30px; 4 margin-top: 30px;
9 display: inline-block; 5 display: inline-block;
10 position: relative; 6 position: relative;
11 min-width: 220px;
12 height: 190px; 7 height: 190px;
8 width: 220px;
13 9
14 .video-miniature-thumbnail { 10 .video-miniature-thumbnail {
15 display: inline-block; 11 display: inline-block;
@@ -30,37 +26,48 @@
30 height: 110px; 26 height: 110px;
31 } 27 }
32 28
33 .video-miniature-duration { 29 img, .thumbnail-nsfw {
30 border-radius: 3px;
31 }
32
33 .video-miniature-thumbnail-overlay {
34 position: absolute; 34 position: absolute;
35 right: 5px; 35 right: 0px;
36 bottom: 2px; 36 bottom: 0px;
37 display: inline-block; 37 display: inline-block;
38 background-color: rgba(0, 0, 0, 0.8); 38 background-color: rgba(0, 0, 0, 0.7);
39 color: rgba(255, 255, 255, 0.8); 39 color: #fff;
40 padding: 2px; 40 padding: 3px 5px;
41 font-size: 11px; 41 font-size: 11px;
42 font-weight: bold;
43 width: 100%;
44
45 .video-miniature-thumbnail-overlay-views {
46
47 }
48
49 .video-miniature-thumbnail-overlay-duration {
50 float: right;
51 }
42 } 52 }
43 } 53 }
44 54
45 .video-miniature-informations { 55 .video-miniature-informations {
46 width: 200px; 56 width: 200px;
47 57
48 .video-miniature-name-tags { 58 .video-miniature-name {
59 height: 23px;
49 display: block; 60 display: block;
61 overflow: hidden;
62 text-overflow: ellipsis;
63 white-space: nowrap;
64 font-weight: bold;
65 transition: color 0.2s;
66 font-size: 15px;
67 color: $video-miniature-title-color;
50 68
51 .video-miniature-name { 69 &:hover {
52 height: 23px; 70 text-decoration: none;
53 display: block;
54 overflow: hidden;
55 text-overflow: ellipsis;
56 white-space: nowrap;
57 font-weight: bold;
58 transition: color 0.2s;
59 font-size: 15px;
60
61 &:hover {
62 text-decoration: none;
63 }
64 } 71 }
65 72
66 .video-miniature-tags { 73 .video-miniature-tags {
@@ -84,8 +91,8 @@
84 .video-miniature-author, .video-miniature-views-created-at { 91 .video-miniature-author, .video-miniature-views-created-at {
85 display: block; 92 display: block;
86 margin-left: 1px; 93 margin-left: 1px;
87 font-size: 12px; 94 font-size: 11px;
88 color: #337ab7; 95 color: $video-miniature-other-infos;
89 opacity: 0.9; 96 opacity: 0.9;
90 97
91 .video-miniature-created-at::before { 98 .video-miniature-created-at::before {