aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-07-19 16:45:07 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-07-19 16:45:07 +0200
commita64668c024c84f2b0a01357d05092064f17ffd4e (patch)
tree14992a54b593d172fb45612ccf2db81ac02218f7 /client
parentf9f5478ca0778d0f64495bb05e19907582326fd1 (diff)
downloadPeerTube-a64668c024c84f2b0a01357d05092064f17ffd4e.tar.gz
PeerTube-a64668c024c84f2b0a01357d05092064f17ffd4e.tar.zst
PeerTube-a64668c024c84f2b0a01357d05092064f17ffd4e.zip
Client: try to make it work with Android Firefox
Diffstat (limited to 'client')
-rw-r--r--client/package.json8
-rw-r--r--client/src/app/app.component.html14
-rw-r--r--client/src/app/app.component.scss12
-rw-r--r--client/src/app/videos/video-list/video-list.component.html8
-rw-r--r--client/src/app/videos/video-list/video-list.component.scss6
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html2
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss5
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html6
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss12
-rw-r--r--client/src/polyfills.ts7
-rw-r--r--client/src/sass/application.scss4
-rw-r--r--client/tsconfig.json1
12 files changed, 54 insertions, 31 deletions
diff --git a/client/package.json b/client/package.json
index 4bd057d00..2dfc0c659 100644
--- a/client/package.json
+++ b/client/package.json
@@ -39,6 +39,8 @@
39 "es6-shim": "^0.35.0", 39 "es6-shim": "^0.35.0",
40 "file-loader": "^0.8.5", 40 "file-loader": "^0.8.5",
41 "html-webpack-plugin": "^2.19.0", 41 "html-webpack-plugin": "^2.19.0",
42 "ie-shim": "^0.1.0",
43 "intl": "^1.2.4",
42 "json-loader": "^0.5.4", 44 "json-loader": "^0.5.4",
43 "ng2-bootstrap": "1.0.16", 45 "ng2-bootstrap": "1.0.16",
44 "ng2-file-upload": "^1.0.3", 46 "ng2-file-upload": "^1.0.3",
@@ -66,11 +68,5 @@
66 "devDependencies": { 68 "devDependencies": {
67 "codelyzer": "0.0.19", 69 "codelyzer": "0.0.19",
68 "standard": "^7.0.1" 70 "standard": "^7.0.1"
69 },
70 "standard": {
71 "ignore": [
72 "angular/",
73 "bundles/"
74 ]
75 } 71 }
76} 72}
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index ab8e0c283..0311179a8 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -13,10 +13,10 @@
13 13
14 <div class="row"> 14 <div class="row">
15 15
16 <menu class="col-md-2 col-xs-3"> 16 <menu class="col-md-2 col-sm-3 col-xs-3">
17 <div class="panel-block"> 17 <div class="panel-block">
18 <div id="panel-user-login" class="panel-button"> 18 <div id="panel-user-login" class="panel-button">
19 <span class="glyphicon glyphicon-user"></span> 19 <span class="hidden-xs glyphicon glyphicon-user"></span>
20 <a *ngIf="!isLoggedIn" [routerLink]="['/login']">Login</a> 20 <a *ngIf="!isLoggedIn" [routerLink]="['/login']">Login</a>
21 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a> 21 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
22 </div> 22 </div>
@@ -24,30 +24,30 @@
24 24
25 <div class="panel-block"> 25 <div class="panel-block">
26 <div id="panel-get-videos" class="panel-button"> 26 <div id="panel-get-videos" class="panel-button">
27 <span class="glyphicon glyphicon-list"></span> 27 <span class="hidden-xs glyphicon glyphicon-list"></span>
28 <a [routerLink]="['/videos/list']">Get videos</a> 28 <a [routerLink]="['/videos/list']">Get videos</a>
29 </div> 29 </div>
30 30
31 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn"> 31 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
32 <span class="glyphicon glyphicon-cloud-upload"></span> 32 <span class="hidden-xs glyphicon glyphicon-cloud-upload"></span>
33 <a [routerLink]="['/videos/add']">Upload a video</a> 33 <a [routerLink]="['/videos/add']">Upload a video</a>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
37 <div class="panel-block" *ngIf="isLoggedIn"> 37 <div class="panel-block" *ngIf="isLoggedIn">
38 <div id="panel-make-friends" class="panel-button"> 38 <div id="panel-make-friends" class="panel-button">
39 <span class="glyphicon glyphicon-cloud"></span> 39 <span class="hidden-xs glyphicon glyphicon-cloud"></span>
40 <a (click)='makeFriends()'>Make friends</a> 40 <a (click)='makeFriends()'>Make friends</a>
41 </div> 41 </div>
42 42
43 <div id="panel-quit-friends" class="panel-button"> 43 <div id="panel-quit-friends" class="panel-button">
44 <span class="glyphicon glyphicon-plane"></span> 44 <span class="hidden-xs glyphicon glyphicon-plane"></span>
45 <a (click)='quitFriends()'>Quit friends</a> 45 <a (click)='quitFriends()'>Quit friends</a>
46 </div> 46 </div>
47 </div> 47 </div>
48 </menu> 48 </menu>
49 49
50 <div class="col-md-9 col-xs-8 router-outler-container"> 50 <div class="col-md-9 col-sm-8 col-xs-8 router-outlet-container">
51 <router-outlet></router-outlet> 51 <router-outlet></router-outlet>
52 </div> 52 </div>
53 53
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 1a9a196ff..1d42f2a04 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -4,6 +4,12 @@ header div {
4} 4}
5 5
6menu { 6menu {
7 @media screen and (max-width: 600px) {
8 margin-right: 3px !important;
9 padding: 3px !important;
10 min-height: 400px !important;
11 }
12
7 min-height: 600px; 13 min-height: 600px;
8 margin-right: 20px; 14 margin-right: 20px;
9 border-right: 1px solid rgba(0, 0, 0, 0.2); 15 border-right: 1px solid rgba(0, 0, 0, 0.2);
@@ -30,3 +36,9 @@ menu {
30.panel-block:not(:last-child) { 36.panel-block:not(:last-child) {
31 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 37 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
32} 38}
39
40.router-outlet-container {
41 @media screen and (max-width: 400px) {
42 padding: 0 3px 0 3px;
43 }
44}
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 e119517a8..2a753adba 100644
--- 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 @@
1<div class="row videos-info"> 1<div class="row col-md-12 videos-info">
2 <div class="col-md-9 videos-total-results"> 2 <div class="col-md-9 col-xs-5 videos-total-results">
3 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span> 3 <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
4 4
5 <my-loader [loading]="loading | async"></my-loader> 5 <my-loader [loading]="loading | async"></my-loader>
6 </div> 6 </div>
7 <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort> 7
8
9 <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
8</div> 10</div>
9 11
10<div class="videos-miniatures"> 12<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 1f491a6c3..fdff42c41 100644
--- 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 @@
1.videos-info { 1.videos-info {
2 @media screen and (max-width: 400px) {
3 margin-left: 0;
4 }
2 5
3 padding-bottom: 20px;
4 margin-bottom: 20px; 6 margin-bottom: 20px;
5 border-bottom: 1px solid #f1f1f1; 7 border-bottom: 1px solid #f1f1f1;
6 height: 40px; 8 height: 40px;
7 line-height: 40px; 9 line-height: 40px;
8 width: 765px;
9 margin-left: 15px;
10 10
11 my-video-sort { 11 my-video-sort {
12 padding-right: 0; 12 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 373ff6bfb..0a0925dea 100644
--- 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 @@
1<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()"> 1<div class="video-miniature col-md-4 col-sm-6 col-xs-6" (mouseenter)="onHover()" (mouseleave)="onBlur()">
2 <a 2 <a
3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description" 3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
4 class="video-miniature-thumbnail" 4 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 3a096dabd..6b3fa3bf0 100644
--- 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 @@
1@import "../../../sass/pre-customizations.scss"; 1@import "../../../sass/pre-customizations.scss";
2 2
3.video-miniature { 3.video-miniature {
4 @media screen and (max-width: 400px) {
5 padding: 0;
6 }
7
4 margin-top: 30px; 8 margin-top: 30px;
5 display: inline-block; 9 display: inline-block;
6 position: relative; 10 position: relative;
11 min-width: 220px;
7 12
8 .video-miniature-thumbnail { 13 .video-miniature-thumbnail {
9 display: inline-block; 14 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 047990362..ddabdc9e9 100644
--- 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 @@
17</div> 17</div>
18 18
19<div id="torrent-info"> 19<div id="torrent-info">
20 <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div> 20 <div id="torrent-info-download" class="col-md-4 col-sm-4 col-xs-4">Download: {{ downloadSpeed | bytes }}/s</div>
21 <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div> 21 <div id="torrent-info-upload" class="col-md-4 col-sm-4 col-xs-4">Upload: {{ uploadSpeed | bytes }}/s</div>
22 <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div> 22 <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
23<div> 23<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 474de74d9..96420582a 100644
--- 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 {
11 11
12#torrent-info { 12#torrent-info {
13 font-size: 10px; 13 font-size: 10px;
14 margin-top: 10px;
15 text-align: center;
14 16
15 div { 17 div {
16 display: inline-block; 18 min-width: 60px;
17 width: 33%; 19 }
18 text-align: center; 20}
21
22.embed-responsive {
23 @media screen and (max-width: 600px) {
24 height: 300px;
19 } 25 }
20} 26}
diff --git a/client/src/polyfills.ts b/client/src/polyfills.ts
index cf7270ac3..740a563bb 100644
--- a/client/src/polyfills.ts
+++ b/client/src/polyfills.ts
@@ -1,10 +1,9 @@
1// Polyfills 1// Polyfills
2// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here) 2// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
3 3
4// import 'ie-shim'; // Internet Explorer 4require('intl');
5// import 'es6-shim'; 5require('intl/locale-data/jsonp/en.js');
6// import 'es6-promise'; 6import 'ie-shim'; // Internet Explorer
7// import 'es7-reflect-metadata';
8 7
9// Prefer CoreJS over the polyfills above 8// Prefer CoreJS over the polyfills above
10import 'core-js/es6'; 9import 'core-js/es6';
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5c56e9507..9c48b4627 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,5 +1,9 @@
1body { 1body {
2 padding: 20px; 2 padding: 20px;
3
4 @media screen and (max-width: 400px) {
5 padding: 3px;
6 }
3} 7}
4 8
5footer { 9footer {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 79f889c3d..c7f61902c 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -45,7 +45,6 @@
45 "src/app/shared/users/index.ts", 45 "src/app/shared/users/index.ts",
46 "src/app/shared/users/token.model.ts", 46 "src/app/shared/users/token.model.ts",
47 "src/app/shared/users/user.model.ts", 47 "src/app/shared/users/user.model.ts",
48 "src/app/shared/videos-params.ts",
49 "src/app/videos/index.ts", 48 "src/app/videos/index.ts",
50 "src/app/videos/shared/index.ts", 49 "src/app/videos/shared/index.ts",
51 "src/app/videos/shared/loader/index.ts", 50 "src/app/videos/shared/loader/index.ts",