interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Videos watch responsive

This commit is contained in:
Chocobozzz 2017-12-11 09:08:15 +01:00
parent 3daf400219
commit b9828abe54
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -1,7 +1,7 @@
<div class="row"> <div class="row">
<!-- We need the video container for videojs so we just hide it --> <!-- We need the video container for videojs so we just hide it -->
<div [hidden]="videoNotFound" id="video-container"> <div [hidden]="videoNotFound" id="video-container">
<video id="video-element" class="video-js vjs-peertube-skin"></video> <video id="video-element" class="video-js vjs-peertube-skin vjs-fluid"></video>
</div> </div>
<div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>

31
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -7,9 +7,14 @@
width: 888px; width: 888px;
height: 500px; height: 500px;
@media screen and (max-width: 800px) {
height: auto;
}
// VideoJS create an inner video player // VideoJS create an inner video player
video { video {
outline: 0; outline: 0;
position: relative !important;
} }
} }
} }
@ -210,3 +215,29 @@
} }
} }
@media screen and (max-width: 800px) {
.other-videos {
display: none;
}
.video-bottom {
.video-info {
.video-info-name-actions {
align-items: left;
flex-direction: column;
margin-bottom: 30px;
}
.video-info-date-views-bar {
align-items: left;
flex-direction: column;
margin-bottom: 30px;
.video-info-likes-dislikes-bar {
margin-top: 0;
}
}
}
}
}