diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c725580d1..a699da12f 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -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 {
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index 2e01839b2..1cbc96b14 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -11,7 +11,7 @@ export class ScreenService {
}
isInSmallView () {
- return this.getWindowInnerWidth() < 600
+ return this.getWindowInnerWidth() < 800
}
isInMobileView () {
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 582cf6e37..cafd92dbd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -110,8 +110,9 @@
@@ -200,13 +201,10 @@
-
-
-
+
-
+
Friendly Reminder:
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 edd5ae6ba..58c45cde9 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -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;
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 95198f0aa..768a08d42 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -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
}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c380fe5bf..fd0d5e458 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -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;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 792a3f9c2..fb253fc1f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,6 @@
+$small-view: 800px;
+$mobile-view: 500px;
+
$main-fonts: 'Source Sans Pro', sans-serif;
$font-regular: 400;
$font-semibold: 600;