aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 09:08:15 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 09:08:15 +0100
commitb9828abe54723ebffd2aabdad870b157518472b1 (patch)
treec74ce94ac47dc01399a17ed7bb11955eeff8a451
parent3daf400219fe8cc94025886ba14876bc59a45244 (diff)
downloadPeerTube-b9828abe54723ebffd2aabdad870b157518472b1.tar.gz
PeerTube-b9828abe54723ebffd2aabdad870b157518472b1.tar.zst
PeerTube-b9828abe54723ebffd2aabdad870b157518472b1.zip
Videos watch responsive
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss31
2 files changed, 32 insertions, 1 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index dfed4768c..43b175acc 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div [hidden]="videoNotFound" id="video-container"> 3 <div [hidden]="videoNotFound" id="video-container">
4 <video id="video-element" class="video-js vjs-peertube-skin"></video> 4 <video id="video-element" class="video-js vjs-peertube-skin vjs-fluid"></video>
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 2ccfd2749..fcf625d6c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -7,9 +7,14 @@
7 width: 888px; 7 width: 888px;
8 height: 500px; 8 height: 500px;
9 9
10 @media screen and (max-width: 800px) {
11 height: auto;
12 }
13
10 // VideoJS create an inner video player 14 // VideoJS create an inner video player
11 video { 15 video {
12 outline: 0; 16 outline: 0;
17 position: relative !important;
13 } 18 }
14 } 19 }
15} 20}
@@ -210,3 +215,29 @@
210 } 215 }
211} 216}
212 217
218
219@media screen and (max-width: 800px) {
220 .other-videos {
221 display: none;
222 }
223
224 .video-bottom {
225 .video-info {
226 .video-info-name-actions {
227 align-items: left;
228 flex-direction: column;
229 margin-bottom: 30px;
230 }
231
232 .video-info-date-views-bar {
233 align-items: left;
234 flex-direction: column;
235 margin-bottom: 30px;
236
237 .video-info-likes-dislikes-bar {
238 margin-top: 0;
239 }
240 }
241 }
242 }
243}