aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+about
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-08-23 15:23:27 +0200
committerChocobozzz <chocobozzz@cpy.re>2019-09-05 10:17:02 +0200
commitccc00cb2aac1360921b957f3ecb3be7eb55dfa1b (patch)
tree364e1beecb1db90af60f23bbb5219ff2f964cc0d /client/src/app/+about
parent2ba613a5438f993c3874376dd79be9d460ea81d1 (diff)
downloadPeerTube-ccc00cb2aac1360921b957f3ecb3be7eb55dfa1b.tar.gz
PeerTube-ccc00cb2aac1360921b957f3ecb3be7eb55dfa1b.tar.zst
PeerTube-ccc00cb2aac1360921b957f3ecb3be7eb55dfa1b.zip
Add more attributes to about page
Diffstat (limited to 'client/src/app/+about')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html53
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss19
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.ts27
3 files changed, 85 insertions, 14 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 7c27ec760..0fd3626b7 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -1,7 +1,8 @@
1<div class="row"> 1<div class="row">
2 <div class="col-md-12 col-xl-6"> 2 <div class="col-md-12 col-xl-6">
3
3 <div class="about-instance-title"> 4 <div class="about-instance-title">
4 <div i18n>About {{ instanceName }} instance</div> 5 <div i18n class="title">About {{ instanceName }} instance</div>
5 6
6 <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div> 7 <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div>
7 </div> 8 </div>
@@ -12,16 +13,58 @@
12 <div *ngIf="isNSFW" class="dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> 13 <div *ngIf="isNSFW" class="dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
13 </div> 14 </div>
14 15
15 <div class="description"> 16 <div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
17 Administrators & sustainability
18 </div>
19
20 <div class="block administrator" *ngIf="html.administrator">
21 <div i18n class="section-title">Instance administrators</div>
22
23 <div [innerHTML]="html.administrator"></div>
24 </div>
25
26 <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
27 <div i18n class="section-title">Maintenance lifetime</div>
28
29 <p>{{ maintenanceLifetime }}</p>
30 </div>
31
32 <div class="block business-model" *ngIf="businessModel">
33 <div i18n class="section-title">Business model</div>
34
35 <p>{{ businessModel }}</p>
36 </div>
37
38 <div class="middle-title" *ngIf="html.description">
39 Information
40 </div>
41
42 <div class="block description">
16 <div i18n class="section-title">Description</div> 43 <div i18n class="section-title">Description</div>
17 44
18 <div [innerHTML]="descriptionHTML"></div> 45 <div [innerHTML]="html.description"></div>
46 </div>
47
48 <div class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
49 Moderation
50 </div>
51
52 <div class="block moderation-information" *ngIf="html.moderationInformation">
53 <div i18n class="section-title">Moderation information</div>
54
55 <div [innerHTML]="html.moderationInformation"></div>
56 </div>
57
58 <div class="block code-of-conduct" *ngIf="html.codeOfConduct">
59 <div i18n class="section-title">Code of conduct</div>
60
61 <div [innerHTML]="html.codeOfConduct"></div>
19 </div> 62 </div>
20 63
21 <div class="terms" id="terms-section"> 64 <div class="block terms" id="terms-section">
22 <div i18n class="section-title">Terms</div> 65 <div i18n class="section-title">Terms</div>
23 66
24 <div [innerHTML]="termsHTML"></div> 67 <div [innerHTML]="html.terms"></div>
25 </div> 68 </div>
26 </div> 69 </div>
27 70
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 0296ae8e9..0585ad5f3 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -5,13 +5,13 @@
5 display: flex; 5 display: flex;
6 justify-content: space-between; 6 justify-content: space-between;
7 7
8 & > div { 8 .title {
9 font-size: 20px; 9 font-size: 20px;
10 font-weight: bold;
11 margin-bottom: 15px; 10 margin-bottom: 15px;
11 font-weight: $font-semibold;
12 } 12 }
13 13
14 & > .contact-admin { 14 .contact-admin {
15 @include peertube-button; 15 @include peertube-button;
16 @include orange-button; 16 @include orange-button;
17 17
@@ -21,11 +21,20 @@
21 21
22.section-title { 22.section-title {
23 font-weight: $font-semibold; 23 font-weight: $font-semibold;
24 font-size: 20px; 24 font-size: 16px;
25 margin-bottom: 5px; 25 margin-bottom: 5px;
26 display: flex;
27 align-items: center;
28}
29
30.middle-title {
31 @include in-content-small-title;
32
33 margin-top: 45px;
34 margin-bottom: 25px;
26} 35}
27 36
28.short-description, .description, .terms, .signup { 37.block {
29 margin-bottom: 30px; 38 margin-bottom: 30px;
30} 39}
31 40
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index a5204de27..b85a6be94 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -14,8 +14,20 @@ export class AboutInstanceComponent implements OnInit {
14 @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent 14 @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
15 15
16 shortDescription = '' 16 shortDescription = ''
17 descriptionHTML = '' 17
18 termsHTML = '' 18 html = {
19 description: '',
20 terms: '',
21 codeOfConduct: '',
22 moderationInformation: '',
23 administrator: ''
24 }
25
26 maintenanceLifetime = ''
27 businessModel = ''
28
29 languages: string[] = []
30 categories: number[] = []
19 31
20 constructor ( 32 constructor (
21 private notifier: Notifier, 33 private notifier: Notifier,
@@ -43,8 +55,15 @@ export class AboutInstanceComponent implements OnInit {
43 async res => { 55 async res => {
44 this.shortDescription = res.instance.shortDescription 56 this.shortDescription = res.instance.shortDescription
45 57
46 this.descriptionHTML = await this.markdownService.textMarkdownToHTML(res.instance.description) 58 this.maintenanceLifetime = res.instance.maintenanceLifetime
47 this.termsHTML = await this.markdownService.textMarkdownToHTML(res.instance.terms) 59 this.businessModel = res.instance.businessModel
60
61 for (const key of [ 'description', 'terms', 'codeOfConduct', 'moderationInformation', 'administrator' ]) {
62 this.html[key] = await this.markdownService.textMarkdownToHTML(res.instance[key])
63 }
64
65 this.languages = res.instance.languages
66 this.categories = res.instance.categories
48 }, 67 },
49 68
50 () => this.notifier.error(this.i18n('Cannot get about information from server')) 69 () => this.notifier.error(this.i18n('Cannot get about information from server'))