Client: try to make it work with Android Firefox

diff --git a/client/package.json b/client/package.json
index 4bd057d0078368ce15b7edea06a1d2f01377307f..2dfc0c659f54a808c8046dcb01a5e7273d19efb1 100644 (file)
--- a/client/package.json
+++ b/client/package.json
@@ -39,6 +39,8 @@
     "es6-shim": "^0.35.0",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.19.0",
+    "ie-shim": "^0.1.0",
+    "intl": "^1.2.4",
     "json-loader": "^0.5.4",
     "ng2-bootstrap": "1.0.16",
     "ng2-file-upload": "^1.0.3",
@@ -66,11 +68,5 @@
   "devDependencies": {
     "codelyzer": "0.0.19",
     "standard": "^7.0.1"
-  },
-  "standard": {
-    "ignore": [
-      "angular/",
-      "bundles/"
-    ]
   }
 }

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index ab8e0c2836ffc7adeccd258f6ed2a6ca228a752d..0311179a842071da0e260dd2cfc109838585f95d 100644 (file)
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -13,10 +13,10 @@
 
   <div class="row">
 
-    <menu class="col-md-2 col-xs-3">
+    <menu class="col-md-2 col-sm-3 col-xs-3">
       <div class="panel-block">
         <div id="panel-user-login" class="panel-button">
-          <span class="glyphicon glyphicon-user"></span>
+          <span class="hidden-xs glyphicon glyphicon-user"></span>
           <a *ngIf="!isLoggedIn" [routerLink]="['/login']">Login</a>
           <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
         </div>
@@ -24,30 +24,30 @@
 
       <div class="panel-block">
         <div id="panel-get-videos" class="panel-button">
-          <span class="glyphicon glyphicon-list"></span>
+          <span class="hidden-xs glyphicon glyphicon-list"></span>
           <a [routerLink]="['/videos/list']">Get videos</a>
         </div>
 
         <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
-          <span class="glyphicon glyphicon-cloud-upload"></span>
+          <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
           <a [routerLink]="['/videos/add']">Upload a video</a>
         </div>
       </div>
 
       <div class="panel-block" *ngIf="isLoggedIn">
         <div id="panel-make-friends" class="panel-button">
-          <span class="glyphicon glyphicon-cloud"></span>
+          <span class="hidden-xs glyphicon glyphicon-cloud"></span>
           <a (click)='makeFriends()'>Make friends</a>
         </div>
 
         <div id="panel-quit-friends" class="panel-button">
-          <span class="glyphicon glyphicon-plane"></span>
+          <span class="hidden-xs glyphicon glyphicon-plane"></span>
           <a (click)='quitFriends()'>Quit friends</a>
         </div>
       </div>
     </menu>
 
-    <div class="col-md-9 col-xs-8 router-outler-container">
+    <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
       <router-outlet></router-outlet>
     </div>
 

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 1a9a196ffa22c89e99057891b3de397a323f81c7..1d42f2a04c762c75c223aaab821b6f40bde12a5e 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -4,6 +4,12 @@ header div {
 }
 
 menu {
+  @media screen and (max-width: 600px) {
+    margin-right: 3px !important;
+    padding: 3px !important;
+    min-height: 400px !important;
+  }
+
   min-height: 600px;
   margin-right: 20px;
   border-right: 1px solid rgba(0, 0, 0, 0.2);
@@ -30,3 +36,9 @@ menu {
 .panel-block:not(:last-child) {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+
+.router-outlet-container {
+  @media screen and (max-width: 400px) {
+    padding: 0 3px 0 3px;
+  }
+}

diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index e119517a804083ffc057892e7a8f680dc04a9576..2a753adba5fdaf26f5991c15f54f9595dc5772dd 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,10 +1,12 @@
-<div class="row videos-info">
-  <div class="col-md-9 videos-total-results">
+<div class="row col-md-12 videos-info">
+  <div class="col-md-9 col-xs-5 videos-total-results">
     <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
 
     <my-loader [loading]="loading | async"></my-loader>
   </div>
-  <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+
+
+  <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
 </div>
 
 <div class="videos-miniatures">

diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 1f491a6c3fc5a4f41b3e64a8ec2f8fc3c789c1f5..fdff42c419609533a11907feeb7b51939a7095f3 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -1,12 +1,12 @@
 .videos-info {
+  @media screen and (max-width: 400px) {
+    margin-left: 0;
+  }
 
-  padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;
   height: 40px;
   line-height: 40px;
-  width: 765px;
-  margin-left: 15px;
 
   my-video-sort {
     padding-right: 0;

diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 373ff6bfbd86b9d67e1edcbbadf3bf37418becd9..0a0925dea53f365dc890e7f279dd26a3a02ed1af 100644 (file)
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()">
+<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()">
   <a
     [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
     class="video-miniature-thumbnail"

diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 3a096dabd22efb83fa2fdc6bb5142e43eb210436..6b3fa3bf0f6d59b1950e8a3c05ab2ffdccb83d3a 100644 (file)
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,9 +1,14 @@
 @import "../../../sass/pre-customizations.scss";
 
 .video-miniature {
+  @media screen and (max-width: 400px) {
+    padding: 0;
+  }
+
   margin-top: 30px;
   display: inline-block;
   position: relative;
+  min-width: 220px;
 
   .video-miniature-thumbnail {
     display: inline-block;

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 047990362736358cfc5fa0dc1739532c3157d3a3..ddabdc9e9b9dd675e20c8ea5d9eb914db7103bbc 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -17,7 +17,7 @@
 </div>
 
 <div id="torrent-info">
-  <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div>
-  <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div>
-  <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div>
+  <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
+  <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
+  <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
 <div>

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 474de74d92a5225d735cdfb79433e4ecbb8bbd2d..96420582ae831a6051ad39d932275eb021a41997 100644 (file)
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -11,10 +11,16 @@ my-loader {
 
 #torrent-info {
   font-size: 10px;
+  margin-top: 10px;
+  text-align: center;
 
   div {
-    display: inline-block;
-    width: 33%;
-    text-align: center;
+    min-width: 60px;
+  }
+}
+
+.embed-responsive {
+  @media screen and (max-width: 600px) {
+    height: 300px;
   }
 }

diff --git a/client/src/polyfills.ts b/client/src/polyfills.ts
index cf7270ac338829182d69257c3205b70e52310624..740a563bb96bf5b4197ce5cfad0d29ca4c38a21c 100644 (file)
--- a/client/src/polyfills.ts
+++ b/client/src/polyfills.ts
@@ -1,10 +1,9 @@
 // Polyfills
 // (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
 
-// import 'ie-shim'; // Internet Explorer
-// import 'es6-shim';
-// import 'es6-promise';
-// import 'es7-reflect-metadata';
+require('intl');
+require('intl/locale-data/jsonp/en.js');
+import 'ie-shim'; // Internet Explorer
 
 // Prefer CoreJS over the polyfills above
 import 'core-js/es6';

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5c56e9507a8ebf9d17b9a9323e0971b8d79ae306..9c48b4627bd2adf4e72abd6c3eb1433f029ad2c8 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,5 +1,9 @@
 body {
   padding: 20px;
+
+  @media screen and (max-width: 400px) {
+    padding: 3px;
+  }
 }
 
 footer {

diff --git a/client/tsconfig.json b/client/tsconfig.json
index 79f889c3dd921b40667e1a9c5f9ca940487ffff1..c7f61902c1ea3c7877c3b953b1143eac949e5dd8 100644 (file)
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -45,7 +45,6 @@
     "src/app/shared/users/index.ts",
     "src/app/shared/users/token.model.ts",
     "src/app/shared/users/user.model.ts",
-    "src/app/shared/videos-params.ts",
     "src/app/videos/index.ts",
     "src/app/videos/shared/index.ts",
     "src/app/videos/shared/loader/index.ts",