Fix watch page responsive
This commit is contained in:
parent
46ae6f6724
commit
8ff3f88347
|
@ -6,6 +6,7 @@
|
|||
height: calc(100vh - #{$header-height});
|
||||
padding: 0;
|
||||
width: $menu-width;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
menu {
|
||||
|
@ -16,7 +17,6 @@ menu {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
color: $menu-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -230,7 +230,6 @@ menu {
|
|||
@media screen and (max-width: 400px) {
|
||||
.menu-wrapper {
|
||||
width: 100% !important;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
|
|
|
@ -11,7 +11,7 @@ export class ScreenService {
|
|||
}
|
||||
|
||||
isInSmallView () {
|
||||
return this.getWindowInnerWidth() < 600
|
||||
return this.getWindowInnerWidth() < 800
|
||||
}
|
||||
|
||||
isInMobileView () {
|
||||
|
|
|
@ -110,8 +110,9 @@
|
|||
<div
|
||||
class="video-info-likes-dislikes-bar"
|
||||
*ngIf="video.likes !== 0 || video.dislikes !== 0"
|
||||
[ngbTooltip]="likesBarTooltipText"
|
||||
placement="bottom"
|
||||
[ngbTooltip]="likesBarTooltipText">
|
||||
>
|
||||
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -200,13 +201,10 @@
|
|||
<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>
|
||||
<my-recommended-videos [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>
|
||||
|
|
|
@ -99,9 +99,10 @@
|
|||
}
|
||||
|
||||
.video-info-date-views {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.video-info-channel {
|
||||
|
@ -164,8 +165,7 @@
|
|||
}
|
||||
|
||||
.video-actions-rates {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin: 20px 0 10px 0;
|
||||
align-items: start;
|
||||
|
||||
.video-actions {
|
||||
|
@ -361,12 +361,13 @@
|
|||
|
||||
/deep/ .other-videos {
|
||||
padding-left: 1em;
|
||||
width: 260px;
|
||||
|
||||
.title-page {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .video-miniature {
|
||||
.video-miniature {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
@ -388,9 +389,16 @@
|
|||
width: calc(100% - #{$menu-width});
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
.privacy-concerns {
|
||||
margin-left: $menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.expanded) {
|
||||
.privacy-concerns {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -438,34 +446,12 @@
|
|||
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.video-bottom {
|
||||
.video-info {
|
||||
.video-info-first-row {
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.video-info-date-views {
|
||||
flex-direction: column;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.video-info-likes-dislikes-bar {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video-attributes .video-attribute {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.video-bottom .video-info .video-attributes .video-attribute {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.video-bottom {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/deep/ .other-videos {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
@ -480,10 +466,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1150px) {
|
||||
.w-100-until-1150px { width: 100% !important }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.video-bottom {
|
||||
margin: 20px 0 0 0;
|
||||
|
|
|
@ -317,10 +317,6 @@ 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
|
||||
}
|
||||
|
|
|
@ -307,7 +307,7 @@ table {
|
|||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
@media screen and (max-width: 1200px) {
|
||||
.main-col {
|
||||
&.expanded {
|
||||
.margin-content {
|
||||
|
@ -337,7 +337,7 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@media screen and (max-width: $small-view) {
|
||||
.main-col {
|
||||
margin-left: 0;
|
||||
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
$small-view: 800px;
|
||||
$mobile-view: 500px;
|
||||
|
||||
$main-fonts: 'Source Sans Pro', sans-serif;
|
||||
$font-regular: 400;
|
||||
$font-semibold: 600;
|
||||
|
|
Loading…
Reference in New Issue