aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-17 12:21:34 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit75034888a65cc5840b4cb97d54c302b033110bb0 (patch)
tree79767deb0e95cc062d20c148f1ae684fc19c3bf0 /client/src
parentf9b8e5c457ad507e77b500866786c82ed4187c92 (diff)
downloadPeerTube-75034888a65cc5840b4cb97d54c302b033110bb0.tar.gz
PeerTube-75034888a65cc5840b4cb97d54c302b033110bb0.tar.zst
PeerTube-75034888a65cc5840b4cb97d54c302b033110bb0.zip
Refactoring manage video channel component style
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html18
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss33
2 files changed, 9 insertions, 42 deletions
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index b93dc2b12..966a350d1 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -1,6 +1,6 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2 2
3<div class="margin-content"> 3<div class="margin-content pt-4">
4 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> 4 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
5 5
6 <div class="row"> <!-- channel grid --> 6 <div class="row"> <!-- channel grid -->
@@ -13,12 +13,12 @@
13 <label i18n>Banner image of the channel</label> 13 <label i18n>Banner image of the channel</label>
14 14
15 <my-actor-banner-edit 15 <my-actor-banner-edit
16 *ngIf="videoChannel" [previewImage]="isCreation()" 16 *ngIf="videoChannel" [previewImage]="isCreation()" class="d-block mb-4"
17 [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()" 17 [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
18 ></my-actor-banner-edit> 18 ></my-actor-banner-edit>
19 19
20 <my-actor-avatar-edit 20 <my-actor-avatar-edit
21 *ngIf="videoChannel" [previewImage]="isCreation()" 21 *ngIf="videoChannel" [previewImage]="isCreation()" class="d-block mb-4"
22 [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()" 22 [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
23 [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()" 23 [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
24 ></my-actor-avatar-edit> 24 ></my-actor-avatar-edit>
@@ -29,7 +29,7 @@
29 <div class="input-group"> 29 <div class="input-group">
30 <input 30 <input
31 type="text" id="name" i18n-placeholder placeholder="Example: my_channel" 31 type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
32 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control" 32 formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control w-auto flex-grow-1 d-block"
33 > 33 >
34 <div class="input-group-text">@{{ instanceHost }}</div> 34 <div class="input-group-text">@{{ instanceHost }}</div>
35 </div> 35 </div>
@@ -41,7 +41,7 @@
41 <div class="form-group"> 41 <div class="form-group">
42 <label i18n for="display-name">Display name</label> 42 <label i18n for="display-name">Display name</label>
43 <input 43 <input
44 type="text" id="display-name" class="form-control" 44 type="text" id="display-name" class="form-control d-block"
45 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" 45 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
46 > 46 >
47 <div *ngIf="formErrors['display-name']" class="form-error"> 47 <div *ngIf="formErrors['display-name']" class="form-error">
@@ -52,7 +52,7 @@
52 <div class="form-group"> 52 <div class="form-group">
53 <label i18n for="description">Description</label> 53 <label i18n for="description">Description</label>
54 <textarea 54 <textarea
55 id="description" formControlName="description" class="form-control" 55 id="description" formControlName="description" class="form-control d-block"
56 [ngClass]="{ 'input-error': formErrors['description'] }" 56 [ngClass]="{ 'input-error': formErrors['description'] }"
57 ></textarea> 57 ></textarea>
58 <div *ngIf="formErrors.description" class="form-error"> 58 <div *ngIf="formErrors.description" class="form-error">
@@ -68,8 +68,8 @@
68 ></my-help> 68 ></my-help>
69 69
70 <my-markdown-textarea 70 <my-markdown-textarea
71 id="support" formControlName="support" markdownType="enhanced" 71 id="support" formControlName="support" class="d-block"
72 [formError]="formErrors['support']" 72 markdownType="enhanced" [formError]="formErrors['support']"
73 ></my-markdown-textarea> 73 ></my-markdown-textarea>
74 </div> 74 </div>
75 75
@@ -86,7 +86,7 @@
86 <div class="row"> <!-- submit placement block --> 86 <div class="row"> <!-- submit placement block -->
87 <div class="col-md-7 col-xl-5"></div> 87 <div class="col-md-7 col-xl-5"></div>
88 <div class="col-md-5 col-xl-5 d-inline-flex"> 88 <div class="col-md-5 col-xl-5 d-inline-flex">
89 <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> 89 <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
90 </div> 90 </div>
91 </div> 91 </div>
92 </form> 92 </form>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index cde848da6..4e21af2a8 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -1,49 +1,27 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4.margin-content {
5 padding-top: 20px;
6}
7
8.video-channel-title { 4.video-channel-title {
9 @include settings-big-title; 5 @include settings-big-title;
10} 6}
11 7
12my-actor-avatar-edit,
13my-actor-banner-edit {
14 display: block;
15 margin-bottom: 20px;
16}
17
18my-actor-banner-edit { 8my-actor-banner-edit {
19 max-width: 500px; 9 max-width: 500px;
20} 10}
21 11
22input[type=text] { 12input[type=text] {
23 @include peertube-input-text(340px); 13 @include peertube-input-text(340px);
24
25 display: block;
26
27 &#name {
28 width: auto;
29 flex-grow: 1;
30 }
31} 14}
32 15
33input[type=submit] { 16input[type=submit] {
34 @include peertube-button;
35 @include orange-button;
36 @include margin-left(auto); 17 @include margin-left(auto);
37} 18}
38 19
39textarea { 20textarea {
40 @include peertube-textarea(500px, 150px); 21 @include peertube-textarea(500px, 150px);
41
42 display: block;
43} 22}
44 23
45my-markdown-textarea { 24my-markdown-textarea {
46 display: block;
47 max-width: 500px; 25 max-width: 500px;
48} 26}
49 27
@@ -54,14 +32,3 @@ my-markdown-textarea {
54.breadcrumb { 32.breadcrumb {
55 @include breadcrumb; 33 @include breadcrumb;
56} 34}
57
58@media screen and (max-width: $small-view) {
59 input[type=text]#name {
60 width: auto !important;
61 }
62
63 label[for=name] + div,
64 textarea {
65 width: 100%;
66 }
67}