interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactoring manage video channel component style

This commit is contained in:
Wicklow 2023-02-17 12:21:34 +01:00 committed by Chocobozzz
parent f9b8e5c457
commit 75034888a6
2 changed files with 9 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div> <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<div class="margin-content"> <div class="margin-content pt-4">
<form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
<div class="row"> <!-- channel grid --> <div class="row"> <!-- channel grid -->
@ -13,12 +13,12 @@
<label i18n>Banner image of the channel</label> <label i18n>Banner image of the channel</label>
<my-actor-banner-edit <my-actor-banner-edit
*ngIf="videoChannel" [previewImage]="isCreation()" *ngIf="videoChannel" [previewImage]="isCreation()" class="d-block mb-4"
[actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()" [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
></my-actor-banner-edit> ></my-actor-banner-edit>
<my-actor-avatar-edit <my-actor-avatar-edit
*ngIf="videoChannel" [previewImage]="isCreation()" *ngIf="videoChannel" [previewImage]="isCreation()" class="d-block mb-4"
[actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()" [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
[displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()" [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
></my-actor-avatar-edit> ></my-actor-avatar-edit>
@ -29,7 +29,7 @@
<div class="input-group"> <div class="input-group">
<input <input
type="text" id="name" i18n-placeholder placeholder="Example: my_channel" type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control" formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control w-auto flex-grow-1 d-block"
> >
<div class="input-group-text">@{{ instanceHost }}</div> <div class="input-group-text">@{{ instanceHost }}</div>
</div> </div>
@ -41,7 +41,7 @@
<div class="form-group"> <div class="form-group">
<label i18n for="display-name">Display name</label> <label i18n for="display-name">Display name</label>
<input <input
type="text" id="display-name" class="form-control" type="text" id="display-name" class="form-control d-block"
formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
> >
<div *ngIf="formErrors['display-name']" class="form-error"> <div *ngIf="formErrors['display-name']" class="form-error">
@ -52,7 +52,7 @@
<div class="form-group"> <div class="form-group">
<label i18n for="description">Description</label> <label i18n for="description">Description</label>
<textarea <textarea
id="description" formControlName="description" class="form-control" id="description" formControlName="description" class="form-control d-block"
[ngClass]="{ 'input-error': formErrors['description'] }" [ngClass]="{ 'input-error': formErrors['description'] }"
></textarea> ></textarea>
<div *ngIf="formErrors.description" class="form-error"> <div *ngIf="formErrors.description" class="form-error">
@ -68,8 +68,8 @@
></my-help> ></my-help>
<my-markdown-textarea <my-markdown-textarea
id="support" formControlName="support" markdownType="enhanced" id="support" formControlName="support" class="d-block"
[formError]="formErrors['support']" markdownType="enhanced" [formError]="formErrors['support']"
></my-markdown-textarea> ></my-markdown-textarea>
</div> </div>
@ -86,7 +86,7 @@
<div class="row"> <!-- submit placement block --> <div class="row"> <!-- submit placement block -->
<div class="col-md-7 col-xl-5"></div> <div class="col-md-7 col-xl-5"></div>
<div class="col-md-5 col-xl-5 d-inline-flex"> <div class="col-md-5 col-xl-5 d-inline-flex">
<input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
</div> </div>
</div> </div>
</form> </form>

33
client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
View File

@ -1,49 +1,27 @@
@use '_variables' as *; @use '_variables' as *;
@use '_mixins' as *; @use '_mixins' as *;
.margin-content {
padding-top: 20px;
}
.video-channel-title { .video-channel-title {
@include settings-big-title; @include settings-big-title;
} }
my-actor-avatar-edit,
my-actor-banner-edit {
display: block;
margin-bottom: 20px;
}
my-actor-banner-edit { my-actor-banner-edit {
max-width: 500px; max-width: 500px;
} }
input[type=text] { input[type=text] {
@include peertube-input-text(340px); @include peertube-input-text(340px);
display: block;
&#name {
width: auto;
flex-grow: 1;
}
} }
input[type=submit] { input[type=submit] {
@include peertube-button;
@include orange-button;
@include margin-left(auto); @include margin-left(auto);
} }
textarea { textarea {
@include peertube-textarea(500px, 150px); @include peertube-textarea(500px, 150px);
display: block;
} }
my-markdown-textarea { my-markdown-textarea {
display: block;
max-width: 500px; max-width: 500px;
} }
@ -54,14 +32,3 @@ my-markdown-textarea {
.breadcrumb { .breadcrumb {
@include breadcrumb; @include breadcrumb;
} }
@media screen and (max-width: $small-view) {
input[type=text]#name {
width: auto !important;
}
label[for=name] + div,
textarea {
width: 100%;
}
}