diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 641fcb38a..77f959fef 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -1,4 +1,5 @@
-
+
-
+
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 670fe992c..4c00431fa 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -64,3 +64,23 @@
}
}
}
+
+@media screen and (max-width: 800px) {
+ .video {
+ flex-direction: column;
+ height: auto;
+ text-align: center;
+
+ input[type=checkbox] {
+ display: none;
+ }
+
+ my-video-thumbnail {
+ margin-right: 0;
+ }
+
+ .video-buttons {
+ margin-top: 10px;
+ }
+ }
+}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 63d63d287..97ceadde3 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -9,10 +9,6 @@ menu {
z-index: 1000;
color: $menu-color;
- @media screen and (max-width: 550px) {
- font-size: 90%;
- }
-
.logged-in-block {
height: 100px;
background-color: rgba(255, 255, 255, 0.15);
@@ -68,7 +64,7 @@ menu {
font-size: 15px;
height: $button-height;
line-height: $button-height;
- width: 190px;
+ width: 100%;
border-radius: 3px;
text-align: center;
color: $menu-color;
@@ -139,3 +135,59 @@ menu {
}
}
}
+
+@media screen and (max-width: 800px) {
+ menu {
+ .logged-in-block {
+ padding-left: 10px;
+
+ img {
+ display: none;
+ }
+
+ .logged-in-info {
+ .logged-in-username {
+ font-size: 14px;
+ }
+
+ .logged-in-email {
+ font-size: 11px;
+ max-width: 120px;
+ }
+ }
+
+ .logged-in-more {
+ margin-right: 5px;
+
+ .login-button, .create-account-button {
+ font-weight: $font-semibold;
+ font-size: 15px;
+ height: $button-height;
+ line-height: $button-height;
+ width: 190px;
+ }
+ }
+ }
+
+ .button-block {
+ margin: 20px 10px 25px 10px;
+
+ .login-button, .create-account-button {
+ font-size: 13px;
+ }
+ }
+
+ .panel-block {
+ margin-bottom: 30px;
+ margin-left: 10px;
+
+ a {
+ font-size: 14px;
+
+ .icon {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+}
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 fcf625d6c..83a7cc41d 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -223,6 +223,8 @@
.video-bottom {
.video-info {
+ margin-right: 10px;
+
.video-info-name-actions {
align-items: left;
flex-direction: column;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f7d83c5c3..6352dd4fb 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -110,7 +110,7 @@ label {
// On small screen, menu is absolute
@media screen and (max-width: 800px) {
.title-menu-left {
- width: 120px;
+ width: 150px !important;
position: absolute !important;
z-index: 10000;
}
@@ -120,12 +120,17 @@ label {
&, &.expanded {
.margin-content {
- //display: flex;
- //flex-direction: column;
- //align-items: center;
- //justify-content: center;
- margin-left: auto;
- margin-right: auto;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .sub-menu {
+ padding-left: 10px;
+ margin-bottom: 10px;
+ }
+
+ input[type=text], input[type=password] {
+ width: 100% !important;
}
}
}