Skip to content

Commit 1fa729d

Browse files
FawzyMokhtarFawzyMokhtar
committed
Add layout
Split layout into components Add layout styling
1 parent 3981d7b commit 1fa729d

33 files changed

Lines changed: 499 additions & 216 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"@angular/forms": "~8.2.0",
2121
"@angular/platform-browser": "~8.2.0",
2222
"@angular/platform-browser-dynamic": "~8.2.0",
23-
"@angular/router": "~8.2.0",
23+
"@angular/router": "^8.2.0",
2424
"bootstrap": "^4.3.1",
2525
"rxjs": "~6.4.0",
2626
"tslib": "^1.10.0",

‎src/app/main/components/footer/footer.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
<div class="col-12 footer-links">
33
<nav class="navbar">
44
<div class="nav-item">
5-
<a class="nav-link section-title">Docs</a>
5+
<span class="nav-link section-title">Docs</span>
66
<a routerLink="/" class="nav-link">Getting Started</a>
77
</div>
88
<div class="nav-item">
9-
<a class="nav-link section-title">Community</a>
9+
<span class="nav-link section-title">Community</span>
1010
<a routerLink="/" class="nav-link">Stack Overflow</a>
1111
</div>
1212
<div class="nav-item">
13-
<a class="nav-link section-title">More</a>
13+
<span class="nav-link section-title">More</span>
1414
<a routerLink="/" class="nav-link">GitHub</a>
1515
</div>
1616
</nav>
1717
</div>
1818
<div class="col-12 footer-copy-right">
19-
Copyright &copy; 2019 DotNet Validator
19+
Copyright &copy; {{year}} DotNet Validator
2020
</div>
2121
</div>

‎src/app/main/components/footer/footer.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ import { Component, OnInit } from "@angular/core";
66
styleUrls: ["./footer.component.sass"]
77
})
88
export class FooterComponent {
9+
10+
year: number = new Date().getFullYear();
911
}

‎src/app/main/components/navigator/navigator.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="doc-prev-next">
2-
<a class="doc-prev" routerLink="/">
2+
<a class="doc-prev button" routerLink="/">
33
<span>← </span>
44
<span>Previous</span>
55
</a>
6-
<a class="doc-next" routerLink="/">
6+
<a class="doc-next button" routerLink="/">
77
<span>Next</span>
88
<span> →</span>
99
</a>

‎src/app/main/components/post/post.component.html‎

Lines changed: 86 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,171 @@
11
<div class="post">
22
<header class="post-header">
33
<h1 class="post-header-text">Section 1</h1>
4-
<a class="btn btn-outline-primary edit-button">Edit</a>
4+
<a class="edit-button button" routerLink="/">Edit</a>
55
</header>
66
<article>
7+
<h1 id="section1">Section 1 anchor.......</h1>
8+
<br>
79
Some documentation.......
10+
<br>
811
Some documentation.......
12+
<br>
913
Some documentation.......
14+
<br>
1015
Some documentation.......
16+
<br>
1117
Some documentation.......
18+
<br>
1219
Some documentation.......
20+
<br>
1321
Some documentation.......
22+
<br>
1423
Some documentation.......
24+
<br>
1525
Some documentation.......
26+
<br>
1627
Some documentation.......
28+
<br>
1729
Some documentation.......
30+
<br>
1831
Some documentation.......
32+
<br>
1933
Some documentation.......
34+
<br>
2035
Some documentation.......
36+
<br>
2137
Some documentation.......
38+
<br>
2239
Some documentation.......
40+
<br>
2341
Some documentation.......
42+
<br>
2443
Some documentation.......
44+
<br>
2545
Some documentation.......
46+
<br>
2647
Some documentation.......
48+
<br>
2749
Some documentation.......
50+
<br>
2851
Some documentation.......
52+
<br>
2953
Some documentation.......
54+
<br>
3055
Some documentation.......
56+
<br>
3157
Some documentation.......
58+
<br>
3259
Some documentation.......
60+
<br>
61+
<h1 id="section2">Section 2 anchor.......</h1>
62+
Section 2 anchor.......
63+
<br>
3364
Some documentation.......
65+
<br>
3466
Some documentation.......
67+
<br>
3568
Some documentation.......
69+
<br>
3670
Some documentation.......
71+
<br>
3772
Some documentation.......
73+
<br>
3874
Some documentation.......
75+
<br>
3976
Some documentation.......
77+
<br>
4078
Some documentation.......
79+
<br>
4180
Some documentation.......
81+
<br>
4282
Some documentation.......
83+
<br>
4384
Some documentation.......
85+
<br>
4486
Some documentation.......
87+
<br>
4588
Some documentation.......
89+
<br>
4690
Some documentation.......
91+
<br>
4792
Some documentation.......
93+
<br>
4894
Some documentation.......
95+
<br>
4996
Some documentation.......
97+
<br>
5098
Some documentation.......
99+
<br>
51100
Some documentation.......
101+
<br>
52102
Some documentation.......
103+
<br>
53104
Some documentation.......
105+
<br>
54106
Some documentation.......
107+
<br>
55108
Some documentation.......
109+
<br>
56110
Some documentation.......
111+
<br>
57112
Some documentation.......
113+
<br>
58114
Some documentation.......
115+
<br>
116+
<h1 id="section3">Section 3 anchor</h1>
117+
Section 3 anchor.......
118+
<br>
59119
Some documentation.......
120+
<br>
60121
Some documentation.......
122+
<br>
61123
Some documentation.......
124+
<br>
62125
Some documentation.......
126+
<br>
63127
Some documentation.......
128+
<br>
64129
Some documentation.......
130+
<br>
65131
Some documentation.......
132+
<br>
66133
Some documentation.......
134+
<br>
67135
Some documentation.......
136+
<br>
68137
Some documentation.......
138+
<br>
69139
Some documentation.......
140+
<br>
70141
Some documentation.......
142+
<br>
71143
Some documentation.......
144+
<br>
72145
Some documentation.......
146+
<br>
73147
Some documentation.......
148+
<br>
74149
Some documentation.......
150+
<br>
75151
Some documentation.......
152+
<br>
76153
Some documentation.......
154+
<br>
77155
Some documentation.......
156+
<br>
78157
Some documentation.......
158+
<br>
79159
Some documentation.......
160+
<br>
80161
Some documentation.......
162+
<br>
81163
Some documentation.......
164+
<br>
82165
Some documentation.......
166+
<br>
83167
Some documentation.......
84-
Some documentation.......
85-
Some documentation.......
86-
Some documentation.......
87-
Some documentation.......
88-
Some documentation.......
89-
Some documentation.......
90-
Some documentation.......
91-
Some documentation.......
92-
Some documentation.......
93-
Some documentation.......
94-
Some documentation.......
95-
Some documentation.......
96-
Some documentation.......
97-
Some documentation.......
98-
Some documentation.......
99-
Some documentation.......
100-
Some documentation.......
101-
Some documentation.......
102-
Some documentation.......
103-
Some documentation.......
104-
Some documentation.......
105-
Some documentation.......
106-
Some documentation.......
107-
Some documentation.......
108-
Some documentation.......
109-
Some documentation.......
110-
Some documentation.......
111-
Some documentation.......
112-
Some documentation.......
113-
Some documentation.......
114-
Some documentation.......
115-
Some documentation.......
116-
Some documentation.......
117-
Some documentation.......
118-
Some documentation.......
119-
Some documentation.......
120-
Some documentation.......
121-
Some documentation.......
122-
Some documentation.......
123-
Some documentation.......
124-
Some documentation.......
125-
Some documentation.......
168+
<br>
126169
Some documentation.......
127170
</article>
128171
</div>

‎src/app/main/components/section-nav/section-nav.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<div class="section-nav">
22
<nav class="navbar">
33
<div class="nav-item">
4-
<a routerLink="#" class="nav-link">Section 1.1</a>
5-
<a routerLink="#" class="nav-link">Section 1.2</a>
6-
<a routerLink="#" class="nav-link">Section 1.3</a>
4+
<a routerLink="/" [class.active]="(activeSection | async) === 'section1'" fragment="section1"
5+
class="nav-link" (click)="onSectionClick('section1')">Section 1.1</a>
6+
<a routerLink="/" [class.active]="(activeSection | async) === 'section2'" fragment="section2"
7+
class="nav-link" (click)="onSectionClick('section2')">Section 1.2</a>
8+
<a routerLink="/" [class.active]="(activeSection | async) === 'section3'" fragment="section3"
9+
class="nav-link" (click)="onSectionClick('section3')">Section 1.3</a>
710
</div>
811
</nav>
912
</div>

‎src/app/main/components/section-nav/section-nav.component.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import {Component} from "@angular/core";
2+
import {ActivatedRoute} from "@angular/router";
3+
import {share} from "rxjs/operators";
24

35
@Component({
46
selector: "app-section-nav",
57
templateUrl: "./section-nav.component.html",
68
styleUrls: ["./section-nav.component.sass"]
79
})
810
export class SectionNavComponent {
11+
12+
activeSection = this.route.fragment.pipe(share());
13+
constructor (public route: ActivatedRoute) {}
14+
15+
// Use this method to scroll manually to a given html element id
16+
onSectionClick(elementId) {
17+
const element = document.getElementById(elementId);
18+
element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
19+
}
920
}

‎src/app/main/components/side-nav/side-nav.component.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
11
<div class="side-nav">
22
<nav class="navbar">
33
<div class="nav-item">
4-
<span class="section-title">Section 1</span>
5-
<a class="nav-link" routerLink="/link1">Link 1</a>
6-
<a class="nav-link" routerLink="/link1">Link 2</a>
7-
<a class="nav-link" routerLink="/link1">Link 3</a>
4+
<h3 class="section-title">Section 1</h3>
5+
<a class="nav-link" routerLink="/" routerLinkActive="active">Link 1</a>
6+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
7+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
88
</div>
99
<div class="nav-item">
10-
<span class="section-title">Section 2</span>
11-
<a class="nav-link" routerLink="/link1">Link 1</a>
12-
<a class="nav-link" routerLink="/link1">Link 2</a>
13-
<a class="nav-link" routerLink="/link1">Link 3</a>
10+
<h3 class="section-title">Section 2</h3>
11+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
12+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
13+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
1414
</div>
1515
<div class="nav-item">
16-
<span class="section-title">Section 2</span>
17-
<a class="nav-link" routerLink="/link1">Link 1</a>
18-
<a class="nav-link" routerLink="/link1">Link 2</a>
19-
<a class="nav-link" routerLink="/link1">Link 3</a>
16+
<h3 class="section-title">Section 2</h3>
17+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
18+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
19+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
2020
</div>
2121
<div class="nav-item">
22-
<span class="section-title">Section 2</span>
23-
<a class="nav-link" routerLink="/link1">Link 1</a>
24-
<a class="nav-link" routerLink="/link1">Link 2</a>
25-
<a class="nav-link" routerLink="/link1">Link 3</a>
22+
<h3 class="section-title">Section 2</h3>
23+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
24+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
25+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
2626
</div>
2727
<div class="nav-item">
28-
<span class="section-title">Section 2</span>
29-
<a class="nav-link" routerLink="/link1">Link 1</a>
30-
<a class="nav-link" routerLink="/link1">Link 2</a>
31-
<a class="nav-link" routerLink="/link1">Link 3</a>
28+
<h3 class="section-title">Section 2</h3>
29+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
30+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
31+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
3232
</div>
3333
<div class="nav-item">
34-
<span class="section-title">Section 2</span>
35-
<a class="nav-link" routerLink="/link1">Link 1</a>
36-
<a class="nav-link" routerLink="/link1">Link 2</a>
37-
<a class="nav-link" routerLink="/link1">Link 3</a>
34+
<h3 class="section-title">Section 2</h3>
35+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
36+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
37+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
3838
</div>
3939
<div class="nav-item">
40-
<span class="section-title">Section 2</span>
41-
<a class="nav-link" routerLink="/link1">Link 1</a>
42-
<a class="nav-link" routerLink="/link1">Link 2</a>
43-
<a class="nav-link" routerLink="/link1">Link 3</a>
40+
<h3 class="section-title">Section 2</h3>
41+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
42+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
43+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
4444
</div>
4545
<div class="nav-item">
46-
<span class="section-title">Section 2</span>
47-
<a class="nav-link" routerLink="/link1">Link 1</a>
48-
<a class="nav-link" routerLink="/link1">Link 2</a>
49-
<a class="nav-link" routerLink="/link1">Link 3</a>
46+
<h3 class="section-title">Section 2</h3>
47+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 1</a>
48+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 2</a>
49+
<a class="nav-link" routerLink="/link1" routerLinkActive="active">Link 3</a>
5050
</div>
5151
</nav>
5252
</div>

0 commit comments

Comments
 (0)