Migrate to bootstrap 5

[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-instance-information.component.html

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 6f19ede0abce0f7729e11e45a8d467e4437d8dc8..1c567d9621f355fb5a75e75330db915fb3666a49 100644 (file)
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -2,37 +2,46 @@
 
   <ng-container formGroupName="instance">
 
-    <div class="form-row mt-5"> <!-- instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
+
           <input
             type="text" id="instanceName" class="form-control"
             formControlName="name" [ngClass]="{ 'input-error': formErrors.instance.name }"
           >
+
           <div *ngIf="formErrors.instance.name" class="form-error">{{ formErrors.instance.name }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceShortDescription">Short description</label>
+
           <textarea
             id="instanceShortDescription" formControlName="shortDescription" class="form-control small"
             [ngClass]="{ 'input-error': formErrors['instance.shortDescription'] }"
           ></textarea>
+
           <div *ngIf="formErrors.instance.shortDescription" class="form-error">{{ formErrors.instance.shortDescription }}</div>
         </div>
 
         <div class="form-group">
-          <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+          <label i18n for="instanceDescription">Description</label>
+          <div class="label-small-info">
+            <my-custom-markup-help></my-custom-markup-help>
+          </div>
+
           <my-markdown-textarea
             name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
             [classes]="{ 'input-error': formErrors['instance.description'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
         </div>
 
@@ -67,16 +76,15 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- moderation & nsfw grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">MODERATION & NSFW</div>
-        <div i18n class="inner-for-description">
+        <div i18row="inner-for-description">
           Manage <a routerLink="/admin/users">users</a> to build a moderation team.
         </div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
             <ng-template ptTemplate="label">
@@ -98,7 +106,7 @@
           <my-help>
             <ng-template ptTemplate="customHtml">
               <ng-container i18n>
-                With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
+                With <strong>Hide</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video.
               </ng-container>
             </ng-template>
           </my-help>
@@ -106,29 +114,34 @@
           <div class="peertube-select-container">
             <select id="instanceDefaultNSFWPolicy" formControlName="defaultNSFWPolicy" class="form-control">
               <option i18n value="undefined" disabled>Policy for sensitive videos</option>
-              <option i18n value="do_not_list">Do not list</option>
+              <option i18n value="do_not_list">Hide</option>
               <option i18n value="blur">Blur thumbnails</option>
               <option i18n value="display">Display</option>
             </select>
           </div>
+
           <div *ngIf="formErrors.instance.defaultNSFWPolicy" class="form-error">{{ formErrors.instance.defaultNSFWPolicy }}</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'] }"
           ></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'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
         </div>
 
@@ -140,18 +153,19 @@
             name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
         </div>
 
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- you and your instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- you and your instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
@@ -173,6 +187,7 @@
             name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
         </div>
 
@@ -184,6 +199,7 @@
             name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
         </div>
 
@@ -195,18 +211,19 @@
             name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
             [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
           ></my-markdown-textarea>
+
           <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
         </div>
 
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- other information grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- other information grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">OTHER INFORMATION</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>