diff options
Diffstat (limited to 'client/src/app')
-rw-r--r-- | client/src/app/+about/about-instance/about-instance.component.html | 92 | ||||
-rw-r--r-- | client/src/app/+about/about-instance/about-instance.component.scss | 22 |
2 files changed, 92 insertions, 22 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 3bc63b7d1..d759c4343 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html | |||
@@ -19,72 +19,118 @@ | |||
19 | <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> | 19 | <div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> |
20 | </div> | 20 | </div> |
21 | 21 | ||
22 | <h2 i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel"> | 22 | <div class="anchor" id="administrators-and-sustainability"></div> |
23 | ADMINISTRATORS & SUSTAINABILITY | 23 | <a |
24 | </h2> | 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> | ||
25 | 32 | ||
26 | <div class="block administrator" *ngIf="html.administrator"> | 33 | <div class="block administrator" *ngIf="html.administrator"> |
27 | <h3 i18n class="section-title">Who we are</h3> | 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> | ||
28 | 38 | ||
29 | <div [innerHTML]="html.administrator"></div> | 39 | <div [innerHTML]="html.administrator"></div> |
30 | </div> | 40 | </div> |
31 | 41 | ||
32 | <div class="block creation-reason" *ngIf="creationReason"> | 42 | <div class="block creation-reason" *ngIf="creationReason"> |
33 | <h3 i18n class="section-title">Why we created this instance</h3> | 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> | ||
34 | 47 | ||
35 | <p>{{ creationReason }}</p> | 48 | <p>{{ creationReason }}</p> |
36 | </div> | 49 | </div> |
37 | 50 | ||
38 | <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime"> | 51 | <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime"> |
39 | <h3 i18n class="section-title">How long we plan to maintain this instance</h3> | 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> | ||
40 | 56 | ||
41 | <p>{{ maintenanceLifetime }}</p> | 57 | <p>{{ maintenanceLifetime }}</p> |
42 | </div> | 58 | </div> |
43 | 59 | ||
44 | <div class="block business-model" *ngIf="businessModel"> | 60 | <div class="block business-model" *ngIf="businessModel"> |
45 | <h3 i18n class="section-title">How we will pay for this instance</h3> | 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> | ||
46 | 65 | ||
47 | <p>{{ businessModel }}</p> | 66 | <p>{{ businessModel }}</p> |
48 | </div> | 67 | </div> |
49 | 68 | ||
50 | <h2 i18n class="middle-title" *ngIf="html.description"> | 69 | <div class="anchor" id="information"></div> |
51 | INFORMATION | 70 | <a *ngIf="html.description" class="anchor-link" routerLink="/about/instance" fragment="information"> |
52 | </h2> | 71 | <h2 i18n class="middle-title"> |
72 | INFORMATION | ||
73 | </h2> | ||
74 | </a> | ||
53 | 75 | ||
54 | <div class="block description"> | 76 | <div class="block description"> |
55 | <h3 i18n class="section-title">Description</h3> | 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> | ||
56 | 81 | ||
57 | <div [innerHTML]="html.description"></div> | 82 | <div [innerHTML]="html.description"></div> |
58 | </div> | 83 | </div> |
59 | 84 | ||
60 | <h2 i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms"> | 85 | <div class="anchor" id="moderation"></div> |
61 | MODERATION | 86 | <a |
62 | </h2> | 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> | ||
63 | 94 | ||
64 | <div class="block moderation-information" *ngIf="html.moderationInformation"> | 95 | <div class="block moderation-information" *ngIf="html.moderationInformation"> |
65 | <h3 i18n class="section-title">Moderation information</h3> | 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> | ||
66 | 100 | ||
67 | <div [innerHTML]="html.moderationInformation"></div> | 101 | <div [innerHTML]="html.moderationInformation"></div> |
68 | </div> | 102 | </div> |
69 | 103 | ||
70 | <div class="block code-of-conduct" *ngIf="html.codeOfConduct"> | 104 | <div class="block code-of-conduct" *ngIf="html.codeOfConduct"> |
71 | <h3 i18n class="section-title">Code of conduct</h3> | 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> | ||
72 | 109 | ||
73 | <div [innerHTML]="html.codeOfConduct"></div> | 110 | <div [innerHTML]="html.codeOfConduct"></div> |
74 | </div> | 111 | </div> |
75 | 112 | ||
76 | <div class="block terms"> | 113 | <div class="block terms"> |
77 | <h3 i18n class="section-title">Terms</h3> | 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> | ||
78 | 118 | ||
79 | <div [innerHTML]="html.terms"></div> | 119 | <div [innerHTML]="html.terms"></div> |
80 | </div> | 120 | </div> |
81 | 121 | ||
82 | <h2 i18n class="middle-title" *ngIf="html.hardwareInformation"> | 122 | <div class="anchor" id="other-information"></div> |
83 | OTHER INFORMATION | 123 | <a *ngIf="html.hardwareInformation" class="anchor-link" routerLink="/about/instance" fragment="other-information"> |
84 | </h2> | 124 | <h2 i18n class="middle-title"> |
125 | OTHER INFORMATION | ||
126 | </h2> | ||
127 | </a> | ||
85 | 128 | ||
86 | <div class="block hardware-information" *ngIf="html.hardwareInformation"> | 129 | <div class="block hardware-information" *ngIf="html.hardwareInformation"> |
87 | <h3 i18n class="section-title">Hardware information</h3> | 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> | ||
88 | 134 | ||
89 | <div [innerHTML]="html.hardwareInformation"></div> | 135 | <div [innerHTML]="html.hardwareInformation"></div> |
90 | </div> | 136 | </div> |
@@ -97,7 +143,9 @@ | |||
97 | 143 | ||
98 | <div class="col"> | 144 | <div class="col"> |
99 | <div class="anchor" id="statistics"></div> | 145 | <div class="anchor" id="statistics"></div> |
100 | <h2 i18n class="middle-title">STATISTICS</h2> | 146 | <a class="anchor-link" routerLink="/about/instance" fragment="statistics"> |
147 | <h2 i18n class="middle-title">STATISTICS</h2> | ||
148 | </a> | ||
101 | <my-instance-statistics></my-instance-statistics> | 149 | <my-instance-statistics></my-instance-statistics> |
102 | </div> | 150 | </div> |
103 | </div> | 151 | </div> |
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 154031939..2e77ade9b 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss | |||
@@ -56,3 +56,25 @@ | |||
56 | margin-top: 20px; | 56 | margin-top: 20px; |
57 | font-weight: $font-semibold; | 57 | font-weight: $font-semibold; |
58 | } | 58 | } |
59 | |||
60 | .anchor-link { | ||
61 | @include disable-outline; | ||
62 | |||
63 | position: relative; | ||
64 | |||
65 | &:hover, &:active { | ||
66 | &::after { | ||
67 | content: '#'; | ||
68 | display: inline-block; | ||
69 | margin-left: 0.2em; | ||
70 | } | ||
71 | } | ||
72 | |||
73 | .middle-title, .section-title { | ||
74 | display: inline-block; | ||
75 | } | ||
76 | |||
77 | .section-title { | ||
78 | color: initial; | ||
79 | } | ||
80 | } | ||