-<div [formGroup]="form">
- <div class="form-group">
- <label for="name">Name</label>
- <input
- type="text" class="form-control" id="name"
- formControlName="name"
- >
- <div *ngIf="formErrors.name" class="alert alert-danger">
- {{ formErrors.name }}
- </div>
- </div>
+<div class="video-edit row" [formGroup]="form">
- <div class="form-group">
- <label for="privacy">Privacy</label>
- <select class="form-control" id="privacy" formControlName="privacy">
- <option></option>
- <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
- </select>
+ <div class="col-md-8">
+ <div class="form-group">
+ <label for="name">Title</label>
+ <input type="text" id="name" formControlName="name" />
+ <div *ngIf="formErrors.name" class="form-error">
+ {{ formErrors.name }}
+ </div>
+ </div>
- <div *ngIf="formErrors.privacy" class="alert alert-danger">
- {{ formErrors.privacy }}
+ <div class="form-group">
+ <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+ <tag-input
+ [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+ formControlName="tags" maxItems="5" modelAsStrings="true"
+ ></tag-input>
</div>
- </div>
- <div class="form-group">
- <input
- type="checkbox" id="nsfw"
- formControlName="nsfw"
- >
- <label for="nsfw">This video contains mature or explicit content</label>
+ <div class="form-group">
+ <label for="description">Description</label>
+ <my-video-description formControlName="description"></my-video-description>
+
+ <div *ngIf="formErrors.description" class="form-error">
+ {{ formErrors.description }}
+ </div>
+ </div>
</div>
- <div class="form-group">
- <label for="category">Category</label>
- <select class="form-control" id="category" formControlName="category">
- <option></option>
- <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
- </select>
+ <div class="col-md-4">
+ <div class="form-group">
+ <label for="category">Category</label>
+ <select id="category" formControlName="category">
+ <option></option>
+ <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+ </select>
- <div *ngIf="formErrors.category" class="alert alert-danger">
- {{ formErrors.category }}
+ <div *ngIf="formErrors.category" class="form-error">
+ {{ formErrors.category }}
+ </div>
</div>
- </div>
- <div class="form-group">
- <label for="licence">Licence</label>
- <select class="form-control" id="licence" formControlName="licence">
- <option></option>
- <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
- </select>
+
<div class="form-group">
+ <label for="licence">Licence</label>
+ <select id="licence" formControlName="licence">
+ <option></option>
+ <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+ </select>
- <div *ngIf="formErrors.licence" class="alert alert-danger">
- {{ formErrors.licence }}
+ <div *ngIf="formErrors.licence" class="form-error">
+ {{ formErrors.licence }}
+ </div>
</div>
- </div>
- <div class="form-group">
- <label for="language">Language</label>
- <select class="form-control" id="language" formControlName="language">
- <option></option>
- <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
- </select>
+
<div class="form-group">
+ <label for="language">Language</label>
+ <select id="language" formControlName="language">
+ <option></option>
+ <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+ </select>
- <div *ngIf="formErrors.language" class="alert alert-danger">
- {{ formErrors.language }}
+ <div *ngIf="formErrors.language" class="form-error">
+ {{ formErrors.language }}
+ </div>
</div>
- </div>
- <div class="form-group">
- <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
- <tag-input
- [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
- formControlName="tags" maxItems="5" modelAsStrings="true"
- ></tag-input>
- </div>
+ <div class="form-group">
+ <label for="privacy">Privacy</label>
+ <select id="privacy" formControlName="privacy">
+ <option></option>
+ <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+ </select>
- <div class="form-group">
- <label for="description">Description</label>
- <my-video-description formControlName="description"></my-video-description>
+ <div *ngIf="formErrors.privacy" class="form-error">
+ {{ formErrors.privacy }}
+ </div>
+ </div>
- <div *ngIf="formErrors.description" class="alert alert-danger">
- {{ formErrors.description }}
+ <div class="form-group form-group-checkbox">
+ <input type="checkbox" id="nsfw" formControlName="nsfw" />
+ <label for="nsfw">This video contains mature or explicit content</label>
</div>
+
</div>
</div>
+.video-edit {
+ height: 100%;
+
+ .form-group {
+ margin-bottom: 25px;
+ }
+
+ input {
+ @include peertube-input-text(100%);
+ display: block;
+
+ &[type=checkbox] {
+ outline: 0;
+ }
+ }
+
+ select {
+ @include peertube-select(100%);
+ }
+
+ input, select {
+ font-size: 15px
+ }
+
+ .form-group-checkbox {
+ display: flex;
+ align-items: center;
+
+ label {
+ font-weight: $font-regular;
+ margin: 0;
+ }
+
+ input {
+ width: 10px;
+ margin-right: 10px;
+ }
+ }
+}
+
+.submit-container {
+ text-align: right;
+ position: relative;
+ bottom: $button-height;
+
+ .submit-button {
+ @include peertube-button;
+ @include orange-button;
+
+ display: inline-block;
+
+ input {
+ cursor: inherit;
+ background-color: inherit;
+ border: none;
+ padding: 0;
+ }
+
+ .icon.icon-validate {
+ @include icon(20px);
+
+ cursor: inherit;
+ position: relative;
+ top: -1px;
+ margin-right: 4px;
+ background-image: url('../../../../assets/images/global/validate.svg');
+ }
+ }
+}
+
+/deep/ {
+ .ng2-tag-input {
+ border: none !important;
+ }
+
+ .ng2-tags-container {
+ display: flex;
+ align-items: center;
+ border: 1px solid #C6C6C6;
+ border-radius: 3px;
+ padding: 5px !important;
+ }
+
+ tag {
+ background-color: #E5E5E5 !important;
+ border-radius: 3px !important;
+ font-size: 15px !important;
+ color: #000 !important;
+ height: 30px !important;
+ line-height: 30px !important;
+ margin: 0 5px 0 0 !important;
+ cursor: default !important;
+ padding: 0 8px 0 10px !important;
+
+ div {
+ height: 100% !important;
+ }
+ }
+
+ delete-icon {
+ cursor: pointer !important;
+ height: auto !important;
+ vertical-align: middle !important;
+ padding-left: 6px !important;
+
+ svg {
+ height: auto !important;
+ vertical-align: middle !important;
+ fill: #585858 !important;
+ }
+
+ &:hover {
+ transform: none !important;
+ }
+ }
+}
+
+
.btn-file {
position: relative;
overflow: hidden;
display: block;
}
-.form-group {
- margin-bottom: 10px;
-}
-
-div.tags {
- height: 40px;
- font-size: 20px;
- margin-top: 20px;
-
- .tag {
- margin-right: 10px;
-
- .remove {
- cursor: pointer;
- }
- }
-}
-
div.file-to-upload {
height: 40px;
color: #fff;
background-color: $orange-color;
- &:hover, &:active, &:focus, &[disabled] {
+ &:hover, &:active, &:focus, &[disabled], &.disabled {
color: #fff;
background-color: $orange-hoover-color;
}
+
+ &[disabled], &.disabled {
+ cursor: default;
+ }
}
@mixin grey-button {
background-color: $grey-color;
color: #585858;
- &:hover, &:active, &:focus, &[disabled] {
+ &:hover, &:active, &:focus, &[disabled], &.disabled {
color: #585858;
background-color: $grey-hoover-color;
}
+
+ &[disabled], &.disabled {
+ cursor: default;
+ }
}
@mixin peertube-button {
vertical-align: middle;
cursor: pointer;
}
+
+
+@mixin peertube-select ($width) {
+ background-color: #fff;
+ border: 1px solid #C6C6C6;
+ height: $button-height;
+ width: $width;
+ border-radius: 3px;
+ padding-left: 15px;
+}
projects / oweals / peertube.git / commitdiff
