Responsive my account

client/src/app/account/account-videos/account-videos.component.html

@@ -1,4 +1,5 @@
 <div
+  class="videos"
   infiniteScroll
   [infiniteScrollDistance]="0.5"
   [infiniteScrollUpDistance]="1.5"
@@ -29,10 +30,10 @@
       </div>
     </div>
 
-    <ng-template [ngIf]="isInSelectionMode() === false">
+    <div class="video-buttons" *ngIf="isInSelectionMode() === false">
       <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
 
       <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button>
-    </ng-template>
+    </div>
   </div>
 </div>

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;
+    }
+  }
+}

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;
+        }
+      }
+    }
+  }
+}

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;

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;
+        margin-left: 10px;
-        //flex-direction: column;
+        margin-right: 10px;
-        //align-items: center;
+      }
-        //justify-content: center;
+
-        margin-left: auto;
+      .sub-menu {
-        margin-right: auto;
+        padding-left: 10px;
+        margin-bottom: 10px;
+      }
+
+      input[type=text], input[type=password] {
+        width: 100% !important;
       }
     }
   }