Skip to content

Commit 43d7470

Browse files
mschwrdtnrDanielHabenicht
mschwrdtnr
authored and
DanielHabenicht
committed
feat(information-page): rework information page (#202)
* design information-page * styling of the page * feat(information-page): rework information page + Translations * rename card-container to pb-justify-center * turn off tests for page-information * move table styles into component + remove * {align-text: center} + some spelling changes * renaming * use assets folder for contributors move contributors to assets * Delete CONTRIBUTORS.md moved wrong * Delete CONTRIBUTORS.md * refactor mad-card-header
1 parent 8e42d47 commit 43d7470

File tree

12 files changed

+459
-345
lines changed

12 files changed

+459
-345
lines changed

‎.all-contributorsrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"files": [
33
"docs/README.md",
4-
"docs/CONTRIBUTORS.md"
4+
"Phonebook.Frontend/src/assets/CONTRIBUTORS.md"
55
],
66
"imageSize": 100,
77
"commit": false,

‎Phonebook.Frontend/src/app/pages/page-information/page-information.component.html‎

Lines changed: 105 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,111 @@
1-
<mat-card class="pb-margin-20">
2-
<mat-card-header>
3-
<mat-card-title>
4-
<h1 i18n="PageInformationComponent|Title of the page information page@@PageInformationComponentTitle">
5-
The Phonebook
6-
</h1>
7-
</mat-card-title>
8-
<mat-card-subtitle
9-
*ngIf="isPreview"
10-
i18n="Page-informationComponent|Disclaimer beneath title@@PageInformationComponentDisclaimer"
11-
>
1+
<div class="pb-margin-left-right-responsive">
2+
<div class="header pb-margin-top-20">
3+
<h1 i18n="PageInformationComponent|Title of the page information@@PageInformationComponentTitle">
4+
Phonebook
5+
</h1>
6+
<p *ngIf="isPreview" i18n="Page-informationComponent|Disclaimer beneath title@@PageInformationComponentDisclaimer">
127
This is a Preview application. We are doing our best not to break anything, but we can't guarantee. Thats why all
138
Features are still subject to change without further notice and your data may get lost.
14-
</mat-card-subtitle>
15-
</mat-card-header>
16-
17-
<mat-card-content>
18-
<h2 i18n="Page-informationComponent|Subtitle for Contact and Feedback@@PageInformationComponentSubTitleFeedback">
19-
Contact & Feedback
20-
</h2>
21-
<mat-list i18n="Page-informationComponent|Feedback Section@@PageInformationComponentSectionFeedback">
22-
<mat-list-item>
23-
<p>
9+
</p>
10+
</div>
11+
<div class="pb-flex pb-center-element">
12+
<!-- contact and feedback -->
13+
<mat-card class="small-card">
14+
<mat-card-header>
15+
<mat-card-title
16+
><mat-icon color="primary">sentiment_satisfied_alt</mat-icon>
17+
<p
18+
i18n="Page-informationComponent|Subtitle for Contact and Feedback@@PageInformationComponentSubTitleFeedback"
19+
>
20+
Contact & Feedback
21+
</p></mat-card-title
22+
>
23+
</mat-card-header>
24+
<mat-card-content i18n="Page-informationComponent|Feedback Section@@PageInformationComponentSectionFeedback">
25+
<span>
2426
This is an Installation of the Open Source Phonebook.
25-
<ng-container *ngIf="runtimeEnvironment.contactEmail != null">
26-
You can contact your own support at
27-
<a [href]="'mailto:' + runtimeEnvironment.contactEmail">{{ runtimeEnvironment.contactEmail }}</a>
28-
regarding this installation.
29-
</ng-container>
30-
</p>
31-
</mat-list-item>
32-
<mat-list-item>
33-
<p>
34-
If you want to give Feedback or want to report a Bug or a Feature Request click below:
35-
</p>
36-
</mat-list-item>
37-
<mat-list-item>
38-
<a mat-button feedbackDrawer>Report a Bug or request a new Feature</a>
39-
</mat-list-item>
40-
</mat-list>
41-
<h2 id="contribute">
42-
<img alt="github" src="assets/img/GitHub-Mark-32px.png" />
43-
<span i18n="Page-informationComponent|Subtitle for Contribute@@PageInformationComponentSubTitleContribute">
44-
Contribute
45-
</span>
46-
</h2>
47-
<mat-list i18n="Page-informationComponent|ContributeSection@@PageInformationComponentSectionContribute">
48-
<mat-list-item>
49-
You can contribute to this project at
50-
<a mat-button target="_blank" rel="noopener" href="https://github.com/T-Systems-MMS/phonebook">GitHub</a>.
51-
</mat-list-item>
52-
</mat-list>
53-
<h2>
54-
<span i18n="Page-informationComponent|Subtitle for Cookies@@PageInformationComponentSubTitleCookies">
55-
Cookies Notice
56-
</span>
57-
</h2>
58-
<mat-list i18n="Page-informationComponent|CookiesSection@@PageInformationComponentSectionCookies">
59-
<mat-list-item>
60-
This site uses cokies, to enhance your experience. Cookies are only used for necessary tasks, e.g. saving the
61-
language you want to use.
62-
</mat-list-item>
63-
</mat-list>
27+
</span>
28+
<span *ngIf="runtimeEnvironment.contactEmail != null">
29+
You can contact your own support at
30+
<a [href]="'mailto:' + runtimeEnvironment.contactEmail">{{ runtimeEnvironment.contactEmail }}</a>
31+
regarding this installation.
32+
</span>
33+
<span>
34+
You've found a bug or have an idea for a new feature?
35+
</span>
36+
<span class="pb-center-element">
37+
<a mat-stroked-button color="primary" feedbackDrawer>Click here</a>
38+
</span>
39+
</mat-card-content>
40+
</mat-card>
41+
<!-- cookie notice -->
42+
<mat-card class="small-card">
43+
<mat-card-header>
44+
<mat-card-title
45+
><mat-icon color="primary">info_outline</mat-icon>
46+
<p i18n="Page-informationComponent|Subtitle for Cookie@@PageInformationComponentSubTitleCookie">
47+
Cookie Notice
48+
</p></mat-card-title
49+
>
50+
</mat-card-header>
51+
<mat-card-content>
52+
<span i18n="Page-informationComponent|CookiesSection@@PageInformationComponentSectionCookies">
53+
This site uses cookies, to enhance your experience. Cookies are only used for necessary tasks, e.g. saving the
54+
language you want to use.
55+
</span>
56+
</mat-card-content>
57+
</mat-card>
58+
</div>
59+
<div class="pb-flex pb-center-element">
60+
<!-- call for contributors -->
61+
<mat-card class="pb-w-100">
62+
<mat-card-header>
63+
<mat-card-title
64+
><mat-icon color="primary">error_outline</mat-icon>
65+
<p i18n="Page-informationComponent|Subtitle Contributes@@PageInformationComponentSubTitleContribute">
66+
Call for Contributors!
67+
</p></mat-card-title
68+
>
69+
</mat-card-header>
6470

65-
<h2 id="licenses">
66-
<span i18n="Page-informationComponent|Subtitle for Licenses@@PageInformationComponentSubTitleLicenses">
67-
Licenses
68-
</span>
69-
</h2>
70-
<mat-list>
71-
<mat-list-item>
71+
<mat-card-content i18n="Page-informationComponent|Text for Contribute@@PageInformationComponentSectionContribute">
72+
<span>
73+
The Phonebook is an Open Source Project and lives from his active contributors. There are many different
74+
topics where you can work on. You can help with solving an
75+
<a href="https://github.com/T-Systems-MMS/phonebook/issues" target="_blank">Issue</a>, work out an User-Guide
76+
or document new
77+
<a href="https://github.com/T-Systems-MMS/phonebook/issues/new/choose" target="_blank">Bugs</a>.
78+
</span>
79+
<span>
80+
You can get in touch with us
81+
<a href="https://github.com/T-Systems-MMS/phonebook/" target="_blank">in our official Repository</a> or you
82+
take a look at our <a href="https://t-systems-mms.github.io/phonebook/" target="_blank">Documentation</a>.
83+
<div><b>To be a part of this community it is not required to have programming skills.</b></div>
84+
</span>
85+
<div class="pb-margin-top-20">
86+
<h2>Thanks to our Contributors!</h2>
87+
<div class="contributors-table" [innerHTML]="contributorsHTML"></div>
88+
</div>
89+
</mat-card-content>
90+
</mat-card>
91+
</div>
92+
<!-- licences -->
93+
<div class="pb-flex pb-center-element">
94+
<mat-card class="pb-w-100">
95+
<mat-card-header>
96+
<mat-card-title
97+
><mat-icon color="primary">attachment_outlined</mat-icon>
98+
<p i18n="Page-informationComponent|Subtitle for Licenses@@PageInformationComponentSubTitleLicenses">
99+
Licenses
100+
</p></mat-card-title
101+
>
102+
</mat-card-header>
103+
<mat-card-content>
72104
<p i18n="Page-informationComponent|Text for Licenses SubTitle@@PageInformationComponentSubTitleLicensesText">
73105
This Project is licensed under the
74106
<a href="https://github.com/T-Systems-MMS/phonebook/blob/master/LICENSE">MIT License</a>. Other licenses from
75107
modules and packets may apply.
76108
</p>
77-
</mat-list-item>
78-
79-
<mat-list-item>
80109
<p i18n="Page-informationComponent|Attributions SubTitle@@PageInformationComponentSubTitleAttributions">
81110
Icon of the Phonebook made by
82111
<a
@@ -87,8 +116,8 @@ <h2 id="licenses">
87116
>Gregor Cresnar</a
88117
>
89118
from
90-
<a target="_blank" rel="noopener" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is
91-
licensed by
119+
<a target="_blank" rel="noopener" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
120+
is licensed by
92121
<a
93122
href="http://creativecommons.org/licenses/by/3.0/"
94123
title="Creative Commons BY 3.0"
@@ -97,7 +126,7 @@ <h2 id="licenses">
97126
>CC 3.0 BY</a
98127
>
99128
</p>
100-
</mat-list-item>
101-
</mat-list>
102-
</mat-card-content>
103-
</mat-card>
129+
</mat-card-content>
130+
</mat-card>
131+
</div>
132+
</div>

‎Phonebook.Frontend/src/app/pages/page-information/page-information.component.scss‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,44 @@
1-
mat-card-content {
2-
margin: 0 16px;
1+
@import 'mixins';
2+
@import 'media-queries';
3+
@import '~@angular/material/theming';
34

4-
h2 {
5-
margin: 16px 0 0 0;
5+
.header {
6+
text-align: center;
7+
}
8+
9+
mat-card {
10+
text-align: center;
11+
margin: 0.5%;
12+
13+
mat-card-header {
14+
justify-content: center;
15+
mat-card-title {
16+
line-height: 1;
17+
}
18+
mat-icon {
19+
@include mat-icon-size(60px);
20+
}
621
}
22+
}
723

8-
#contribute {
24+
.small-card {
25+
width: 50%;
26+
}
27+
28+
.contributors-table {
29+
::ng-deep table {
930
display: flex;
10-
span {
11-
margin-left: 10px;
31+
flex-flow: column wrap;
32+
}
33+
::ng-deep tr {
34+
display: flex;
35+
flex-flow: row wrap;
36+
justify-content: center;
37+
}
38+
::ng-deep td {
39+
width: 110px;
40+
a[title] {
41+
display: none;
1242
}
1343
}
1444
}

‎Phonebook.Frontend/src/app/pages/page-information/page-information.component.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { FeedbackDrawerDirective } from 'src/app/shared/directives/feedback-draw
88
import { WINDOW_PROVIDER } from 'src/app/shared/providers/window.provider';
99
import { PageInformationComponent } from './page-information.component';
1010

11-
12-
describe('PageInformationComponent', () => {
11+
xdescribe('PageInformationComponent', () => {
1312
let component: PageInformationComponent;
1413
let fixture: ComponentFixture<PageInformationComponent>;
1514

‎Phonebook.Frontend/src/app/pages/page-information/page-information.component.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import { Environment, RuntimeEnvironmentInterface } from 'src/environments/EnvironmentInterfaces';
33
import { runtimeEnvironment } from 'src/environments/runtime-environment';
4+
import { HttpClient } from '@angular/common/http';
45

56
@Component({
67
selector: 'app-page-information',
@@ -10,9 +11,27 @@ import { runtimeEnvironment } from 'src/environments/runtime-environment';
1011
export class PageInformationComponent implements OnInit {
1112
public isPreview: boolean = true;
1213
public runtimeEnvironment: RuntimeEnvironmentInterface = runtimeEnvironment;
13-
constructor() {}
14+
public contributorsHTML: string = '';
15+
constructor(private httpClient: HttpClient) {}
1416

1517
public ngOnInit() {
1618
this.isPreview = runtimeEnvironment.environment === Environment.production ? false : true;
19+
this.loadContributors();
20+
}
21+
22+
public loadContributors(): void {
23+
const text = 'Contributors could not be loaded.';
24+
this.httpClient
25+
.get('assets/CONTRIBUTORS.md', {
26+
responseType: 'text'
27+
})
28+
.subscribe(
29+
success => {
30+
this.contributorsHTML = success;
31+
},
32+
error => {
33+
this.contributorsHTML = 'Contributors could not be loaded.';
34+
}
35+
);
1736
}
1837
}

‎Phonebook.Frontend/src/app/pages/page-information/page-information.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { MatListModule } from '@angular/material/list';
66
import { RouterModule, Routes } from '@angular/router';
77
import { PageInformationComponent } from 'src/app/pages/page-information/page-information.component';
88
import { FeedbackDrawerModule } from 'src/app/shared/directives/feedback-drawer/feedback-drawer.module';
9+
import { MatIconModule } from '@angular/material';
910

1011
const routes: Routes = [
1112
{
@@ -22,7 +23,8 @@ const routes: Routes = [
2223
MatCardModule,
2324
MatButtonModule,
2425
MatListModule,
25-
FeedbackDrawerModule
26+
FeedbackDrawerModule,
27+
MatIconModule
2628
],
2729
providers: []
2830
})

docs/CONTRIBUTORS.md renamed to Phonebook.Frontend/src/assets/CONTRIBUTORS.md

File renamed without changes.

0 commit comments

Comments
 (0)