forks
/
peertube
1
0
Fork 0
Code Releases Activity

Display other videos on xl screens on the right

This commit is contained in:
Chocobozzz 2018-09-28 14:37:04 +02:00
parent 287918da17
commit 19f2205516
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,8 @@
@import '_variables';
@import '_mixins';
@import '_bootstrap-variables';
$other-videos-width: 260px;
.root-row {
flex-direction: column;
@ -361,7 +364,7 @@
/deep/ .other-videos {
padding-left: 15px;
width: 260px;
width: $other-videos-width;
.title-page {
margin-top: 0 !important;
@ -450,6 +453,11 @@ my-video-comments {
}
}
@media screen and (min-width: map-get($grid-breakpoints, xl)) {
.video-bottom .video-info {
max-width: calc(100% - #{$other-videos-width});
}
}
@media screen and (max-width: 1600px) {
.video-bottom .video-info .video-attributes .video-attribute {

2
client/src/sass/application.scss
View File

@ -339,7 +339,7 @@ table {
font-weight: $font-semibold;
}
@media screen and (max-width: 1200px) {
@media screen and (max-width: 1600px) {
.main-col {
&.expanded {
.margin-content {

32
client/src/sass/include/_bootstrap-variables.scss Normal file
View File

@ -0,0 +1,32 @@
$dropdown-link-active-bg: inherit;
$zindex-modal: 10005;
$modal-footer-border-width: 0;
$modal-md: 600px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 900px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 900px,
xl: 1140px
);
$input-btn-focus-width: 0;
$input-btn-focus-color: inherit;
$input-focus-border-color: #ced4da;
$nav-pills-link-active-bg: #F0F0F0;
$nav-pills-link-active-color: #000;

33
client/src/sass/include/_bootstrap.scss
View File

@ -1,35 +1,4 @@
$dropdown-link-active-bg: inherit;
$zindex-modal: 10005;
$modal-footer-border-width: 0;
$modal-md: 600px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 900px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 900px,
xl: 1140px
);
$input-btn-focus-width: 0;
$input-btn-focus-color: inherit;
$input-focus-border-color: #ced4da;
$nav-pills-link-active-bg: #F0F0F0;
$nav-pills-link-active-color: #000;
@import "./_bootstrap-variables";
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';