Responsive my account

2 files changed, 23 insertions, 2 deletions

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