aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts2
-rw-r--r--client/src/app/+my-account/my-account-settings/my-account-settings.component.html1
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html101
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss44
-rw-r--r--client/src/app/menu/menu.component.html4
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss21
6 files changed, 108 insertions, 65 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index c3eac68bb..d81859d5c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -18,7 +18,7 @@ import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
18 styleUrls: [ './edit-custom-config.component.scss' ] 18 styleUrls: [ './edit-custom-config.component.scss' ]
19}) 19})
20export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked { 20export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
21 @ViewChild('tabs') private tabs: NgbTabset 21 @ViewChild('tabs') tabs: NgbTabset
22 22
23 initDone = false 23 initDone = false
24 customConfig: CustomConfig 24 customConfig: CustomConfig
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 87296bc19..ddcde828c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -24,6 +24,7 @@
24 24
25<div class="form-row mt-5"> <!-- video settings grid --> 25<div class="form-row mt-5"> <!-- video settings grid -->
26 <div class="form-group col-12 col-lg-4 col-xl-3"> 26 <div class="form-group col-12 col-lg-4 col-xl-3">
27 <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
27 <div i18n class="account-title">VIDEO SETTINGS</div> 28 <div i18n class="account-title">VIDEO SETTINGS</div>
28 </div> 29 </div>
29 30
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index f87df87df..cc20674c9 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -1,8 +1,3 @@
1<my-actor-avatar-info
2 *ngIf="isCreation() === false && videoChannelToUpdate"
3 [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
4></my-actor-avatar-info>
5
6<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div> 1<div i18n class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div>
7 2
8<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
@@ -24,49 +19,69 @@
24 </div> 19 </div>
25 </div> 20 </div>
26 21
27 <div class="form-group"> 22 <div class="form-row"> <!-- channel grid -->
28 <label i18n for="display-name">Display name</label> 23 <div class="form-group col-12 col-lg-4 col-xl-3">
29 <input 24 <div i18n class="video-channel-title">CHANNEL</div>
30 type="text" id="display-name"
31 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
32 >
33 <div *ngIf="formErrors['display-name']" class="form-error">
34 {{ formErrors['display-name'] }}
35 </div> 25 </div>
36 </div>
37 26
38 <div class="form-group"> 27 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
39 <label i18n for="description">Description</label> 28
40 <textarea 29 <my-actor-avatar-info
41 id="description" formControlName="description" 30 *ngIf="isCreation() === false && videoChannelToUpdate"
42 [ngClass]="{ 'input-error': formErrors['description'] }" 31 [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)"
43 ></textarea> 32 ></my-actor-avatar-info>
44 <div *ngIf="formErrors.description" class="form-error"> 33
45 {{ formErrors.description }} 34 <div class="form-group">
46 </div> 35 <label i18n for="display-name">Display name</label>
47 </div> 36 <input
37 type="text" id="display-name"
38 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
39 >
40 <div *ngIf="formErrors['display-name']" class="form-error">
41 {{ formErrors['display-name'] }}
42 </div>
43 </div>
44
45 <div class="form-group">
46 <label i18n for="description">Description</label>
47 <textarea
48 id="description" formControlName="description"
49 [ngClass]="{ 'input-error': formErrors['description'] }"
50 ></textarea>
51 <div *ngIf="formErrors.description" class="form-error">
52 {{ formErrors.description }}
53 </div>
54 </div>
55
56 <div class="form-group">
57 <label for="support">Support</label>
58 <my-help
59 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
60 When you will upload a video in this channel, the video support field will be automatically filled by this text."
61 ></my-help>
62 <my-markdown-textarea
63 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
64 [classes]="{ 'input-error': formErrors['support'] }"
65 ></my-markdown-textarea>
66 <div *ngIf="formErrors.support" class="form-error">
67 {{ formErrors.support }}
68 </div>
69 </div>
70
71 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
72 <my-peertube-checkbox
73 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
74 i18n-labelText labelText="Overwrite support field of all videos of this channel"
75 ></my-peertube-checkbox>
76 </div>
48 77
49 <div class="form-group">
50 <label for="support">Support</label>
51 <my-help
52 helpType="markdownEnhanced" i18n-preHtml preHtml="Short text to tell people how they can support your channel (membership platform...).<br /><br />
53When you will upload a video in this channel, the video support field will be automatically filled by this text."
54 ></my-help>
55 <my-markdown-textarea
56 id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced"
57 [classes]="{ 'input-error': formErrors['support'] }"
58 ></my-markdown-textarea>
59 <div *ngIf="formErrors.support" class="form-error">
60 {{ formErrors.support }}
61 </div> 78 </div>
62 </div> 79 </div>
63 80
64 <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()"> 81 <div class="form-row"> <!-- submit placement block -->
65 <my-peertube-checkbox 82 <div class="col-md-7 col-xl-5"></div>
66 inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate" 83 <div class="col-md-5 col-xl-5 d-inline-flex">
67 i18n-labelText labelText="Overwrite support field of all videos of this channel" 84 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
68 ></my-peertube-checkbox> 85 </div>
69 </div> 86 </div>
70
71 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
72</form> 87</form>
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 d35e0ed64..fa6b18b37 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,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.video-channel-title {
5 @include settings-big-title;
6}
7
4.form-sub-title { 8.form-sub-title {
5 margin-bottom: 20px; 9 margin-bottom: 20px;
6} 10}
@@ -18,28 +22,44 @@ my-actor-avatar-info {
18 height: 30px; 22 height: 30px;
19} 23}
20 24
21input[type=text] { 25input {
22 @include peertube-input-text(340px); 26 &[type=text] {
23 27 @include peertube-input-text(340px);
24 display: block; 28
29 display: block;
30
31 &#name {
32 width: auto;
33 flex-grow: 1;
34 }
35 }
25 36
26 &#name { 37 &[type=submit] {
27 width: auto; 38 @include peertube-button;
28 flex-grow: 1; 39 @include orange-button;
40 margin-left: auto;
29 } 41 }
30} 42}
31 43
44label {
45 font-weight: $font-regular;
46 font-size: 100%;
47}
48
32textarea { 49textarea {
33 @include peertube-textarea(500px, 150px); 50 @include peertube-textarea(500px, 150px);
34 51
35 display: block; 52 display: block;
36} 53}
37 54
38.peertube-select-container { 55my-markdown-textarea ::ng-deep {
39 @include peertube-select-container(340px); 56 .root {
57 @media screen and (max-width: 1400px) {
58 flex-direction: column !important;
59 }
60 }
40} 61}
41 62
42input[type=submit] { 63.peertube-select-container {
43 @include peertube-button; 64 @include peertube-select-container(340px);
44 @include orange-button;
45} 65}
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 399350616..f1c131184 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -37,13 +37,13 @@
37 <i class="ml-auto glyphicon glyphicon-menu-right"></i> 37 <i class="ml-auto glyphicon glyphicon-menu-right"></i>
38 </a> 38 </a>
39 39
40 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account"> 40 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
41 <my-global-icon iconName="video-lang"></my-global-icon> 41 <my-global-icon iconName="video-lang"></my-global-icon>
42 <ng-container i18n>Videos: {{ videoLanguages.join(', ') }}</ng-container> 42 <ng-container i18n>Videos: {{ videoLanguages.join(', ') }}</ng-container>
43 <i class="ml-auto glyphicon glyphicon-menu-right"></i> 43 <i class="ml-auto glyphicon glyphicon-menu-right"></i>
44 </a> 44 </a>
45 45
46 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account"> 46 <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-settings">
47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive"></my-global-icon> 47 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy === 'display' }" iconName="sensitive"></my-global-icon>
48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive"></my-global-icon> 48 <my-global-icon class="hover-display-toggle" [ngClass]="{ 'not-displayed': user.nsfwPolicy !== 'display' }" iconName="unsensitive"></my-global-icon>
49 <ng-container i18n>Sensitive: {{ nsfwPolicy }}</ng-container> 49 <ng-container i18n>Sensitive: {{ nsfwPolicy }}</ng-container>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index f95ff5aba..5ed1ac629 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -17,8 +17,20 @@
17 font-size: 13px; 17 font-size: 13px;
18} 18}
19 19
20.title-block .title-page { 20.title-block {
21 margin-right: 0; 21 .title-page {
22 margin-right: 0;
23 }
24
25 my-feed {
26 display: inline-block;
27 margin-left: 5px;
28 opacity: 0;
29 transition: ease-in .2s opacity;
30 }
31 &:hover my-feed {
32 opacity: 1;
33 }
22} 34}
23 35
24#dropdownSortComments { 36#dropdownSortComments {
@@ -28,11 +40,6 @@
28 transform: translateY(-7%); 40 transform: translateY(-7%);
29} 41}
30 42
31my-feed {
32 display: inline-block;
33 margin-left: 5px;
34}
35
36@media screen and (max-width: 600px) { 43@media screen and (max-width: 600px) {
37 .view-replies { 44 .view-replies {
38 margin-left: 46px; 45 margin-left: 46px;