interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fixing grid readjustment with expand and screens < 1150px

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"> <div class="sub-header-container">
<my-menu *ngIf="isMenuDisplayed"></my-menu> <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"> <div class="main-row">
<router-outlet></router-outlet> <router-outlet></router-outlet>

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

@ -28,7 +28,7 @@
<!-- Video information --> <!-- Video information -->
<div *ngIf="video" class="margin-content video-bottom"> <div *ngIf="video" class="margin-content video-bottom">
<div class="row fullWidth"> <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 class="video-info-first-row">
<div> <div>
<div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below --> <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>
</div> </div>
<my-video-comments [video]="video" [user]="user"></my-video-comments> <my-video-comments [video]="video" [user]="user"></my-video-comments>
</div> </div>
<my-recommended-videos class="col-12 col-lg-3"
[inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" [user]="user"></my-recommended-videos>
</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" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
<div class="privacy-concerns-text"> <div class="privacy-concerns-text">
<strong i18n>Friendly Reminder: </strong> <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 { /deep/ .video-js {
width: 888px; width: calc(100vw - 240px);
height: 500px; height: auto;
max-height: 500px;
&.vjs-theater-enabled { &.vjs-theater-enabled {
height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); 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) { @media screen and (max-width: 600px) {
.video-bottom { .video-bottom {
margin: 20px 0 0 0; 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 return this.video && this.video.state.id === VideoState.TO_IMPORT
} }
isMenuExpanded () {
return document.getElementById('right-container').classList.contains('expanded')
}
hasVideoScheduledPublication () { hasVideoScheduledPublication () {
return this.video && this.video.scheduledUpdate !== undefined 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%;
}
}