diff options
Diffstat (limited to 'client/src/app/videos/video-list')
4 files changed, 14 insertions, 7 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 e119517a8..2a753adba 100644 --- a/client/src/app/videos/video-list/video-list.component.html +++ b/client/src/app/videos/video-list/video-list.component.html | |||
@@ -1,10 +1,12 @@ | |||
1 | <div class="row videos-info"> | 1 | <div class="row col-md-12 videos-info"> |
2 | <div class="col-md-9 videos-total-results"> | 2 | <div class="col-md-9 col-xs-5 videos-total-results"> |
3 | <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> | 3 | <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> |
4 | 4 | ||
5 | <my-loader [loading]="loading | async"></my-loader> | 5 | <my-loader [loading]="loading | async"></my-loader> |
6 | </div> | 6 | </div> |
7 | <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> | 7 | |
8 | |||
9 | <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> | ||
8 | </div> | 10 | </div> |
9 | 11 | ||
10 | <div class="videos-miniatures"> | 12 | <div class="videos-miniatures"> |
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 1f491a6c3..fdff42c41 100644 --- a/client/src/app/videos/video-list/video-list.component.scss +++ b/client/src/app/videos/video-list/video-list.component.scss | |||
@@ -1,12 +1,12 @@ | |||
1 | .videos-info { | 1 | .videos-info { |
2 | @media screen and (max-width: 400px) { | ||
3 | margin-left: 0; | ||
4 | } | ||
2 | 5 | ||
3 | padding-bottom: 20px; | ||
4 | margin-bottom: 20px; | 6 | margin-bottom: 20px; |
5 | border-bottom: 1px solid #f1f1f1; | 7 | border-bottom: 1px solid #f1f1f1; |
6 | height: 40px; | 8 | height: 40px; |
7 | line-height: 40px; | 9 | line-height: 40px; |
8 | width: 765px; | ||
9 | margin-left: 15px; | ||
10 | 10 | ||
11 | my-video-sort { | 11 | my-video-sort { |
12 | padding-right: 0; | 12 | padding-right: 0; |
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 373ff6bfb..0a0925dea 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" (mouseenter)="onHover()" (mouseleave)="onBlur()"> | 1 | <div class="video-miniature col-md-4 col-sm-6 col-xs-6" (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" |
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 3a096dabd..6b3fa3bf0 100644 --- a/client/src/app/videos/video-list/video-miniature.component.scss +++ b/client/src/app/videos/video-list/video-miniature.component.scss | |||
@@ -1,9 +1,14 @@ | |||
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 | |||
4 | margin-top: 30px; | 8 | margin-top: 30px; |
5 | display: inline-block; | 9 | display: inline-block; |
6 | position: relative; | 10 | position: relative; |
11 | min-width: 220px; | ||
7 | 12 | ||
8 | .video-miniature-thumbnail { | 13 | .video-miniature-thumbnail { |
9 | display: inline-block; | 14 | display: inline-block; |