Improve client mobile version

3 files changed, 38 insertions, 10 deletions

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 {