Improve client mobile version

9 files changed, 61 insertions, 16 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index df0ec5a5d..8a826e783 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -28,10 +28,10 @@
     </div>
 
     <!-- Used for the fixed menu -->
-    <div class="col-md-2 col-sm-3 col-xs-3">
+    <div class="fake-menu col-md-2 col-sm-3 col-xs-3">
     </div>
 
-    <div [ngClass]="getMainColClasses()">
+    <div class="main-col" [ngClass]="getMainColClasses()">
 
       <div class="main-row">
         <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 7259006e5..a656d5c29 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -47,7 +47,6 @@
     }
 
     #peertube-title {
-
       a {
         color: inherit !important;
         display: block;
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index bef1599fc..9b699fafd 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -57,6 +57,7 @@ export class AppComponent implements OnInit {
   }
 
   toggleMenu () {
+    window.scrollTo(0, 0)
     this.isMenuDisplayed = !this.isMenuDisplayed
   }
 
@@ -72,7 +73,7 @@ export class AppComponent implements OnInit {
       Object.keys(colSizes).forEach(col => colSizes[col] = 12)
     }
 
-    const classes = [ 'main-col' ]
+    const classes = []
     Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`))
 
     return classes
diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss
index 38a6b95b6..45679c310 100644
--- a/client/src/app/core/menu/menu.component.scss
+++ b/client/src/app/core/menu/menu.component.scss
@@ -6,6 +6,7 @@ menu {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  z-index: 1000;
 
   @media screen and (max-width: 550px) {
     font-size: 90%;
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 0302447d0..75e9dfa59 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,6 +1,6 @@
 <div class="input-group">
 
-  <span class="input-group-addon icon-addon">
+  <span class="hidden-xs input-group-addon icon-addon">
     <span class="glyphicon glyphicon-search"></span>
   </span>
 
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 53648a8d8..0bab18d37 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -52,7 +52,7 @@
     <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
       <a class="option" (click)="showShareModal()" title="Share the video">
         <span class="glyphicon glyphicon-share"></span>
-        <span class="video-small-block-text">Share</span>
+        <span class="hidden-xs video-small-block-text">Share</span>
       </a>
     </div>
 
@@ -60,7 +60,7 @@
       <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
         <a class="option" title="Access to more options" dropdownToggle>
           <span class="glyphicon glyphicon-option-horizontal"></span>
-          <span class="video-small-block-text">More</span>
+          <span class="hidden-xs video-small-block-text">More</span>
         </a>
 
         <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
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 ab0539fa3..1a59a1bd3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -212,12 +212,6 @@
     }
   }
 
-  @media screen and (max-width: 400px) {
-    .video-name-views {
-      font-size: 16px !important;
-    }
-  }
-
   @media screen and (max-width: 800px) {
     .video-name-views {
       .video-name {
@@ -242,6 +236,7 @@
 
       .video-small-block-author {
         padding-left: 10px;
+        padding-right: 10px;
       }
     }
 
@@ -260,4 +255,38 @@
       }
     }
   }
+
+  @media screen and (max-width: 500px) {
+    .video-name-views {
+      font-size: 16px !important;
+    }
+
+    // Keep the same hierarchy than max-width: 800px
+    .video-small-blocks {
+      a, .video-small-block-text {
+        font-size: 10px !important;
+      }
+
+      .video-small-block-author {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+
+    .video-details {
+      .video-details-date-description {
+        margin-bottom: 30px;
+        width: 100%;
+
+        .video-details-date {
+          margin-bottom: 15px;
+        }
+      }
+
+      .video-details-attributes {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+  }
 }
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
index 066792d10..e2602d3b6 100644
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss
@@ -1,9 +1,8 @@
 .video-miniature {
-  margin-top: 30px;
+  margin: 15px 10px;
   display: inline-block;
   position: relative;
   height: 190px;
-  width: 220px;
   vertical-align: top;
 
   .video-miniature-thumbnail {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 8e2666944..47e1b6df0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -25,7 +25,6 @@ input.readonly {
 }
 
 .main-col {
-
   .content-padding {
     padding: 15px 30px;
 
@@ -47,6 +46,23 @@ input.readonly {
   }
 }
 
+// On small screen, menu is absolute and displayed over the page
+@media screen and (max-width: 500px) {
+  .title-menu-left {
+    width: 120px;
+    position: absolute !important;
+    z-index: 10000;
+  }
+
+  .main-col {
+    width: 100% !important;
+  }
+
+  .fake-menu {
+    display: none;
+  }
+}
+
 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 .glyphicon-refresh-animate {
   -animation: spin .7s infinite linear;