mirror of https://github.com/Chocobozzz/PeerTube
Customize checkboxs
parent
15a7387da8
commit
a0d6990823
|
@ -1,20 +1,23 @@
|
||||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||||
|
|
||||||
<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
|
<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
|
||||||
<input
|
<div class="form-group">
|
||||||
type="checkbox" id="displayNSFW"
|
<input
|
||||||
formControlName="displayNSFW"
|
type="checkbox" id="displayNSFW"
|
||||||
>
|
formControlName="displayNSFW"
|
||||||
<label for="displayNSFW">Display videos that contain mature or explicit content</label>
|
>
|
||||||
<div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
|
<label for="displayNSFW"></label>
|
||||||
{{ formErrors['displayNSFW'] }}
|
<label for="displayNSFW">Display videos that contain mature or explicit content</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<input
|
||||||
|
type="checkbox" id="autoPlayVideo"
|
||||||
|
formControlName="autoPlayVideo"
|
||||||
|
>
|
||||||
|
<label for="autoPlayVideo"></label>
|
||||||
|
<label for="autoPlayVideo">Automatically plays video</label>
|
||||||
</div>
|
</div>
|
||||||
<br/>
|
|
||||||
<input
|
|
||||||
type="checkbox" id="autoPlayVideo"
|
|
||||||
formControlName="autoPlayVideo"
|
|
||||||
>
|
|
||||||
<label for="autoPlayVideo">Automatically plays video</label>
|
|
||||||
|
|
||||||
<input type="submit" value="Save" [disabled]="!form.valid">
|
<input type="submit" value="Save" [disabled]="!form.valid">
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
@import '_variables';
|
@import '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
label {
|
input[type=checkbox] {
|
||||||
font-size: 15px;
|
@include peertube-checkbox(1px);
|
||||||
font-weight: $font-regular;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=submit] {
|
input[type=submit] {
|
||||||
|
|
|
@ -7,7 +7,10 @@
|
||||||
(scrolledUp)="onNearOfTop()"
|
(scrolledUp)="onNearOfTop()"
|
||||||
>
|
>
|
||||||
<div class="video" *ngFor="let video of videos; let i = index">
|
<div class="video" *ngFor="let video of videos; let i = index">
|
||||||
<input type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
|
<div class="checkbox-container">
|
||||||
|
<input [id]="'video-check-' + i" type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
|
||||||
|
<label [for]="'video-check-' + i"></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<my-video-thumbnail [video]="video"></my-video-thumbnail>
|
<my-video-thumbnail [video]="video"></my-video-thumbnail>
|
||||||
|
|
||||||
|
|
|
@ -46,11 +46,6 @@
|
||||||
min-height: 130px;
|
min-height: 130px;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
input[type=checkbox] {
|
|
||||||
margin-right: 20px;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 47px;
|
margin-top: 47px;
|
||||||
}
|
}
|
||||||
|
@ -60,6 +55,17 @@
|
||||||
border-bottom: 1px solid #C6C6C6;
|
border-bottom: 1px solid #C6C6C6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkbox-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-left: 12px;
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
@include peertube-checkbox(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
my-video-thumbnail {
|
my-video-thumbnail {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,6 +95,7 @@
|
||||||
|
|
||||||
<div class="form-group form-group-checkbox">
|
<div class="form-group form-group-checkbox">
|
||||||
<input type="checkbox" id="nsfw" formControlName="nsfw" />
|
<input type="checkbox" id="nsfw" formControlName="nsfw" />
|
||||||
|
<label for="nsfw"></label>
|
||||||
<label for="nsfw">This video contains mature or explicit content</label>
|
<label for="nsfw">This video contains mature or explicit content</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
&[type=checkbox] {
|
&[type=checkbox] {
|
||||||
outline: 0;
|
@include peertube-checkbox(1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -148,3 +148,49 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin peertube-checkbox ($border-width) {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
& + label {
|
||||||
|
position: relative;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: $border-width solid #000;
|
||||||
|
border-radius: 3px;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: calc(2px - #{$border-width});
|
||||||
|
left: 5px;
|
||||||
|
width: 5px;
|
||||||
|
height: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transform: rotate(45deg) scale(0);
|
||||||
|
border-right: 2px solid #fff;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked + label {
|
||||||
|
border-color: transparent;
|
||||||
|
background: $orange-color;
|
||||||
|
animation: jelly 0.6s ease;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& + label + label {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: $font-regular;
|
||||||
|
margin-left: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue