aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html92
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.scss22
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}