<label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
- name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
- [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
+ name="broadcastMessageMessage" formControlName="message"
+ [formError]="formErrors['broadcastMessage.message']"
></my-markdown-textarea>
<div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
padding-bottom: 1.5rem;
}
-input[type=text] {
- @include peertube-input-text($form-base-input-width);
+my-markdown-textarea {
+ display: block;
+ max-width: 500px;
+}
+.homepage my-markdown-textarea {
display: block;
+ max-width: 90%;
+
+ ::ng-deep textarea {
+ height: 300px !important;
+ }
}
+input[type=text],
input[type=number] {
@include peertube-input-text($form-base-input-width);
<ng-container formGroupName="instanceCustomHomepage">
- <div class="row mt-5"> <!-- homepage grid -->
+ <div class="homepage row mt-5"> <!-- homepage grid -->
<div class="col-12 col-lg-4 col-xl-3">
<div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
</div>
</div>
<my-markdown-textarea
- name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
+ name="instanceCustomHomepageContent" formControlName="content"
[customMarkdownRenderer]="getCustomMarkdownRenderer()"
- [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
+ [formError]="formErrors['instanceCustomHomepage.content']"
></my-markdown-textarea>
<div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>
</div>
<my-markdown-textarea
- name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+ name="instanceDescription" formControlName="description"
[customMarkdownRenderer]="getCustomMarkdownRenderer()"
- [classes]="{ 'input-error': formErrors['instance.description'] }"
+ [formError]="formErrors['instance.description']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
</div>
<div class="form-group">
<label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
- name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+ name="instanceTerms" formControlName="terms"
+ [formError]="formErrors['instance.terms']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
</div>
<div class="form-group">
<label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
<my-markdown-textarea
- name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
+ name="instanceCodeOfConduct" formControlName="codeOfConduct"
+ [formError]="formErrors['instance.codeOfConduct']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
</div>
<div class="form-group">
<div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
<my-markdown-textarea
- name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
+ name="instanceModerationInformation" formControlName="moderationInformation"
+ [formError]="formErrors['instance.moderationInformation']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
</div>
</div>
<div i18n class="label-small-info">A single person? A non-profit? A company?</div>
<my-markdown-textarea
- name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
- [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+ name="instanceAdministrator" formControlName="administrator"
+ [formError]="formErrors['instance.administrator']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
</div>
<div class="form-group">
<div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
<my-markdown-textarea
- name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
+ name="instanceCreationReason" formControlName="creationReason"
+ [formError]="formErrors['instance.creationReason']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
</div>
<div class="form-group">
<div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
<my-markdown-textarea
- name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
+ name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
+ [formError]="formErrors['instance.maintenanceLifetime']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
</div>
<div class="form-group">
<div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
<my-markdown-textarea
- name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
- [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
+ name="instanceBusinessModel" formControlName="businessModel"
+ [formError]="formErrors['instance.businessModel']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
</div>
</div>
<div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
<my-markdown-textarea
- name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
- [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
+ name="instanceHardwareInformation" formControlName="hardwareInformation"
+ [formError]="formErrors['instance.hardwareInformation']"
></my-markdown-textarea>
-
- <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
</div>
</div>
></my-help>
<my-markdown-textarea
- id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+ id="support" formControlName="support" markdownType="enhanced"
[formError]="formErrors['support']"
></my-markdown-textarea>
</div>
display: block;
}
+my-markdown-textarea {
+ display: block;
+ max-width: 500px;
+}
+
.peertube-select-container {
@include peertube-select-container(340px);
}
<div class="form-group">
<label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
- <my-markdown-textarea
- id="description" formControlName="description"
- [ngClass]="{ 'input-error': formErrors['description'] }"
- ></my-markdown-textarea>
- <div *ngIf="formErrors.description" class="form-error">
- {{ formErrors.description }}
- </div>
+ <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
</div>
</div>
</ng-template>
</my-help>
- <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea>
-
- <div *ngIf="formErrors.description" class="form-error">
- {{ formErrors.description }}
- </div>
+ <my-markdown-textarea
+ formControlName="description" [markdownVideo]="videoToUpdate"
+ [formError]="formErrors.description" [truncate]="250"
+ ></my-markdown-textarea>
</div>
</div>
</ng-container>
</ng-template>
</my-help>
+
<my-markdown-textarea
id="support" formControlName="support" markdownType="enhanced"
- [classes]="{ 'input-error': formErrors['support'] }"
+ [formError]="formErrors['support']"
></my-markdown-textarea>
- <div *ngIf="formErrors.support" class="form-error">
- {{ formErrors.support }}
- </div>
</div>
</div>
<my-markdown-textarea
*ngIf="setting.type === 'markdown-text'"
- markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
- [classes]="{ 'input-error': formErrors['settings.name'] }"
+ markdownType="text" [id]="setting.name" [formControlName]="setting.name"
+ [formError]="formErrors['settings.name']"
></my-markdown-textarea>
<my-markdown-textarea
*ngIf="setting.type === 'markdown-enhanced'"
- markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
- [classes]="{ 'input-error': formErrors['settings.name'] }"
+ markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name"
+ [formError]="formErrors['settings.name']"
></my-markdown-textarea>
<div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
- <div *ngIf="formErrors[setting.name]" class="form-error">
+ <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
{{ formErrors[setting.name] }}
</div>
my-peertube-checkbox + .label-small-info {
margin-top: 5px;
}
+
+my-markdown-textarea {
+ display: block;
+ max-width: 500px;
+}
-<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
+<div class="root" [ngClass]="{ 'maximized': isMaximized }">
<textarea #textarea
[(ngModel)]="content" (ngModelChange)="onModelChange()"
class="form-control" [ngClass]="{ 'input-error': formError }"
[attr.disabled]="disabled || null"
- [ngStyle]="{ height: textareaHeight }"
[id]="name" [name]="name">
</textarea>
@Input() content = ''
@Input() formError: string
- @Input() classes: string[] | { [klass: string]: any[] | any } = []
-
- @Input() textareaMaxWidth = '100%'
- @Input() textareaHeight = '150px'
@Input() truncate: number
}
.input-error:not(:focus) {
- border-color: $red !important;
+ &,
+ & + .nav-preview, // Markdown textarea
+ & + * + .tab-content {
+ border-color: $red !important;
+ }
}
.form-error,
color: $red;
}
-.input-error:focus + .form-error {
- color: pvar(--mainForegroundColor);
+.input-error:focus {
+ & + .form-error,
+ & + * + .form-error, // Markdown textarea
+ & + * + * + .form-error {
+ color: pvar(--mainForegroundColor);
+ }
}
.form-group-description {