aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-04 18:35:39 +0200
committerRigel Kent <sendmemail@rigelk.eu>2018-09-04 18:35:39 +0200
commit3b766e181c59ce148fde73e507276c9fbaf37eb1 (patch)
tree0c94b10fc35192897ebbb2f83f8dd04a42b9504a /client
parent6aff854c0e56a11b61fa1130763c7c86e46a4c4d (diff)
downloadPeerTube-3b766e181c59ce148fde73e507276c9fbaf37eb1.tar.gz
PeerTube-3b766e181c59ce148fde73e507276c9fbaf37eb1.tar.zst
PeerTube-3b766e181c59ce148fde73e507276c9fbaf37eb1.zip
fixing grid readjustment with expand and screens < 1150px
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html14
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss9
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts4
-rw-r--r--client/src/sass/application.scss6
5 files changed, 27 insertions, 8 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 697abec8e..3eb8ef40a 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -22,7 +22,7 @@
22 <div class="sub-header-container"> 22 <div class="sub-header-container">
23 <my-menu *ngIf="isMenuDisplayed"></my-menu> 23 <my-menu *ngIf="isMenuDisplayed"></my-menu>
24 24
25 <div class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }"> 25 <div id="right-container" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
26 26
27 <div class="main-row"> 27 <div class="main-row">
28 <router-outlet></router-outlet> 28 <router-outlet></router-outlet>
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 3b6b5d8ed..582cf6e37 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -28,7 +28,7 @@
28 <!-- Video information --> 28 <!-- Video information -->
29 <div *ngIf="video" class="margin-content video-bottom"> 29 <div *ngIf="video" class="margin-content video-bottom">
30 <div class="row fullWidth"> 30 <div class="row fullWidth">
31 <div class="col-12 col-lg-9 video-info"> 31 <div class="col-12 col-lg-auto video-info">
32 <div class="video-info-first-row"> 32 <div class="video-info-first-row">
33 <div> 33 <div>
34 <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below --> 34 <div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
@@ -197,12 +197,16 @@
197 </div> 197 </div>
198 </div> 198 </div>
199 199
200 <my-video-comments [video]="video" [user]="user"></my-video-comments> 200 <my-video-comments [video]="video" [user]="user"></my-video-comments>
201 </div>
202
203 <div *ngIf="!isMenuExpanded()" class="w-100-until-1150px"></div>
204
205 <my-recommended-videos class="col-12 col-lg-3"
206 [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
201 </div> 207 </div>
202 <my-recommended-videos class="col-12 col-lg-3"
203 [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
204 </div> 208 </div>
205 209
206 <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false"> 210 <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
207 <div class="privacy-concerns-text"> 211 <div class="privacy-concerns-text">
208 <strong i18n>Friendly Reminder: </strong> 212 <strong i18n>Friendly Reminder: </strong>
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 633b16c05..be1388a83 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -37,8 +37,9 @@
37 } 37 }
38 38
39 /deep/ .video-js { 39 /deep/ .video-js {
40 width: 888px; 40 width: calc(100vw - 240px);
41 height: 500px; 41 height: auto;
42 max-height: 500px;
42 43
43 &.vjs-theater-enabled { 44 &.vjs-theater-enabled {
44 height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); 45 height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@@ -479,6 +480,10 @@
479 } 480 }
480} 481}
481 482
483@media (max-width: 1150px) {
484 .w-100-until-1150px { width: 100% !important }
485}
486
482@media screen and (max-width: 600px) { 487@media screen and (max-width: 600px) {
483 .video-bottom { 488 .video-bottom {
484 margin: 20px 0 0 0; 489 margin: 20px 0 0 0;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 768a08d42..95198f0aa 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -317,6 +317,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
317 return this.video && this.video.state.id === VideoState.TO_IMPORT 317 return this.video && this.video.state.id === VideoState.TO_IMPORT
318 } 318 }
319 319
320 isMenuExpanded () {
321 return document.getElementById('right-container').classList.contains('expanded')
322 }
323
320 hasVideoScheduledPublication () { 324 hasVideoScheduledPublication () {
321 return this.video && this.video.scheduledUpdate !== undefined 325 return this.video && this.video.scheduledUpdate !== undefined
322 } 326 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 8e663d32f..a4fea13c2 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -363,3 +363,9 @@ table {
363 } 363 }
364 } 364 }
365} 365}
366
367@media screen and (max-width: 400px) {
368 menu {
369 width: 100%;
370 }
371}