Bumped to version v5.2.1

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-instance / instance-about-accordion.component.html

diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
index 466d73ca49836e6ba621c6617e7df204c70851a5..5d27bc437ce992020ca748c3a021fc0c39036695 100644 (file)
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html
@@ -1,59 +1,128 @@
 <h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
 
-<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
 
-<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
-  <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance">
-    <ng-template ngbPanelContent>
-      <my-instance-features-table></my-instance-features-table>
-    </ng-template>
-  </ngb-panel>
+<div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true">
+  <div ngbAccordionItem="instance-features" *ngIf="panels.features">
+    <div ngbAccordionHeader>
+      <button ngbAccordionButton>
+        <my-global-icon iconName="playlists"></my-global-icon>
+
+        <ng-container i18n>Features found on this instance</ng-container>
+      </button>
+    </div>
+
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>
+          <my-instance-features-table></my-instance-features-table>
+        </ng-template>
+      </div>
+    </div>
+  </div>
 
   <ng-container *ngIf="about">
-    <ngb-panel
-      *ngIf="getAdministratorsPanel()"
-      id="admin-sustainability" i18n-title title="Administrators & Sustainability"
-    >
-      <ng-template ngbPanelContent>
-        <div class="block">
-          <strong i18n>Who are we?</strong>
-          <div [innerHTML]="aboutHtml.administrator"></div>
+    <div ngbAccordionItem *ngIf="getAdministratorsPanel()" >
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Administrators & Sustainability</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block">
+              <strong i18n>Who are we?</strong>
+              <div [innerHTML]="aboutHtml.administrator"></div>
+            </div>
+
+            <div class="block">
+              <strong i18n>How long do we plan to maintain this instance?</strong>
+              <div [innerHTML]="about.instance.maintenanceLifetime"></div>
+            </div>
+
+            <div class="block">
+              <strong i18n>How will we finance this instance?</strong>
+              <div [innerHTML]="about.instance.businessModel"></div>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem="terms" *ngIf="termsPanel">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          {{ getTermsTitle() }}
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.terms"></div>
+          </ng-template>
         </div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem="moderation-information" *ngIf="moderationPanel">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Moderation information</ng-container>
+        </button>
+      </div>
 
-        <div class="block">
-          <strong i18n>How long do we plan to maintain this instance?</strong>
-          <div [innerHTML]="about.instance.maintenanceLifetime"></div>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
+          </ng-template>
         </div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem="code-of-conduct" *ngIf="codeOfConductPanel">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>Code of conduct</ng-container>
+        </button>
+      </div>
+
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+
+    <div ngbAccordionItem *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
+      <div ngbAccordionHeader>
+        <button ngbAccordionButton>
+          <my-global-icon iconName="playlists"></my-global-icon>
+
+          <ng-container i18n>{{ pluginPanel.title }}</ng-container>
+        </button>
+      </div>
 
-        <div class="block">
-          <strong i18n>How will we finance this instance?</strong>
-          <div [innerHTML]="about.instance.businessModel"></div>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
+            <div class="block" [innerHTML]="pluginPanel.html"></div>
+          </ng-template>
         </div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="termsPanel" id="terms" [title]="getTermsTitle()">
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.terms"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="moderationPanel" id="moderation-information" i18n-title title="Moderation information">
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct" i18n-title title="Code of conduct">
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
-      </ng-template>
-    </ngb-panel>
-
-    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id" [title]="pluginPanel.title">
-      <ng-template ngbPanelContent>
-        <div class="block" [innerHTML]="pluginPanel.html"></div>
-      </ng-template>
-    </ngb-panel>
+      </div>
+    </div>
   </ng-container>
-</ngb-accordion>
+</div>