Skip to content

Commit 270114b

Browse files
benfeelybenfeely
committed
More style fixes for nav.
1 parent b4b20a7 commit 270114b

File tree

11 files changed

+105
-60
lines changed

11 files changed

+105
-60
lines changed

‎apps/docs/src/app/app-routing.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ const routes: Routes = [
1313
{ path: 'landing', redirectTo: '' },
1414
{ path: '', component: LandingComponent },
1515
{ path: 'performance', children: [
16+
{ path: '', redirectTo: 'angular', pathMatch: 'full' },
1617
{ path: 'angular', component: AngularPerfComponent },
1718
{ path: 'mixed', component: MixedPerfComponent },
1819
{ path: 'profiles', component: ProfilesComponent },
1920
] },
2021
{ path: 'components', children: [
22+
{ path: '', redirectTo: 'fabric', pathMatch: 'full' },
2123
{ path: 'fabric', component: FabricComponent },
2224
{ path: 'material', component: MaterialComponent },
2325
] },

‎apps/docs/src/app/app.component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,9 @@
44
height: 100%;
55
display: block;
66
box-sizing: border-box;
7-
border-top: $navPrimaryHeight + $navSecondaryHeight solid transparent;
7+
border-top: $navPrimaryHeight + $navSecondaryHeight + 2 solid transparent;
8+
9+
/deep/ > * {
10+
background: $snow;
11+
}
812
}

‎apps/docs/src/app/components/navbar/navbar.component.html‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,55 @@
1-
<nav>
2-
<mat-toolbar #primary class="primary">
1+
<nav mat-tab-nav-bar #primary class="primary">
32
<a mat-button routerLink=".">
43
<mat-icon>
54
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
65
<use xlink:href="#angular" />
76
</svg>
87
</mat-icon>
9-
<b>-</b>
8+
<b>~</b>
109
<mat-icon>
1110
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
1211
<use xlink:href="#react" />
1312
</svg>
1413
</mat-icon>
1514
</a>
16-
<a mat-button routerLink="performance">Performance</a>
17-
<a mat-button routerLink="components">Components</a>
18-
<a mat-button routerLink="docs">Docs</a>
15+
<a mat-tab-link routerLink="performance" routerLinkActive #rlaP1="routerLinkActive" [active]="rlaP1.isActive" [routerLinkActiveOptions]="{ exact: false }">
16+
Performance
17+
</a>
18+
<a mat-tab-link routerLink="components" routerLinkActive #rlaP2="routerLinkActive" [active]="rlaP2.isActive" [routerLinkActiveOptions]="{ exact: false }">Components</a>
19+
<a mat-tab-link routerLink="docs" routerLinkActive #rlaP3="routerLinkActive" [active]="rlaP3.isActive" [routerLinkActiveOptions]="{ exact: false }">Docs</a>
1920
<div class="spacer"></div>
2021
<a mat-button href="https://github.com/benfeely/angular-react">
2122
<mat-icon>
22-
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24"><title id="simpleicons-github-icon">GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
23+
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24">
24+
<title id="simpleicons-github-icon">GitHub icon</title>
25+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
26+
/>
27+
</svg>
2328
</mat-icon>
2429
</a>
25-
</mat-toolbar>
2630
</nav>
2731

2832
<nav mat-tab-nav-bar class="secondary" [class.collapse]="collapseSecondaryNav">
29-
<a mat-tab-link
30-
routerLink="performance/angular"
31-
routerLinkActive #rla1="routerLinkActive"
32-
[active]="rla1.isActive">
33-
<mat-icon>
34-
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
35-
<use xlink:href="#angular" />
36-
</svg>
37-
</mat-icon>
33+
<a mat-tab-link routerLink="performance/angular" routerLinkActive #rlaS1="routerLinkActive" [active]="rlaS1.isActive">
34+
<mat-icon>
35+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
36+
<use xlink:href="#angular" />
37+
</svg>
38+
</mat-icon>
3839
Angular
3940
</a>
40-
<a mat-tab-link
41-
routerLink="performance/mixed"
42-
routerLinkActive #rla2="routerLinkActive"
43-
[active]="rla2.isActive">
44-
<mat-icon class="stack">
45-
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
46-
<use xlink:href="#angular" />
47-
</svg>
48-
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
49-
<use xlink:href="#react" />
50-
</svg>
51-
</mat-icon>
41+
<a mat-tab-link routerLink="performance/mixed" routerLinkActive #rlaS2="routerLinkActive" [active]="rlaS2.isActive">
42+
<mat-icon class="stack">
43+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
44+
<use xlink:href="#angular" />
45+
</svg>
46+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
47+
<use xlink:href="#react" />
48+
</svg>
49+
</mat-icon>
5250
Mixed
5351
</a>
54-
<a mat-tab-link
55-
routerLink="performance/profiles"
56-
routerLinkActive #rla3="routerLinkActive"
57-
[active]="rla3.isActive">
52+
<a mat-tab-link routerLink="performance/profiles" routerLinkActive #rlaS3="routerLinkActive" [active]="rlaS3.isActive">
5853
<mat-icon>multiline_chart</mat-icon>
5954
Profiles
6055
</a>

‎apps/docs/src/app/components/navbar/navbar.component.scss‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,61 @@
66
top: 0;
77
left: 0;
88
right: 0;
9+
// box-sizing: border-box;
10+
border-top: $rubberbandScrollBuffer solid $oil;
11+
margin-top: 0 - $rubberbandScrollBuffer;
912

10-
mat-toolbar.primary {
11-
height: $navPrimaryHeight * 4;
12-
margin-top: 0 - $navPrimaryHeight * 3;
13-
padding-top: $navPrimaryHeight * 3;
14-
background: rgba(30, 30, 30, 0.94);
15-
color: #fff;
13+
nav.primary {
14+
background-color: $oil;
15+
color: $snow;
16+
17+
.mat-button {
18+
line-height: $navPrimaryHeight;
19+
}
20+
21+
/deep/ .mat-tab-links {
22+
display: flex;
23+
24+
.mat-ink-bar {
25+
background-color: $smoke;
26+
}
27+
28+
.mat-tab-link {
29+
color: $snow;
30+
31+
&.mat-tab-label-active {
32+
opacity: 1;
33+
}
34+
}
35+
}
1636
}
1737

1838
nav.secondary {
19-
background: rgba(240, 240, 240, 0.94);
39+
background: $smoke;
2040

2141
/deep/ .mat-tab-links {
2242
display: flex;
2343

44+
.mat-ink-bar {
45+
background-color: $oil;
46+
}
47+
2448
.mat-tab-link {
2549
height: $navSecondaryHeight;
2650
transition: height 500ms;
2751
display: flex;
2852
flex-direction: column;
2953
transition: height 500ms;
3054

55+
&.mat-tab-label-active {
56+
opacity: 1;
57+
}
58+
3159
mat-icon {
3260
font-size: $navSecondaryHeight - 24;
3361
height: $navSecondaryHeight - 24;
3462
width: $navSecondaryHeight - 24;
63+
opacity: 1;
3564
transition: 500ms;
3665

3766
svg {
@@ -65,12 +94,13 @@
6594
&.collapse {
6695

6796
.mat-tab-link {
68-
height: 48px;
97+
height: $navSecondaryHeightCollapsed;
6998

7099
mat-icon {
71-
font-size: 24px;
72-
height: 24px;
73-
width: 24px;
100+
font-size: 1px;
101+
height: 1px;
102+
width: 1px;
103+
opacity: 0;
74104

75105
svg {
76106
margin: 0;
@@ -81,13 +111,13 @@
81111
svg {
82112

83113
&:first-child {
84-
margin: -40%;
85-
height: 80%;
114+
margin: -30%;
115+
height: 70%;
86116
}
87117

88118
&:last-child {
89-
margin: 20%;
90-
height: 50%;
119+
margin: 18%;
120+
height: 55%;
91121
}
92122
}
93123
}

‎apps/docs/src/app/components/triangle/triangle.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ export class TriangleComponent implements OnInit {
3535
if (!this.triangleSize) {
3636
// Calculate size based on this element's size.
3737
this.triangleSize = Math.min(this.el.nativeElement.parentNode.offsetHeight * 1.3, this.el.nativeElement.parentNode.offsetWidth * 0.7);
38-
console.log('triangleSize:', this.el.nativeElement.parentNode);
3938
}
4039
this.dots = (new SierpinskiTriangle({x: 0, y: 0, size: this.triangleSize}, this.dotSize)).getDots();
4140
this.begin();

‎apps/docs/src/app/containers/angular-perf/angular-perf.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:host {
22
display: block;
3-
flex-grow: 1;
3+
height: 100%;
44
display: flex;
55
flex-direction: column;
66

‎apps/docs/src/app/containers/fabric/fabric.component.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:host {
2+
display: block;
23

34
fabric-button {
45
margin-right: 20px;
@@ -16,7 +17,3 @@
1617
}
1718
}
1819
}
19-
:host {
20-
display: block;
21-
22-
}

‎apps/docs/src/app/containers/mixed-perf/mixed-perf.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:host {
22
display: block;
3-
flex-grow: 1;
3+
height: 100%;
44
display: flex;
55
flex-direction: column;
66

‎apps/docs/src/app/containers/profiles/profiles.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host {
2+
display: block;
3+
4+
}

‎apps/docs/src/app/styles/variables.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
$navPrimaryHeight: 44px;
2-
$navSecondaryHeight: $navPrimaryHeight * 3;
3-
$navSecondaryHeightCollapsed: $navPrimaryHeight * 2;
1+
$navPrimaryHeight: 48px;
2+
$navSecondaryHeight: $navPrimaryHeight * 2;
3+
$navSecondaryHeightCollapsed: $navPrimaryHeight * 0.75;
4+
5+
$rubberbandScrollBuffer: 200px;
6+
$oil: rgba(30, 30, 30, 0.94);
7+
$smoke: rgba(240, 240, 240, 0.94);
8+
$snow: #fff;

0 commit comments

Comments
 (0)