forks/peertube
1
0
Fork 0
Code Releases Activity

Fix overview page on mobile

Browse source
This commit is contained in:
Chocobozzz 2018-09-04 17:30:57 +02:00
parent 0292eb8c88
commit 6aff854c0e
No known key found for this signature in database
GPG key ID: 583A612D890159BE
4 changed files with 43 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/src/app/shared/video/abstract-video-list.scss
View file

@ -18,31 +18,6 @@ my-video-feed {
@media screen and (max-width: 500px) {
.videos {
text-align: center;
/deep/ .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 20px;
.video-miniature-information {
width: 100% !important;
span {
width: 100%;
}
}
.video-thumbnail {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
}
@include video-miniature-small-screen;
}
}

12
client/src/app/videos/video-list/video-overview.component.html
View file

@ -7,9 +7,7 @@
<a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
</div>
<div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
<div class="section" *ngFor="let object of overview.tags">
@ -17,9 +15,7 @@
<a routerLink="/search" [queryParams]="{ tagOneOf: [ object.tag ] }">{{ object.tag }}</a>
</div>
<div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
<div class="section channel" *ngFor="let object of overview.channels">
@ -31,9 +27,7 @@
</a>
</div>
<div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
<my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
</div>
</div>

10
client/src/app/videos/video-list/video-overview.component.scss
View file

@ -7,6 +7,10 @@
&:first-child {
padding-top: 30px;
}
my-video-miniature {
text-align: left;
}
}
.section-title {
@ -33,4 +37,10 @@
margin-right: 10px;
}
}
}
@media screen and (max-width: 500px) {
.section {
@include video-miniature-small-screen;
}
}

29
client/src/sass/include/_mixins.scss
View file

@ -471,4 +471,33 @@
text-align: center;
align-items: center;
}
}
@mixin video-miniature-small-screen {
text-align: center;
/deep/ .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 20px;
.video-miniature-information {
width: 100% !important;
span {
width: 100%;
}
}
.video-thumbnail {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
}
}