diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/package.json | 8 | ||||
-rw-r--r-- | client/src/app/app.component.html | 14 | ||||
-rw-r--r-- | client/src/app/app.component.scss | 12 | ||||
-rw-r--r-- | client/src/app/videos/video-list/video-list.component.html | 8 | ||||
-rw-r--r-- | client/src/app/videos/video-list/video-list.component.scss | 6 | ||||
-rw-r--r-- | client/src/app/videos/video-list/video-miniature.component.html | 2 | ||||
-rw-r--r-- | client/src/app/videos/video-list/video-miniature.component.scss | 5 | ||||
-rw-r--r-- | client/src/app/videos/video-watch/video-watch.component.html | 6 | ||||
-rw-r--r-- | client/src/app/videos/video-watch/video-watch.component.scss | 12 | ||||
-rw-r--r-- | client/src/polyfills.ts | 7 | ||||
-rw-r--r-- | client/src/sass/application.scss | 4 | ||||
-rw-r--r-- | client/tsconfig.json | 1 |
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 | ||
6 | menu { | 6 | menu { |
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 | 4 | require('intl'); |
5 | // import 'es6-shim'; | 5 | require('intl/locale-data/jsonp/en.js'); |
6 | // import 'es6-promise'; | 6 | import '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 |
10 | import 'core-js/es6'; | 9 | import '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 @@ | |||
1 | body { | 1 | body { |
2 | padding: 20px; | 2 | padding: 20px; |
3 | |||
4 | @media screen and (max-width: 400px) { | ||
5 | padding: 3px; | ||
6 | } | ||
3 | } | 7 | } |
4 | 8 | ||
5 | footer { | 9 | footer { |
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", |