forks/peertube
1
0
Fork 0
Code Releases Activity

fixing grid readjustment with expand and screens < 1150px

Browse source
This commit is contained in:
Rigel Kent 2018-09-04 18:35:39 +02:00
parent 6aff854c0e
commit 3b766e181c
No known key found for this signature in database
GPG key ID: EA12971B0E438F36
5 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/app/app.component.html
View file

@ -22,7 +22,7 @@
<div class="sub-header-container">
<my-menu *ngIf="isMenuDisplayed"></my-menu>
<div class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
<div id="right-container" class="main-col container-fluid" [ngClass]="{ expanded: isMenuDisplayed === false }">
<div class="main-row">
<router-outlet></router-outlet>

16
client/src/app/videos/+video-watch/video-watch.component.html
View file

@ -28,7 +28,7 @@
<!-- Video information -->
<div *ngIf="video" class="margin-content video-bottom">
<div class="row fullWidth">
<div class="col-12 col-lg-9 video-info">
<div class="col-12 col-lg-auto video-info">
<div class="video-info-first-row">
<div>
<div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
@ -197,12 +197,16 @@
</div>
</div>
<my-video-comments [video]="video" [user]="user"></my-video-comments>
</div>
<my-recommended-videos class="col-12 col-lg-3"
[inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
</div>
<my-video-comments [video]="video" [user]="user"></my-video-comments>
</div>
<div *ngIf="!isMenuExpanded()" class="w-100-until-1150px"></div>
<my-recommended-videos class="col-12 col-lg-3"
[inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
</div>
</div>
<div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
<div class="privacy-concerns-text">
<strong i18n>Friendly Reminder: </strong>

9
client/src/app/videos/+video-watch/video-watch.component.scss
View file

@ -37,8 +37,9 @@
}
/deep/ .video-js {
width: 888px;
height: 500px;
width: calc(100vw - 240px);
height: auto;
max-height: 500px;
&.vjs-theater-enabled {
height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@ -479,6 +480,10 @@
}
}
@media (max-width: 1150px) {
.w-100-until-1150px { width: 100% !important }
}
@media screen and (max-width: 600px) {
.video-bottom {
margin: 20px 0 0 0;

4
client/src/app/videos/+video-watch/video-watch.component.ts
View file

@ -317,6 +317,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
return this.video && this.video.state.id === VideoState.TO_IMPORT
}
isMenuExpanded () {
return document.getElementById('right-container').classList.contains('expanded')
}
hasVideoScheduledPublication () {
return this.video && this.video.scheduledUpdate !== undefined
}

6
client/src/sass/application.scss
View file

@ -363,3 +363,9 @@ table {
}
}
}
@media screen and (max-width: 400px) {
menu {
width: 100%;
}
}