client/src/app/+about/about-instance/about-instance.component.html

   1 <div class="row">
   2   <div class="col-md-12 col-xl-6">
   3
   4     <div class="about-instance-title">
   5       <h1 i18n class="title">About {{ instanceName }}</h1>
   6
   7       <button i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" (keydown.enter)="openContactModal()" class="contact-admin">Contact administrator</button>
   8     </div>
   9
  10     <div class="block instance-badges">
  11       <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
  12
  13       <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
  14     </div>
  15
  16     <div class="short-description">
  17       <div class="block short-description">{{ shortDescription }}</div>
  18
  19       <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
  20     </div>
  21
  22     <div class="anchor" id="administrators-and-sustainability"></div>
  23     <a
  24       *ngIf="html.administrator || maintenanceLifetime || businessModel"
  25       class="anchor-link"
  26       routerLink="/about/instance" fragment="administrators-and-sustainability"
  27     >
  28       <h2 i18n class="middle-title">
  29         ADMINISTRATORS & SUSTAINABILITY
  30       </h2>
  31     </a>
  32
  33     <div class="block administrator" *ngIf="html.administrator">
  34       <div class="anchor" id="administrators"></div>
  35       <a class="anchor-link" routerLink="/about/instance" fragment="administrators">
  36         <h3 i18n class="section-title">Who we are</h3>
  37       </a>
  38
  39       <div [innerHTML]="html.administrator"></div>
  40     </div>
  41
  42     <div class="block creation-reason" *ngIf="creationReason">
  43       <div class="anchor" id="creation-reason"></div>
  44       <a class="anchor-link" routerLink="/about/instance" fragment="creation-reason">
  45         <h3 i18n class="section-title">Why we created this instance</h3>
  46       </a>
  47
  48       <p>{{ creationReason }}</p>
  49     </div>
  50
  51     <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
  52       <div class="anchor" id="maintenance-lifetime"></div>
  53       <a class="anchor-link" routerLink="/about/instance" fragment="maintenance-lifetime">
  54         <h3 i18n class="section-title">How long we plan to maintain this instance</h3>
  55       </a>
  56
  57       <p>{{ maintenanceLifetime }}</p>
  58     </div>
  59
  60     <div class="block business-model" *ngIf="businessModel">
  61         <div class="anchor" id="buisiness-model"></div>
  62         <a class="anchor-link" routerLink="/about/instance" fragment="buisiness-model">
  63           <h3 i18n class="section-title">How we will pay for this instance</h3>
  64         </a>
  65
  66       <p>{{ businessModel }}</p>
  67     </div>
  68
  69     <div class="anchor" id="information"></div>
  70     <a *ngIf="html.description" class="anchor-link" routerLink="/about/instance" fragment="information">
  71       <h2 i18n class="middle-title">
  72         INFORMATION
  73       </h2>
  74     </a>
  75
  76     <div class="block description">
  77       <div class="anchor" id="description"></div>
  78       <a class="anchor-link" routerLink="/about/instance" fragment="description">
  79         <h3 i18n class="section-title">Description</h3>
  80       </a>
  81
  82       <div [innerHTML]="html.description"></div>
  83     </div>
  84
  85     <div class="anchor" id="moderation"></div>
  86     <a
  87       *ngIf="html.moderationInformation || html.codeOfConduct || html.terms"
  88       class="anchor-link" routerLink="/about/instance" fragment="moderation"
  89     >
  90       <h2 i18n class="middle-title">
  91         MODERATION
  92       </h2>
  93     </a>
  94
  95     <div class="block moderation-information" *ngIf="html.moderationInformation">
  96       <div class="anchor" id="moderation-information"></div>
  97       <a class="anchor-link" routerLink="/about/instance" fragment="moderation-information">
  98         <h3 i18n class="section-title">Moderation information</h3>
  99       </a>
 100
 101       <div [innerHTML]="html.moderationInformation"></div>
 102     </div>
 103
 104     <div class="block code-of-conduct" *ngIf="html.codeOfConduct">
 105       <div class="anchor" id="code-of-conduct"></div>
 106       <a class="anchor-link" routerLink="/about/instance" fragment="code-of-conduct">
 107         <h3 i18n class="section-title">Code of conduct</h3>
 108       </a>
 109
 110       <div [innerHTML]="html.codeOfConduct"></div>
 111     </div>
 112
 113     <div class="block terms">
 114       <div class="anchor" id="terms"></div>
 115       <a class="anchor-link" routerLink="/about/instance" fragment="terms">
 116         <h3 i18n class="section-title">Terms</h3>
 117       </a>
 118
 119       <div [innerHTML]="html.terms"></div>
 120     </div>
 121
 122     <div class="anchor" id="other-information"></div>
 123     <a *ngIf="html.hardwareInformation" class="anchor-link" routerLink="/about/instance" fragment="other-information">
 124       <h2 i18n class="middle-title">
 125         OTHER INFORMATION
 126       </h2>
 127     </a>
 128
 129     <div class="block hardware-information" *ngIf="html.hardwareInformation">
 130       <div class="anchor" id="hardware-information"></div>
 131       <a class="anchor-link" routerLink="/about/instance" fragment="hardware-information">
 132         <h3 i18n class="section-title">Hardware information</h3>
 133       </a>
 134
 135       <div [innerHTML]="html.hardwareInformation"></div>
 136     </div>
 137   </div>
 138
 139   <div class="col-md-12 col-xl-6">
 140     <h2 class="sr-only" i18n>FEATURES</h2>
 141     <my-instance-features-table></my-instance-features-table>
 142   </div>
 143
 144   <div class="col">
 145     <div class="anchor" id="statistics"></div>
 146     <a class="anchor-link" routerLink="/about/instance" fragment="statistics">
 147       <h2 i18n class="middle-title">STATISTICS</h2>
 148     </a>
 149     <my-instance-statistics></my-instance-statistics>
 150   </div>
 151 </div>
 152
 153 <my-contact-admin-modal #contactAdminModal></my-contact-admin-modal>