Skip to content

Commit 9b751b3

Browse files
tomastrajantomastrajan
committed
feat(home): add content
1 parent 2223d50 commit 9b751b3

File tree

12 files changed

+140
-30
lines changed

12 files changed

+140
-30
lines changed

‎projects/elements-demo/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
[hasBackdrop]="isSmallScreen | async"
77
(backdropClick)="onBackdropClick()"
88
>
9-
<mat-sidenav mode="push" [opened]="navOpened | async" disableClose>
9+
<mat-sidenav mode="side" [opened]="navOpened | async" disableClose>
1010
<demo-navigation></demo-navigation>
1111
</mat-sidenav>
1212
<mat-sidenav-content>

‎projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
mat-nav-list {
2-
padding-top: 0;
3-
}
4-
5-
a[mat-list-item] {
6-
width: 250px;
7-
8-
&.sub-nav {
9-
width: auto;
10-
padding-left: 33px !important;
11-
font-size: 1em !important;
12-
}
13-
}
1+
mat-nav-list {
2+
padding-top: 0;
3+
}
4+
5+
a[mat-list-item] {
6+
width: 250px;
7+
8+
&.sub-nav {
9+
width: auto;
10+
padding-left: 32px !important;
11+
font-size: 1em !important;
12+
}
13+
}

‎projects/elements-demo/src/app/features/docs/docs.component.css‎ renamed to ‎projects/elements-demo/src/app/features/docs/docs.component.scss‎

File renamed without changes.

‎projects/elements-demo/src/app/features/docs/docs.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
33
@Component({
44
selector: 'demo-docs',
55
templateUrl: './docs.component.html',
6-
styleUrls: ['./docs.component.css']
6+
styleUrls: ['./docs.component.scss']
77
})
88
export class DocsComponent implements OnInit {
99
constructor() {}

‎projects/elements-demo/src/app/features/home/home.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { NgModule } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
2+
3+
import { SharedModule } from '../../shared/shared.module';
34

45
import { HomeComponent } from './home/home.component';
56

67
@NgModule({
78
declarations: [HomeComponent],
8-
imports: [CommonModule],
9+
imports: [SharedModule],
910
exports: [HomeComponent]
1011
})
1112
export class HomeModule {}

‎projects/elements-demo/src/app/features/home/home/home.component.html‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
<p>home works!</p>
1+
<div class="intro">
2+
<mat-icon
3+
inline
4+
svgIcon="logo"
5+
aria-hidden="false"
6+
aria-label="@angular-extensions/elements"
7+
></mat-icon>
8+
<h1>ANGULAR EXTENSIONS ELEMENTS</h1>
9+
<h3>
10+
The easiest way to lazy-load Angular Elements or any other web components in
11+
your Angular application!
12+
</h3>
13+
</div>
14+
15+
<h2>Get started</h2>
16+
<ol>
17+
<li>Install <code>npm i @angular-extension/elements</code></li>
18+
<li>
19+
Add
20+
<code
21+
>import &#123; LazyElementsModule } from
22+
'@angular-extension/elements';</code
23+
>
24+
</li>
25+
<li>
26+
And append <code>LazyElementsModule</code> to the
27+
<code>imports: []</code> of your <code>AppModule</code>
28+
</li>
29+
<li>
30+
Use <code>*axLazyElement</code> directive on an element you wish to load
31+
</li>
32+
</ol>

‎projects/elements-demo/src/app/features/home/home/home.component.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:host {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
padding: 40px;
6+
7+
.intro {
8+
text-align: center;
9+
10+
&:before {
11+
font-family: Lato;
12+
z-index: -1;
13+
content: '';
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
height: 500px;
19+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23e53531' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23cf2525' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d7313e' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23a91d28' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c92541' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b1203a' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23c6214e' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23981638' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23a01547' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a0113d' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23b70e4f' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23890c46' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
20+
background-position: top center;
21+
background-repeat: no-repeat;
22+
background-size: 1600px 500px;
23+
transform: rotate(180deg);
24+
overflow: hidden;
25+
}
26+
27+
h1 {
28+
font-size: 3em;
29+
line-height: 1.1em;
30+
font-weight: bold;
31+
}
32+
33+
h3 {
34+
font-size: 2em;
35+
line-height: 1.3em;
36+
opacity: 0.5;
37+
text-transform: uppercase;
38+
padding: 20px 50px;
39+
}
40+
41+
mat-icon {
42+
height: 160px;
43+
margin: 0 0 25px 0;
44+
}
45+
}
46+
}

‎projects/elements-demo/src/app/features/home/home/home.component.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { HttpClientTestingModule } from '@angular/common/http/testing';
3+
4+
import { SharedModule } from '../../../shared/shared.module';
25

36
import { HomeComponent } from './home.component';
47

@@ -8,6 +11,7 @@ describe('HomeComponent', () => {
811

912
beforeEach(async(() => {
1013
TestBed.configureTestingModule({
14+
imports: [HttpClientTestingModule, SharedModule],
1115
declarations: [HomeComponent]
1216
}).compileComponents();
1317
}));

‎projects/elements-demo/src/styles-reset.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
outline: 0;
5+
}
6+
7+
html,
8+
body {
9+
height: 100%;
10+
}
11+
12+
ul,
13+
ol {
14+
list-style-position: inside;
15+
line-height: 2em;
16+
}
17+
18+
code {
19+
white-space: nowrap;
20+
border-radius: 10px;
21+
padding: 0 8px 1px 8px;
22+
}

‎projects/elements-demo/src/styles-reset.scss-theme.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import '~@angular/material/theming';
2+
3+
@mixin styles-reset-theme($theme) {
4+
$primary: map-get($theme, primary);
5+
$accent: map-get($theme, accent);
6+
$warn: map-get($theme, warn);
7+
$foreground: map-get($theme, foreground);
8+
$background: map-get($theme, background);
9+
10+
code {
11+
color: mat-color($accent, lighter-contrast);
12+
background-color: mat-color($accent, lighter);
13+
}
14+
}

0 commit comments

Comments
 (0)