borekon/PeerTube_original
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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) { @media screen and (max-width: 500px) {
.videos { .videos {
text-align: center; @include video-miniature-small-screen;
/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;
}
}
}
} }
} }

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

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

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

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

@ -472,3 +472,32 @@
align-items: 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;
}
}
}
}