Design video watch modals
This commit is contained in:
Chocobozzz
parent
7b272fd73f
commit
0727cab0df
15 changed files with 113 additions and 47 deletions
|
|
@ -32,12 +32,8 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
vertical-align: middle;
|
||||
@include icon(21px);
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
|
|
|
|||
|
|
@ -35,11 +35,7 @@
|
|||
align-items: center;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
background-size: contain;
|
||||
@include icon(22px);
|
||||
|
||||
&.icon-menu {
|
||||
background-image: url('../assets/images/header/menu.svg');
|
||||
|
|
@ -59,7 +55,7 @@
|
|||
.icon.icon-logo {
|
||||
display: inline-block;
|
||||
background: url('../assets/images/logo.svg') no-repeat;
|
||||
width: 20px;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,11 @@
|
|||
}
|
||||
|
||||
.icon.icon-search {
|
||||
display: inline-block;
|
||||
background: url('../../assets/images/header/search.svg') no-repeat;
|
||||
background-size: contain;
|
||||
width: 25px;
|
||||
@include icon(25px);
|
||||
height: 21px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
background-image: url('../../assets/images/header/search.svg');
|
||||
|
||||
// yolo
|
||||
position: absolute;
|
||||
margin-left: -50px;
|
||||
|
|
|
|||
|
|
@ -107,11 +107,9 @@ menu {
|
|||
@include disable-default-a-behaviour;
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
@include icon(22px);
|
||||
|
||||
margin-right: 18px;
|
||||
background-size: contain;
|
||||
|
||||
&.icon-videos-trending {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
|
|||
export const VIDEO_ABUSE_REASON = {
|
||||
VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
|
||||
MESSAGES: {
|
||||
'required': 'Report reason name is required.',
|
||||
'minlength': 'Report reson must be at least 2 characters long.',
|
||||
'maxlength': 'Report reson cannot be more than 300 characters long.'
|
||||
'required': 'Report reason is required.',
|
||||
'minlength': 'Report reason must be at least 2 characters long.',
|
||||
'maxlength': 'Report reason cannot be more than 300 characters long.'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,18 +6,19 @@
|
|||
<button type="button" class="close" aria-label="Close" (click)="hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Download</h4>
|
||||
<h4 class="title-page title-page-single">Download</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div *ngFor="let file of video.files" class="resolution-block">
|
||||
<label>{{ file.resolutionLabel }}</label>
|
||||
<a class="btn btn-default " target="_blank" [href]="file.torrentUrl">
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
|
||||
<a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
|
||||
<span class="icon icon-download"></span>
|
||||
Torrent file
|
||||
</a>
|
||||
<a class="btn btn-default" target="_blank" [href]="file.fileUrl">
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
<a class="orange-button-link" target="_blank" [href]="file.fileUrl">
|
||||
<span class="icon icon-download"></span>
|
||||
Download
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
.resolution-block:not(:first-child) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.orange-button-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include icon(21px);
|
||||
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
&.icon-download {
|
||||
background-image: url('../../../assets/images/video/download-white.svg');
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model'
|
|||
@Component({
|
||||
selector: 'my-video-download',
|
||||
templateUrl: './video-download.component.html',
|
||||
styles: [ '.resolution-block { margin-top: 20px; }' ]
|
||||
styleUrls: [ './video-download.component.scss' ]
|
||||
})
|
||||
export class VideoDownloadComponent {
|
||||
@Input() video: VideoDetails = null
|
||||
|
|
|
|||
|
|
@ -6,28 +6,28 @@
|
|||
<button type="button" class="close" aria-label="Close" (click)="hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Report video</h4>
|
||||
<h4 class="title-page title-page-single">Report video</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<form novalidate [formGroup]="form">
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="report()">
|
||||
<div class="form-group">
|
||||
<label for="reason">Reason</label>
|
||||
<textarea
|
||||
id="reason" class="form-control" placeholder="Reason..."
|
||||
formControlName="reason"
|
||||
formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
|
||||
>
|
||||
</textarea>
|
||||
<div *ngIf="formErrors.reason" class="alert alert-danger">
|
||||
<div *ngIf="formErrors.reason" class="form-error">
|
||||
{{ formErrors.reason }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="button" value="Report" class="btn btn-default form-control"
|
||||
[disabled]="!form.valid" (click)="report()"
|
||||
type="submit" value="Report" class="orange-button"
|
||||
[disabled]="!form.valid"
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<button type="button" class="close" aria-label="Close" (click)="hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Share</h4>
|
||||
<h4 class="title-page title-page-single">Share</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
|
|||
|
|
@ -51,12 +51,8 @@
|
|||
padding: 0 10px 0 10px;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
vertical-align: middle;
|
||||
@include icon(21px);
|
||||
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
|
|
@ -105,7 +101,7 @@
|
|||
top: -1px;
|
||||
|
||||
&.icon-download {
|
||||
background-image: url('../../../assets/images/video/download.svg');
|
||||
background-image: url('../../../assets/images/video/download-grey.svg');
|
||||
}
|
||||
|
||||
&.icon-alert {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
16
client/src/assets/images/video/download-white.svg
Normal file
16
client/src/assets/images/video/download-white.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>download</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
|
||||
<g id="84" transform="translate(180.000000, 291.000000)">
|
||||
<path d="M12,3 L12,15" id="Path-58"></path>
|
||||
<polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
|
||||
<path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -23,7 +23,8 @@
|
|||
color: #fff;
|
||||
background-color: $orange-color;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:active, &:focus, &[disabled] {
|
||||
color: #fff;
|
||||
background-color: $orange-hoover-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +33,8 @@
|
|||
background-color: $grey-color;
|
||||
color: #585858;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:active, &:focus, &[disabled] {
|
||||
color: #585858;
|
||||
background-color: $grey-hoover-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,3 +62,13 @@
|
|||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
@mixin icon ($size) {
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,3 +152,33 @@ p-datatable {
|
|||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
|
||||
.title-page-single {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orange-button {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
.orange-button-link {
|
||||
@include peertube-button-link;
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
.grey-button {
|
||||
@include peertube-button;
|
||||
@include grey-button;
|
||||
}
|
||||
|
||||
.grey-button-link {
|
||||
@include peertube-button-link;
|
||||
@include grey-button;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue