aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-09-28 14:37:04 +0200
committerChocobozzz <me@florianbigard.com>2018-09-28 14:37:04 +0200
commit19f22055162185d5f46d5916c82de3639de209a1 (patch)
tree580182b08fbcacf5a46028cb4c0b08d2c2cd9b5c
parent287918da174bf9a57612745198cd2ae1d08a282d (diff)
downloadPeerTube-19f22055162185d5f46d5916c82de3639de209a1.tar.gz
PeerTube-19f22055162185d5f46d5916c82de3639de209a1.tar.zst
PeerTube-19f22055162185d5f46d5916c82de3639de209a1.zip
Display other videos on xl screens on the right
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss10
-rw-r--r--client/src/sass/application.scss2
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss32
-rw-r--r--client/src/sass/include/_bootstrap.scss33
4 files changed, 43 insertions, 34 deletions
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 eb63cbde7..f31e4694a 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,5 +1,8 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3@import '_bootstrap-variables';
4
5$other-videos-width: 260px;
3 6
4.root-row { 7.root-row {
5 flex-direction: column; 8 flex-direction: column;
@@ -361,7 +364,7 @@
361 364
362 /deep/ .other-videos { 365 /deep/ .other-videos {
363 padding-left: 15px; 366 padding-left: 15px;
364 width: 260px; 367 width: $other-videos-width;
365 368
366 .title-page { 369 .title-page {
367 margin-top: 0 !important; 370 margin-top: 0 !important;
@@ -450,6 +453,11 @@ my-video-comments {
450 } 453 }
451} 454}
452 455
456@media screen and (min-width: map-get($grid-breakpoints, xl)) {
457 .video-bottom .video-info {
458 max-width: calc(100% - #{$other-videos-width});
459 }
460}
453 461
454@media screen and (max-width: 1600px) { 462@media screen and (max-width: 1600px) {
455 .video-bottom .video-info .video-attributes .video-attribute { 463 .video-bottom .video-info .video-attributes .video-attribute {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 40a9ed231..e2271d7d9 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -339,7 +339,7 @@ table {
339 font-weight: $font-semibold; 339 font-weight: $font-semibold;
340} 340}
341 341
342@media screen and (max-width: 1200px) { 342@media screen and (max-width: 1600px) {
343 .main-col { 343 .main-col {
344 &.expanded { 344 &.expanded {
345 .margin-content { 345 .margin-content {
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
new file mode 100644
index 000000000..ce2532af5
--- /dev/null
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -0,0 +1,32 @@
1$dropdown-link-active-bg: inherit;
2
3$zindex-modal: 10005;
4$modal-footer-border-width: 0;
5$modal-md: 600px;
6
7$grid-breakpoints: (
8 // Extra small screen / phone
9 xs: 0,
10 // Small screen / phone
11 sm: 576px,
12 // Medium screen / tablet
13 md: 768px,
14 // Large screen / desktop
15 lg: 900px,
16 // Extra large screen / wide desktop
17 xl: 1200px
18);
19
20$container-max-widths: (
21 sm: 420px,
22 md: 720px,
23 lg: 900px,
24 xl: 1140px
25);
26
27$input-btn-focus-width: 0;
28$input-btn-focus-color: inherit;
29$input-focus-border-color: #ced4da;
30
31$nav-pills-link-active-bg: #F0F0F0;
32$nav-pills-link-active-color: #000; \ No newline at end of file
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 7bce85c37..9c7464873 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,35 +1,4 @@
1$dropdown-link-active-bg: inherit; 1@import "./_bootstrap-variables";
2
3$zindex-modal: 10005;
4$modal-footer-border-width: 0;
5$modal-md: 600px;
6
7$grid-breakpoints: (
8 // Extra small screen / phone
9 xs: 0,
10 // Small screen / phone
11 sm: 576px,
12 // Medium screen / tablet
13 md: 768px,
14 // Large screen / desktop
15 lg: 900px,
16 // Extra large screen / wide desktop
17 xl: 1200px
18);
19
20$container-max-widths: (
21 sm: 420px,
22 md: 720px,
23 lg: 900px,
24 xl: 1140px
25);
26
27$input-btn-focus-width: 0;
28$input-btn-focus-color: inherit;
29$input-focus-border-color: #ced4da;
30
31$nav-pills-link-active-bg: #F0F0F0;
32$nav-pills-link-active-color: #000;
33 2
34@import '~bootstrap/scss/functions'; 3@import '~bootstrap/scss/functions';
35@import '~bootstrap/scss/variables'; 4@import '~bootstrap/scss/variables';