diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 121e60ffc..220b104b7 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core'
import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
import { AuthService, ServerService } from '@app/core'
-import { isInMobileView } from '@app/shared/misc/utils'
+import { isInSmallView } from '@app/shared/misc/utils'
@Component({
selector: 'my-app',
@@ -54,14 +54,14 @@ export class AppComponent implements OnInit {
this.serverService.loadVideoPrivacies()
// Do not display menu on small screens
- if (isInMobileView()) {
+ if (isInSmallView()) {
this.isMenuDisplayed = false
}
this.router.events.subscribe(
e => {
// User clicked on a link in the menu, change the page
- if (e instanceof GuardsCheckStart && isInMobileView()) {
+ if (e instanceof GuardsCheckStart && isInSmallView()) {
this.isMenuDisplayed = false
}
}
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 20f13b28c..2eae1b27e 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -2,7 +2,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
import 'rxjs/add/operator/debounceTime'
import 'rxjs/add/operator/distinctUntilChanged'
-import { isInMobileView } from '@app/shared/misc/utils'
+import { isInSmallView } from '@app/shared/misc/utils'
import { MarkdownService } from '@app/videos/shared'
import { Subject } from 'rxjs/Subject'
import truncate from 'lodash-es/truncate'
@@ -74,7 +74,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
}
arePreviewsDisplayed () {
- return isInMobileView() === false
+ return isInSmallView() === false
}
private updateDescriptionPreviews () {
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 0e6e6b366..6620ac973 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -55,15 +55,20 @@ function dateToHuman (date: string) {
return datePipe.transform(date, 'medium')
}
-function isInMobileView () {
+function isInSmallView () {
return window.innerWidth < 600
}
+function isInMobileView () {
+ return window.innerWidth < 500
+}
+
export {
viewportHeight,
getParameterByName,
populateAsyncUserVideoChannels,
getAbsoluteAPIUrl,
dateToHuman,
+ isInSmallView,
isInMobileView
}
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 0f0ff20f0..3fdfcefa0 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -6,23 +6,29 @@
}
}
-@media screen and (max-width: 400px) and (min-resolution: 1.5dppx) {
+@media screen and (max-width: 500px) {
.videos {
text-align: center;
/deep/ .video-miniature {
padding-right: 0;
- height: 215px;
+ height: auto;
width: 100%;
+ margin-bottom: 20px;
.video-miniature-information {
- width: 100%;
+ width: 100% !important;
+
+ span {
+ width: 100%;
+ }
}
/deep/ .video-thumbnail {
width: 100%;
img {
+ height: auto;
width: 100%;
}
}
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index bf0827207..a25fc532c 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -1,5 +1,6 @@
import { OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
+import { isInMobileView, isInSmallView } from '@app/shared/misc/utils'
import { NotificationsService } from 'angular2-notifications'
import { Observable } from 'rxjs/Observable'
import { AuthService } from '../../core/auth'
@@ -42,6 +43,10 @@ export abstract class AbstractVideoList implements OnInit {
const routeParams = this.route.snapshot.params
this.loadRouteParams(routeParams)
+ if (isInMobileView()) {
+ this.pagination.itemsPerPage = 5
+ }
+
if (this.loadOnInit === true) this.loadMoreVideos('after')
}
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 5c698e8f6..8acfb3c41 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,7 +2,7 @@
[routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
class="video-thumbnail"
>
-
+