Improve client mobile version

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index df0ec5a5dfdcf5cb6b431ae190e4169ce82592e4..8a826e7834d45e6c2e5236a623a5cfe6fd490af5 100644 (file)
--- 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 7259006e5a1ae2571e9379284bcbbb4e28121617..a656d5c29812e8745a1ba5a383f32083be68c906 100644 (file)
--- 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 bef1599fc0dc3b675ebbbcb00cb9cd689566ac43..9b699fafdd4561bfc97c2aceed2ddfac8150986a 100644 (file)
--- 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 38a6b95b68539d2c6db3ba2e59b755e8339912c7..45679c310b7d4767582cfc95c7a439a68ad21735 100644 (file)
--- 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 0302447d0fab3c19ed6b6cfef6e940c62b83ba24..75e9dfa5920be1953c18b97f8c45517322ee3e5c 100644 (file)
--- 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 53648a8d8bfa1168d8055f2a0b55fd6627a7a3e9..0bab18d374d5c19d2b1713e7f3f076f9fcd34c97 100644 (file)
--- 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 ab0539fa30302db7568198c4c40ff4ee5f3910b8..1a59a1bd3536ef89d6f844a5705197fb2180b9d6 100644 (file)
--- 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 066792d10ce2cf0a8a0abd285f78ac5f4d7c2247..e2602d3b6d5e3bf8cc64372a58e5a522c5db5f2f 100644 (file)
--- 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 8e26669443c13e6868f83a89d8ae8f61dcf6bb29..47e1b6df04c4d6863a3d9bd538ff887b5442d93b 100644 (file)
--- 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;

diff --git a/server/tests/api/check-params/video-channels.ts b/server/tests/api/check-params/video-channels.ts
index 08d1af52e57ac581b291ad92ad4a3878dcf37fc1..e72b2cb6c20ec24a65c9f1ba22f7cc09fa823e48 100644 (file)
--- a/server/tests/api/check-params/video-channels.ts
+++ b/server/tests/api/check-params/video-channels.ts
@@ -12,7 +12,6 @@ import {
   makePutBodyRequest,
   setAccessTokensToServers,
   killallServers,
-  getMyUserInformation,
   makePostBodyRequest,
   getVideoChannelsList,
   createUser,
@@ -22,7 +21,6 @@ import {
 describe('Test videos API validator', function () {
   const path = '/api/v1/videos/channels'
   let server: ServerInfo
-  let channelId: number
   let accessTokenUser: string
 
   // ---------------------------------------------------------------
@@ -36,9 +34,6 @@ describe('Test videos API validator', function () {
 
     await setAccessTokensToServers([ server ])
 
-    const res = await getMyUserInformation(server.url, server.accessToken)
-    channelId = res.body.videoChannels[0].id
-
     const user = {
       username: 'fake',
       password: 'fake_password'