aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-09-05 11:20:44 +0200
committerChocobozzz <me@florianbigard.com>2018-09-05 11:20:44 +0200
commit8ff3f88347cb733ca8a3978ba6eb9763fb3ea294 (patch)
treea8711905f240a8e511659b45d537e780f684e7f1 /client
parent46ae6f67249dea59176488ad1775f80109b8b8db (diff)
downloadPeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.tar.gz
PeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.tar.zst
PeerTube-8ff3f88347cb733ca8a3978ba6eb9763fb3ea294.zip
Fix watch page responsive
Diffstat (limited to 'client')
-rw-r--r--client/src/app/menu/menu.component.scss3
-rw-r--r--client/src/app/shared/misc/screen.service.ts2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss48
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts4
-rw-r--r--client/src/sass/application.scss4
-rw-r--r--client/src/sass/include/_variables.scss3
7 files changed, 26 insertions, 48 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c725580d1..a699da12f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,6 +6,7 @@
6 height: calc(100vh - #{$header-height}); 6 height: calc(100vh - #{$header-height});
7 padding: 0; 7 padding: 0;
8 width: $menu-width; 8 width: $menu-width;
9 z-index: 10000;
9} 10}
10 11
11menu { 12menu {
@@ -16,7 +17,6 @@ menu {
16 white-space: nowrap; 17 white-space: nowrap;
17 text-overflow: ellipsis; 18 text-overflow: ellipsis;
18 overflow: hidden; 19 overflow: hidden;
19 z-index: 1000;
20 color: $menu-color; 20 color: $menu-color;
21 display: flex; 21 display: flex;
22 flex-direction: column; 22 flex-direction: column;
@@ -230,7 +230,6 @@ menu {
230@media screen and (max-width: 400px) { 230@media screen and (max-width: 400px) {
231 .menu-wrapper { 231 .menu-wrapper {
232 width: 100% !important; 232 width: 100% !important;
233 z-index: 10000;
234 } 233 }
235 234
236 .top-menu { 235 .top-menu {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 2e01839b2..1cbc96b14 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -11,7 +11,7 @@ export class ScreenService {
11 } 11 }
12 12
13 isInSmallView () { 13 isInSmallView () {
14 return this.getWindowInnerWidth() < 600 14 return this.getWindowInnerWidth() < 800
15 } 15 }
16 16
17 isInMobileView () { 17 isInMobileView () {
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 582cf6e37..cafd92dbd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -110,8 +110,9 @@
110 <div 110 <div
111 class="video-info-likes-dislikes-bar" 111 class="video-info-likes-dislikes-bar"
112 *ngIf="video.likes !== 0 || video.dislikes !== 0" 112 *ngIf="video.likes !== 0 || video.dislikes !== 0"
113 [ngbTooltip]="likesBarTooltipText"
113 placement="bottom" 114 placement="bottom"
114 [ngbTooltip]="likesBarTooltipText"> 115 >
115 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> 116 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
116 </div> 117 </div>
117 </div> 118 </div>
@@ -200,13 +201,10 @@
200 <my-video-comments [video]="video" [user]="user"></my-video-comments> 201 <my-video-comments [video]="video" [user]="user"></my-video-comments>
201 </div> 202 </div>
202 203
203 <div *ngIf="!isMenuExpanded()" class="w-100-until-1150px"></div> 204 <my-recommended-videos [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
204
205 <my-recommended-videos class="col-12 col-lg-3"
206 [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
207 </div> 205 </div>
208 </div> 206 </div>
209 207
210 <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false"> 208 <div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
211 <div class="privacy-concerns-text"> 209 <div class="privacy-concerns-text">
212 <strong i18n>Friendly Reminder: </strong> 210 <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 edd5ae6ba..58c45cde9 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -99,9 +99,10 @@
99 } 99 }
100 100
101 .video-info-date-views { 101 .video-info-date-views {
102 font-size: 16px;
103 margin-bottom: 10px;
104 flex-grow: 1; 102 flex-grow: 1;
103 margin-bottom: 10px;
104 margin-right: 10px;
105 font-size: 16px;
105 } 106 }
106 107
107 .video-info-channel { 108 .video-info-channel {
@@ -164,8 +165,7 @@
164 } 165 }
165 166
166 .video-actions-rates { 167 .video-actions-rates {
167 margin-top: 20px; 168 margin: 20px 0 10px 0;
168 margin-bottom: 10px;
169 align-items: start; 169 align-items: start;
170 170
171 .video-actions { 171 .video-actions {
@@ -361,12 +361,13 @@
361 361
362 /deep/ .other-videos { 362 /deep/ .other-videos {
363 padding-left: 1em; 363 padding-left: 1em;
364 width: 260px;
364 365
365 .title-page { 366 .title-page {
366 margin-top: 0 !important; 367 margin-top: 0 !important;
367 } 368 }
368 369
369 /deep/ .video-miniature { 370 .video-miniature {
370 display: flex; 371 display: flex;
371 height: 100%; 372 height: 100%;
372 margin-bottom: 20px; 373 margin-bottom: 20px;
@@ -388,9 +389,16 @@
388 width: calc(100% - #{$menu-width}); 389 width: calc(100% - #{$menu-width});
389} 390}
390 391
392@media screen and (max-width: $small-view) {
393 .privacy-concerns {
394 margin-left: $menu-width;
395 }
396}
397
391:host-context(.expanded) { 398:host-context(.expanded) {
392 .privacy-concerns { 399 .privacy-concerns {
393 width: 100%; 400 width: 100%;
401 margin-left: 0;
394 } 402 }
395} 403}
396 404
@@ -438,34 +446,12 @@
438 446
439 447
440@media screen and (max-width: 1600px) { 448@media screen and (max-width: 1600px) {
441 .video-bottom { 449 .video-bottom .video-info .video-attributes .video-attribute {
442 .video-info { 450 margin-bottom: 5px;
443 .video-info-first-row {
444 flex-direction: column;
445 margin-bottom: 20px;
446 }
447
448 .video-info-date-views {
449 flex-direction: column;
450 margin-bottom: 30px;
451
452 .video-info-likes-dislikes-bar {
453 margin-top: 0;
454 }
455 }
456
457 .video-attributes .video-attribute {
458 margin-bottom: 5px;
459 }
460 }
461 } 451 }
462} 452}
463 453
464@media screen and (max-width: 1300px) { 454@media screen and (max-width: 1300px) {
465 .video-bottom {
466 flex-direction: column;
467 }
468
469 /deep/ .other-videos { 455 /deep/ .other-videos {
470 padding-left: 0 !important; 456 padding-left: 0 !important;
471 } 457 }
@@ -480,10 +466,6 @@
480 } 466 }
481} 467}
482 468
483@media (max-width: 1150px) {
484 .w-100-until-1150px { width: 100% !important }
485}
486
487@media screen and (max-width: 600px) { 469@media screen and (max-width: 600px) {
488 .video-bottom { 470 .video-bottom {
489 margin: 20px 0 0 0; 471 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 95198f0aa..768a08d42 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -317,10 +317,6 @@ 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
324 hasVideoScheduledPublication () { 320 hasVideoScheduledPublication () {
325 return this.video && this.video.scheduledUpdate !== undefined 321 return this.video && this.video.scheduledUpdate !== undefined
326 } 322 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c380fe5bf..fd0d5e458 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -307,7 +307,7 @@ table {
307 font-weight: $font-semibold; 307 font-weight: $font-semibold;
308} 308}
309 309
310@media screen and (max-width: 1000px) { 310@media screen and (max-width: 1200px) {
311 .main-col { 311 .main-col {
312 &.expanded { 312 &.expanded {
313 .margin-content { 313 .margin-content {
@@ -337,7 +337,7 @@ table {
337 } 337 }
338} 338}
339 339
340@media screen and (max-width: 600px) { 340@media screen and (max-width: $small-view) {
341 .main-col { 341 .main-col {
342 margin-left: 0; 342 margin-left: 0;
343 343
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 792a3f9c2..fb253fc1f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,6 @@
1$small-view: 800px;
2$mobile-view: 500px;
3
1$main-fonts: 'Source Sans Pro', sans-serif; 4$main-fonts: 'Source Sans Pro', sans-serif;
2$font-regular: 400; 5$font-regular: 400;
3$font-semibold: 600; 6$font-semibold: 600;