aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-03-28 23:54:23 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-03-28 23:54:40 +0100
commit628c155338cf106365a06ca021b9f244b784c003 (patch)
treed7b55fa86c9a9e904533d800babd47cfa921fc67
parent03a3ad919495c8616efb7a8e6ff4606098413d33 (diff)
downloadPeerTube-628c155338cf106365a06ca021b9f244b784c003.tar.gz
PeerTube-628c155338cf106365a06ca021b9f244b784c003.tar.zst
PeerTube-628c155338cf106365a06ca021b9f244b784c003.zip
Align layout for create/edit video-playlists (my-account) on create/edit user (admin)
Diffstat
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss10
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html129
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss13
3 files changed, 96 insertions, 56 deletions
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index cd5e47cdc..c8c327398 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -1,6 +1,11 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label {
5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
4.video-channel-title { 9.video-channel-title {
5 @include settings-big-title; 10 @include settings-big-title;
6} 11}
@@ -37,11 +42,6 @@ input {
37 } 42 }
38} 43}
39 44
40label {
41 font-weight: $font-regular;
42 font-size: 100%;
43}
44
45textarea { 45textarea {
46 @include peertube-textarea(500px, 150px); 46 @include peertube-textarea(500px, 150px);
47 47
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
index 89b8d19b8..05335dc1a 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
@@ -1,71 +1,102 @@
1<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create playlist</div> 1<nav aria-label="breadcrumb">
2 <ol class="breadcrumb">
3 <li class="breadcrumb-item">
4 <a routerLink="/my-account/video-playlists" i18n>My Playlists</a>
5 </li>
6
7 <ng-container *ngIf="isCreation()">
8 <li class="breadcrumb-item active" i18n>Create</li>
9 </ng-container>
10 <ng-container *ngIf="!isCreation()">
11 <li class="breadcrumb-item active" i18n>Edit</li>
12 <li class="breadcrumb-item active" aria-current="page">
13 <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-account/video-playlists/update', videoPlaylistToUpdate?.uuid ]">{{ videoPlaylistToUpdate?.displayName }}</a>
14 </li>
15 </ng-container>
16 </ol>
17</nav>
2 18
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 19<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 20
5<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 21<form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
6 <div class="row">
7 <div class="col-md-12 col-xl-6">
8 <div class="form-group">
9 <label i18n for="displayName">Display name</label>
10 <input
11 type="text" id="displayName"
12 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
13 >
14 <div *ngIf="formErrors['displayName']" class="form-error">
15 {{ formErrors['displayName'] }}
16 </div>
17 </div>
18 22
19 <div class="form-group"> 23 <div class="form-row"> <!-- playlist grid -->
20 <label i18n for="description">Description</label> 24 <div class="form-group col-12 col-lg-4 col-xl-3">
21 <textarea 25 <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
22 id="description" formControlName="description" 26 <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
23 [ngClass]="{ 'input-error': formErrors['description'] }"
24 ></textarea>
25 <div *ngIf="formErrors.description" class="form-error">
26 {{ formErrors.description }}
27 </div>
28 </div>
29 </div> 27 </div>
30 28
31 <div class="col-md-12 col-xl-6"> 29 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
32 <div class="form-group"> 30
33 <label i18n for="privacy">Privacy</label> 31 <div class="col-md-12 col-xl-6">
34 <div class="peertube-select-container"> 32 <div class="form-group">
35 <select id="privacy" formControlName="privacy"> 33 <label i18n for="displayName">Display name</label>
36 <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 34 <input
37 </select> 35 type="text" id="displayName"
36 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
37 >
38 <div *ngIf="formErrors['displayName']" class="form-error">
39 {{ formErrors['displayName'] }}
40 </div>
38 </div> 41 </div>
39 42
40 <div *ngIf="formErrors.privacy" class="form-error"> 43 <div class="form-group">
41 {{ formErrors.privacy }} 44 <label i18n for="description">Description</label>
45 <textarea
46 id="description" formControlName="description"
47 [ngClass]="{ 'input-error': formErrors['description'] }"
48 ></textarea>
49 <div *ngIf="formErrors.description" class="form-error">
50 {{ formErrors.description }}
51 </div>
42 </div> 52 </div>
43 </div> 53 </div>
44 54
45 <div class="form-group"> 55 <div class="col-md-12 col-xl-6">
46 <label i18n>Channel</label> 56 <div class="form-group">
47 <div class="peertube-select-container"> 57 <label i18n for="privacy">Privacy</label>
48 <select formControlName="videoChannelId"> 58 <div class="peertube-select-container">
49 <option></option> 59 <select id="privacy" formControlName="privacy">
50 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 60 <option *ngFor="let privacy of videoPlaylistPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
51 </select> 61 </select>
62 </div>
63
64 <div *ngIf="formErrors.privacy" class="form-error">
65 {{ formErrors.privacy }}
66 </div>
52 </div> 67 </div>
53 68
54 <div *ngIf="formErrors['videoChannelId']" class="form-error"> 69 <div class="form-group">
55 {{ formErrors['videoChannelId'] }} 70 <label i18n>Channel</label>
71 <div class="peertube-select-container">
72 <select formControlName="videoChannelId">
73 <option></option>
74 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
75 </select>
76 </div>
77
78 <div *ngIf="formErrors['videoChannelId']" class="form-error">
79 {{ formErrors['videoChannelId'] }}
80 </div>
56 </div> 81 </div>
57 </div>
58 82
59 <div class="form-group"> 83 <div class="form-group">
60 <label i18n>Playlist thumbnail</label> 84 <label i18n>Playlist thumbnail</label>
85
86 <my-preview-upload
87 i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
88 previewWidth="223px" previewHeight="122px"
89 ></my-preview-upload>
90 </div>
91 </div>
61 92
62 <my-preview-upload 93 <div class="form-row"> <!-- submit placement block -->
63 i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile" 94 <div class="col-md-7 col-xl-5"></div>
64 previewWidth="223px" previewHeight="122px" 95 <div class="col-md-5 col-xl-5 d-inline-flex">
65 ></my-preview-upload> 96 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
97 </div>
66 </div> 98 </div>
67 </div> 99 </div>
68 </div> 100 </div>
69 101
70 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
71</form> 102</form>
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
index 5af846d8e..08fab1101 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.scss
@@ -1,8 +1,13 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.form-sub-title { 4label {
5 margin-bottom: 20px; 5 font-weight: $font-regular;
6 font-size: 100%;
7}
8
9.video-playlist-title {
10 @include settings-big-title;
6} 11}
7 12
8input[type=text] { 13input[type=text] {
@@ -25,3 +30,7 @@ input[type=submit] {
25 @include peertube-button; 30 @include peertube-button;
26 @include orange-button; 31 @include orange-button;
27} 32}
33
34.breadcrumb {
35 @include breadcrumb;
36}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 16:47:00 +0000