diff options
author | Chocobozzz <me@florianbigard.com> | 2017-12-12 14:41:59 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2017-12-12 14:41:59 +0100 |
commit | b2731bff2834fb6aacf166cf435030bf96eb12f3 (patch) | |
tree | a519c0669ffc27712fffebc5750df54952a61100 /client | |
parent | 4a7eeb62f1364678fff28fef4a83a0e9b640017c (diff) | |
download | PeerTube-b2731bff2834fb6aacf166cf435030bf96eb12f3.tar.gz PeerTube-b2731bff2834fb6aacf166cf435030bf96eb12f3.tar.zst PeerTube-b2731bff2834fb6aacf166cf435030bf96eb12f3.zip |
Small style fixes
Diffstat (limited to 'client')
12 files changed, 49 insertions, 13 deletions
diff --git a/client/.angular-cli.json b/client/.angular-cli.json index e277f96b8..9ed4a7ab3 100644 --- a/client/.angular-cli.json +++ b/client/.angular-cli.json | |||
@@ -9,7 +9,7 @@ | |||
9 | "outDir": "dist", | 9 | "outDir": "dist", |
10 | "deployUrl": "client/", | 10 | "deployUrl": "client/", |
11 | "assets": [ | 11 | "assets": [ |
12 | { "glob": "**/*", "input": "./assets/images", "output": "./client/assets/" } | 12 | { "glob": "**/*", "input": "./assets/images", "output": "./client/assets/images" } |
13 | ], | 13 | ], |
14 | "index": "index.html", | 14 | "index": "index.html", |
15 | "main": "main.ts", | 15 | "main": "main.ts", |
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index f69c0487d..4f3a774bd 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html | |||
@@ -12,7 +12,7 @@ | |||
12 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | 12 | <my-video-thumbnail [video]="video"></my-video-thumbnail> |
13 | 13 | ||
14 | <div class="video-info"> | 14 | <div class="video-info"> |
15 | <div class="video-info-name">{{ video.name }}</div> | 15 | <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> |
16 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | 16 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> |
17 | </div> | 17 | </div> |
18 | 18 | ||
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index 28b298c3d..0d478edd7 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss | |||
@@ -43,7 +43,7 @@ | |||
43 | 43 | ||
44 | .video { | 44 | .video { |
45 | display: flex; | 45 | display: flex; |
46 | height: 130px; | 46 | min-height: 130px; |
47 | padding-bottom: 20px; | 47 | padding-bottom: 20px; |
48 | 48 | ||
49 | input[type=checkbox] { | 49 | input[type=checkbox] { |
@@ -68,6 +68,10 @@ | |||
68 | flex-grow: 1; | 68 | flex-grow: 1; |
69 | 69 | ||
70 | .video-info-name { | 70 | .video-info-name { |
71 | @include disable-default-a-behaviour; | ||
72 | |||
73 | color: #000; | ||
74 | display: block; | ||
71 | font-size: 16px; | 75 | font-size: 16px; |
72 | font-weight: $font-semibold; | 76 | font-weight: $font-semibold; |
73 | } | 77 | } |
@@ -76,6 +80,10 @@ | |||
76 | font-size: 13px; | 80 | font-size: 13px; |
77 | } | 81 | } |
78 | } | 82 | } |
83 | |||
84 | .video-buttons { | ||
85 | min-width: 190px; | ||
86 | } | ||
79 | } | 87 | } |
80 | 88 | ||
81 | @media screen and (max-width: 800px) { | 89 | @media screen and (max-width: 800px) { |
diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index 5f12cfce0..22941619d 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts | |||
@@ -4,6 +4,7 @@ import { NotificationsService } from 'angular2-notifications' | |||
4 | import 'rxjs/add/observable/from' | 4 | import 'rxjs/add/observable/from' |
5 | import 'rxjs/add/operator/concatAll' | 5 | import 'rxjs/add/operator/concatAll' |
6 | import { Observable } from 'rxjs/Observable' | 6 | import { Observable } from 'rxjs/Observable' |
7 | import { AuthService } from '../../core/auth' | ||
7 | import { ConfirmService } from '../../core/confirm' | 8 | import { ConfirmService } from '../../core/confirm' |
8 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 9 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
9 | import { Video } from '../../shared/video/video.model' | 10 | import { Video } from '../../shared/video/video.model' |
@@ -21,6 +22,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit | |||
21 | 22 | ||
22 | constructor (protected router: Router, | 23 | constructor (protected router: Router, |
23 | protected route: ActivatedRoute, | 24 | protected route: ActivatedRoute, |
25 | protected authService: AuthService, | ||
24 | protected notificationsService: NotificationsService, | 26 | protected notificationsService: NotificationsService, |
25 | protected confirmService: ConfirmService, | 27 | protected confirmService: ConfirmService, |
26 | private videoService: VideoService) { | 28 | private videoService: VideoService) { |
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 2671dd90b..6f52f4f45 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html | |||
@@ -12,6 +12,10 @@ | |||
12 | 12 | ||
13 | <ul *dropdownMenu class="dropdown-menu"> | 13 | <ul *dropdownMenu class="dropdown-menu"> |
14 | <li> | 14 | <li> |
15 | <a routerLink="/account/settings" class="dropdown-item" title="My account"> | ||
16 | My account | ||
17 | </a> | ||
18 | |||
15 | <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#"> | 19 | <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#"> |
16 | Log out | 20 | Log out |
17 | </a> | 21 | </a> |
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index ba1635a18..2b6870a78 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts | |||
@@ -2,6 +2,7 @@ import { OnInit } from '@angular/core' | |||
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { Observable } from 'rxjs/Observable' | 4 | import { Observable } from 'rxjs/Observable' |
5 | import { AuthService } from '../../core/auth' | ||
5 | import { SortField } from './sort-field.type' | 6 | import { SortField } from './sort-field.type' |
6 | import { VideoPagination } from './video-pagination.model' | 7 | import { VideoPagination } from './video-pagination.model' |
7 | import { Video } from './video.model' | 8 | import { Video } from './video.model' |
@@ -17,9 +18,10 @@ export abstract class AbstractVideoList implements OnInit { | |||
17 | videos: Video[] = [] | 18 | videos: Video[] = [] |
18 | loadOnInit = true | 19 | loadOnInit = true |
19 | 20 | ||
20 | protected notificationsService: NotificationsService | 21 | protected abstract notificationsService: NotificationsService |
21 | protected router: Router | 22 | protected abstract authService: AuthService |
22 | protected route: ActivatedRoute | 23 | protected abstract router: Router |
24 | protected abstract route: ActivatedRoute | ||
23 | 25 | ||
24 | protected abstract currentRoute: string | 26 | protected abstract currentRoute: string |
25 | 27 | ||
@@ -28,6 +30,10 @@ export abstract class AbstractVideoList implements OnInit { | |||
28 | 30 | ||
29 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> | 31 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> |
30 | 32 | ||
33 | get user () { | ||
34 | return this.authService.getUser() | ||
35 | } | ||
36 | |||
31 | ngOnInit () { | 37 | ngOnInit () { |
32 | // Subscribe to route changes | 38 | // Subscribe to route changes |
33 | const routeParams = this.route.snapshot.params | 39 | const routeParams = this.route.snapshot.params |
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 52082944a..e742e1329 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -43,12 +43,15 @@ | |||
43 | align-items: center; | 43 | align-items: center; |
44 | 44 | ||
45 | .video-info-name { | 45 | .video-info-name { |
46 | margin-right: 30px; | ||
46 | font-size: 27px; | 47 | font-size: 27px; |
47 | font-weight: $font-semibold; | 48 | font-weight: $font-semibold; |
48 | flex-grow: 1; | 49 | flex-grow: 1; |
49 | } | 50 | } |
50 | 51 | ||
51 | .video-info-actions { | 52 | .video-info-actions { |
53 | min-width: 215px; | ||
54 | |||
52 | .action-button { | 55 | .action-button { |
53 | @include peertube-button; | 56 | @include peertube-button; |
54 | @include grey-button; | 57 | @include grey-button; |
@@ -219,16 +222,12 @@ | |||
219 | } | 222 | } |
220 | 223 | ||
221 | 224 | ||
222 | @media screen and (max-width: 1000px) { | 225 | @media screen and (max-width: 1200px) { |
223 | .other-videos { | 226 | .other-videos { |
224 | display: none; | 227 | display: none; |
225 | } | 228 | } |
226 | } | ||
227 | 229 | ||
228 | @media screen and (max-width: 800px) { | ||
229 | .video-bottom { | 230 | .video-bottom { |
230 | margin: 20px 0 0 0; | ||
231 | |||
232 | .video-info { | 231 | .video-info { |
233 | margin-right: 0; | 232 | margin-right: 0; |
234 | 233 | ||
@@ -250,3 +249,9 @@ | |||
250 | } | 249 | } |
251 | } | 250 | } |
252 | } | 251 | } |
252 | |||
253 | @media screen and (max-width: 800px) { | ||
254 | .video-bottom { | ||
255 | margin: 20px 0 0 0; | ||
256 | } | ||
257 | } | ||
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 3825e8449..5e4823c9c 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -60,6 +60,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
60 | private markdownService: MarkdownService | 60 | private markdownService: MarkdownService |
61 | ) {} | 61 | ) {} |
62 | 62 | ||
63 | get user () { | ||
64 | return this.authService.getUser() | ||
65 | } | ||
66 | |||
63 | ngOnInit () { | 67 | ngOnInit () { |
64 | this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') | 68 | this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') |
65 | .subscribe( | 69 | .subscribe( |
@@ -204,7 +208,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
204 | } | 208 | } |
205 | 209 | ||
206 | isVideoBlacklistable () { | 210 | isVideoBlacklistable () { |
207 | return this.video.isBlackistableBy(this.authService.getUser()) | 211 | return this.video.isBlackistableBy(this.user) |
208 | } | 212 | } |
209 | 213 | ||
210 | getAvatarPath () { | 214 | getAvatarPath () { |
@@ -264,7 +268,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
264 | this.video = video | 268 | this.video = video |
265 | 269 | ||
266 | let observable | 270 | let observable |
267 | if (this.video.isVideoNSFWForUser(this.authService.getUser())) { | 271 | if (this.video.isVideoNSFWForUser(this.user)) { |
268 | observable = this.confirmService.confirm( | 272 | observable = this.confirmService.confirm( |
269 | 'This video contains mature or explicit content. Are you sure you want to watch it?', | 273 | 'This video contains mature or explicit content. Are you sure you want to watch it?', |
270 | 'Mature or explicit content' | 274 | 'Mature or explicit content' |
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 6168fac95..3020b8c30 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { AuthService } from '../../core/auth' | ||
4 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
5 | import { SortField } from '../../shared/video/sort-field.type' | 6 | import { SortField } from '../../shared/video/sort-field.type' |
6 | import { VideoService } from '../../shared/video/video.service' | 7 | import { VideoService } from '../../shared/video/video.service' |
@@ -18,6 +19,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On | |||
18 | constructor (protected router: Router, | 19 | constructor (protected router: Router, |
19 | protected route: ActivatedRoute, | 20 | protected route: ActivatedRoute, |
20 | protected notificationsService: NotificationsService, | 21 | protected notificationsService: NotificationsService, |
22 | protected authService: AuthService, | ||
21 | private videoService: VideoService) { | 23 | private videoService: VideoService) { |
22 | super() | 24 | super() |
23 | } | 25 | } |
diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts index e874636af..b7556c13e 100644 --- a/client/src/app/videos/video-list/video-search.component.ts +++ b/client/src/app/videos/video-list/video-search.component.ts | |||
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core' | |||
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { Subscription } from 'rxjs/Subscription' | 4 | import { Subscription } from 'rxjs/Subscription' |
5 | import { AuthService } from '../../core/auth' | ||
5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 6 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
6 | import { VideoService } from '../../shared/video/video.service' | 7 | import { VideoService } from '../../shared/video/video.service' |
7 | 8 | ||
@@ -21,6 +22,7 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O | |||
21 | constructor (protected router: Router, | 22 | constructor (protected router: Router, |
22 | protected route: ActivatedRoute, | 23 | protected route: ActivatedRoute, |
23 | protected notificationsService: NotificationsService, | 24 | protected notificationsService: NotificationsService, |
25 | protected authService: AuthService, | ||
24 | private videoService: VideoService) { | 26 | private videoService: VideoService) { |
25 | super() | 27 | super() |
26 | } | 28 | } |
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index 82567e02d..fc48086d6 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { AuthService } from '../../core/auth' | ||
4 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | 5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
5 | import { SortField } from '../../shared/video/sort-field.type' | 6 | import { SortField } from '../../shared/video/sort-field.type' |
6 | import { VideoService } from '../../shared/video/video.service' | 7 | import { VideoService } from '../../shared/video/video.service' |
@@ -18,6 +19,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit | |||
18 | constructor (protected router: Router, | 19 | constructor (protected router: Router, |
19 | protected route: ActivatedRoute, | 20 | protected route: ActivatedRoute, |
20 | protected notificationsService: NotificationsService, | 21 | protected notificationsService: NotificationsService, |
22 | protected authService: AuthService, | ||
21 | private videoService: VideoService) { | 23 | private videoService: VideoService) { |
22 | super() | 24 | super() |
23 | } | 25 | } |
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 1c5701bea..25362c5af 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss | |||
@@ -322,6 +322,7 @@ $control-bar-height: 34px; | |||
322 | border-left-color: #ffffff; | 322 | border-left-color: #ffffff; |
323 | transform: translateZ(0); | 323 | transform: translateZ(0); |
324 | animation: spinner 1.4s infinite linear; | 324 | animation: spinner 1.4s infinite linear; |
325 | overflow: hidden; | ||
325 | 326 | ||
326 | &:before { | 327 | &:before { |
327 | animation: none !important; | 328 | animation: none !important; |