diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:27:33 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-07 10:28:20 +0100 |
commit | 0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12 (patch) | |
tree | af4dff1224b4cafa7771ab85acdcdc32ca717e87 /client/src/app/videos/+video-watch | |
parent | 7b272fd73f1ea67e83c1924f2cc33503b8759811 (diff) | |
download | PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.gz PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.zst PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.zip |
Design video watch modals
Diffstat (limited to 'client/src/app/videos/+video-watch')
6 files changed, 40 insertions, 20 deletions
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html index ddc57e999..7efc79e93 100644 --- a/client/src/app/videos/+video-watch/video-download.component.html +++ b/client/src/app/videos/+video-watch/video-download.component.html | |||
@@ -6,18 +6,19 @@ | |||
6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> | 6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> |
7 | <span aria-hidden="true">×</span> | 7 | <span aria-hidden="true">×</span> |
8 | </button> | 8 | </button> |
9 | <h4 class="modal-title">Download</h4> | 9 | <h4 class="title-page title-page-single">Download</h4> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | <div class="modal-body"> | 12 | <div class="modal-body"> |
13 | <div *ngFor="let file of video.files" class="resolution-block"> | 13 | <div *ngFor="let file of video.files" class="resolution-block"> |
14 | <label>{{ file.resolutionLabel }}</label> | 14 | <label>{{ file.resolutionLabel }}</label> |
15 | <a class="btn btn-default " target="_blank" [href]="file.torrentUrl"> | 15 | |
16 | <span class="glyphicon glyphicon-download"></span> | 16 | <a class="orange-button-link " target="_blank" [href]="file.torrentUrl"> |
17 | <span class="icon icon-download"></span> | ||
17 | Torrent file | 18 | Torrent file |
18 | </a> | 19 | </a> |
19 | <a class="btn btn-default" target="_blank" [href]="file.fileUrl"> | 20 | <a class="orange-button-link" target="_blank" [href]="file.fileUrl"> |
20 | <span class="glyphicon glyphicon-download"></span> | 21 | <span class="icon icon-download"></span> |
21 | Download | 22 | Download |
22 | </a> | 23 | </a> |
23 | 24 | ||
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss new file mode 100644 index 000000000..c9d5af9c1 --- /dev/null +++ b/client/src/app/videos/+video-watch/video-download.component.scss | |||
@@ -0,0 +1,23 @@ | |||
1 | .resolution-block:not(:first-child) { | ||
2 | margin-top: 30px; | ||
3 | } | ||
4 | |||
5 | .orange-button-link { | ||
6 | margin-right: 10px; | ||
7 | } | ||
8 | |||
9 | label { | ||
10 | display: block; | ||
11 | } | ||
12 | |||
13 | .icon { | ||
14 | @include icon(21px); | ||
15 | |||
16 | margin-right: 5px; | ||
17 | position: relative; | ||
18 | top: -1px; | ||
19 | |||
20 | &.icon-download { | ||
21 | background-image: url('../../../assets/images/video/download-white.svg'); | ||
22 | } | ||
23 | } | ||
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts index 010a246cd..095df1698 100644 --- a/client/src/app/videos/+video-watch/video-download.component.ts +++ b/client/src/app/videos/+video-watch/video-download.component.ts | |||
@@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model' | |||
5 | @Component({ | 5 | @Component({ |
6 | selector: 'my-video-download', | 6 | selector: 'my-video-download', |
7 | templateUrl: './video-download.component.html', | 7 | templateUrl: './video-download.component.html', |
8 | styles: [ '.resolution-block { margin-top: 20px; }' ] | 8 | styleUrls: [ './video-download.component.scss' ] |
9 | }) | 9 | }) |
10 | export class VideoDownloadComponent { | 10 | export class VideoDownloadComponent { |
11 | @Input() video: VideoDetails = null | 11 | @Input() video: VideoDetails = null |
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html index ceb7cf50a..20474bab4 100644 --- a/client/src/app/videos/+video-watch/video-report.component.html +++ b/client/src/app/videos/+video-watch/video-report.component.html | |||
@@ -6,28 +6,28 @@ | |||
6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> | 6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> |
7 | <span aria-hidden="true">×</span> | 7 | <span aria-hidden="true">×</span> |
8 | </button> | 8 | </button> |
9 | <h4 class="modal-title">Report video</h4> | 9 | <h4 class="title-page title-page-single">Report video</h4> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | <div class="modal-body"> | 12 | <div class="modal-body"> |
13 | 13 | ||
14 | <form novalidate [formGroup]="form"> | 14 | <form novalidate [formGroup]="form" (ngSubmit)="report()"> |
15 | <div class="form-group"> | 15 | <div class="form-group"> |
16 | <label for="reason">Reason</label> | 16 | <label for="reason">Reason</label> |
17 | <textarea | 17 | <textarea |
18 | id="reason" class="form-control" placeholder="Reason..." | 18 | id="reason" class="form-control" placeholder="Reason..." |
19 | formControlName="reason" | 19 | formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }" |
20 | > | 20 | > |
21 | </textarea> | 21 | </textarea> |
22 | <div *ngIf="formErrors.reason" class="alert alert-danger"> | 22 | <div *ngIf="formErrors.reason" class="form-error"> |
23 | {{ formErrors.reason }} | 23 | {{ formErrors.reason }} |
24 | </div> | 24 | </div> |
25 | </div> | 25 | </div> |
26 | 26 | ||
27 | <div class="form-group"> | 27 | <div class="form-group"> |
28 | <input | 28 | <input |
29 | type="button" value="Report" class="btn btn-default form-control" | 29 | type="submit" value="Report" class="orange-button" |
30 | [disabled]="!form.valid" (click)="report()" | 30 | [disabled]="!form.valid" |
31 | > | 31 | > |
32 | </div> | 32 | </div> |
33 | </form> | 33 | </form> |
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html index 88f59c063..36ec38d88 100644 --- a/client/src/app/videos/+video-watch/video-share.component.html +++ b/client/src/app/videos/+video-watch/video-share.component.html | |||
@@ -6,7 +6,7 @@ | |||
6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> | 6 | <button type="button" class="close" aria-label="Close" (click)="hide()"> |
7 | <span aria-hidden="true">×</span> | 7 | <span aria-hidden="true">×</span> |
8 | </button> | 8 | </button> |
9 | <h4 class="modal-title">Share</h4> | 9 | <h4 class="title-page title-page-single">Share</h4> |
10 | </div> | 10 | </div> |
11 | 11 | ||
12 | <div class="modal-body"> | 12 | <div class="modal-body"> |
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 3f36410f4..6973619b2 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -51,12 +51,8 @@ | |||
51 | padding: 0 10px 0 10px; | 51 | padding: 0 10px 0 10px; |
52 | 52 | ||
53 | .icon { | 53 | .icon { |
54 | display: inline-block; | 54 | @include icon(21px); |
55 | background-repeat: no-repeat; | 55 | |
56 | background-size: contain; | ||
57 | width: 21px; | ||
58 | height: 21px; | ||
59 | vertical-align: middle; | ||
60 | position: relative; | 56 | position: relative; |
61 | top: -2px; | 57 | top: -2px; |
62 | 58 | ||
@@ -105,7 +101,7 @@ | |||
105 | top: -1px; | 101 | top: -1px; |
106 | 102 | ||
107 | &.icon-download { | 103 | &.icon-download { |
108 | background-image: url('../../../assets/images/video/download.svg'); | 104 | background-image: url('../../../assets/images/video/download-grey.svg'); |
109 | } | 105 | } |
110 | 106 | ||
111 | &.icon-alert { | 107 | &.icon-alert { |