aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-09-04 17:30:57 +0200
committerChocobozzz <me@florianbigard.com>2018-09-04 17:31:30 +0200
commit6aff854c0e56a11b61fa1130763c7c86e46a4c4d (patch)
treee76567630c72e882f25b36993a482956eb411b80
parent0292eb8c88e83b418db403144cbb3732d5721eaf (diff)
downloadPeerTube-6aff854c0e56a11b61fa1130763c7c86e46a4c4d.tar.gz
PeerTube-6aff854c0e56a11b61fa1130763c7c86e46a4c4d.tar.zst
PeerTube-6aff854c0e56a11b61fa1130763c7c86e46a4c4d.zip
Fix overview page on mobile
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss27
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html12
-rw-r--r--client/src/app/videos/video-list/video-overview.component.scss10
-rw-r--r--client/src/sass/include/_mixins.scss29
4 files changed, 43 insertions, 35 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 91091a5bb..3f9c73a29 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -18,31 +18,6 @@ my-video-feed {
18 18
19@media screen and (max-width: 500px) { 19@media screen and (max-width: 500px) {
20 .videos { 20 .videos {
21 text-align: center; 21 @include video-miniature-small-screen;
22
23 /deep/ .video-miniature {
24 padding-right: 0;
25 height: auto;
26 width: 100%;
27 margin-bottom: 20px;
28
29 .video-miniature-information {
30 width: 100% !important;
31
32 span {
33 width: 100%;
34 }
35 }
36
37 .video-thumbnail {
38 width: 100%;
39 height: auto;
40
41 img {
42 width: 100%;
43 height: auto;
44 }
45 }
46 }
47 } 22 }
48} 23}
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index be9db3d90..4150cd5e1 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,9 +7,7 @@
7 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 7 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
8 </div> 8 </div>
9 9
10 <div> 10 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
11 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
12 </div>
13 </div> 11 </div>
14 12
15 <div class="section" *ngFor="let object of overview.tags"> 13 <div class="section" *ngFor="let object of overview.tags">
@@ -17,9 +15,7 @@
17 <a routerLink="/search" [queryParams]="{ tagOneOf: [ object.tag ] }">{{ object.tag }}</a> 15 <a routerLink="/search" [queryParams]="{ tagOneOf: [ object.tag ] }">{{ object.tag }}</a>
18 </div> 16 </div>
19 17
20 <div> 18 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
21 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
22 </div>
23 </div> 19 </div>
24 20
25 <div class="section channel" *ngFor="let object of overview.channels"> 21 <div class="section channel" *ngFor="let object of overview.channels">
@@ -31,9 +27,7 @@
31 </a> 27 </a>
32 </div> 28 </div>
33 29
34 <div> 30 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
35 <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
36 </div>
37 </div> 31 </div>
38 32
39</div> 33</div>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 73b6d2e53..e7dc60b4b 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -7,6 +7,10 @@
7 &:first-child { 7 &:first-child {
8 padding-top: 30px; 8 padding-top: 30px;
9 } 9 }
10
11 my-video-miniature {
12 text-align: left;
13 }
10} 14}
11 15
12.section-title { 16.section-title {
@@ -33,4 +37,10 @@
33 margin-right: 10px; 37 margin-right: 10px;
34 } 38 }
35 } 39 }
40}
41
42@media screen and (max-width: 500px) {
43 .section {
44 @include video-miniature-small-screen;
45 }
36} \ No newline at end of file 46} \ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 547f03caa..765297c87 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -471,4 +471,33 @@
471 text-align: center; 471 text-align: center;
472 align-items: center; 472 align-items: center;
473 } 473 }
474}
475
476@mixin video-miniature-small-screen {
477 text-align: center;
478
479 /deep/ .video-miniature {
480 padding-right: 0;
481 height: auto;
482 width: 100%;
483 margin-bottom: 20px;
484
485 .video-miniature-information {
486 width: 100% !important;
487
488 span {
489 width: 100%;
490 }
491 }
492
493 .video-thumbnail {
494 width: 100%;
495 height: auto;
496
497 img {
498 width: 100%;
499 height: auto;
500 }
501 }
502 }
474} \ No newline at end of file 503} \ No newline at end of file