Skip to content

Commit a2486de

Browse files
andream16andream16
committed
.
1 parent 9424d91 commit a2486de

File tree

11 files changed

+162
-2
lines changed

11 files changed

+162
-2
lines changed

‎.gitignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,3 @@ testem.log
4040
# System Files
4141
.DS_Store
4242
Thumbs.db
43-
44-
/src/**/*.html

‎src/app/app.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
<router-outlet></router-outlet>

‎src/app/pages/home/homepage.component.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<div class="app-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
3+
<app-chart></app-chart>
4+
</div>
5+
<div class="middle-container mdl-cell mdl-cell--12-col mdl-grid">
6+
<app-graph> </app-graph>
7+
<div class="app-cards mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
8+
<app-green-card> </app-green-card>
9+
<app-purple-card></app-purple-card>
10+
</div>
11+
</div>

‎src/app/pages/pages.component.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
<mdl-layout class="app-layout" mdl-layout-fixed-header="mdl-layout-fixed-header" mdl-layout-fixed-drawer="mdl-layout-fixed-drawer">
3+
<mdl-layout-header class="app-header mdl-color--grey-100 mdl-color-text--grey-600">
4+
<app-nav-bar></app-nav-bar>
5+
</mdl-layout-header>
6+
<mdl-layout-drawer class="app-drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
7+
<app-side-bar></app-side-bar>
8+
</mdl-layout-drawer>
9+
<mdl-layout-content class="mdl-color--grey-100">
10+
<div class="mdl-grid app-content">
11+
<app-home></app-home>
12+
</div>
13+
</mdl-layout-content>
14+
</mdl-layout>

‎src/app/shared/components/main/chart/chart.component.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
<svg class="app-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop" *ngFor="let currSvg of svgs" fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1">
3+
<use xlink:href="#piechart" mask="url(#piemask)"></use>
4+
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">{{ currSvg.amount }}
5+
<tspan font-size="0.2" dy="-0.07">{{ currSvg.percentage }}</tspan>
6+
</text>
7+
</svg>
8+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
9+
<defs>
10+
<mask id="piemask" maskContentUnits="objectBoundingBox">
11+
<circle cx="0.5" cy="0.5" r="0.49" fill="white"></circle>
12+
<circle cx="0.5" cy="0.5" r="0.40" fill="black"></circle>
13+
</mask>
14+
<g id="piechart">
15+
<circle cx="0.5" cy="0.5" r="0.5"></circle>
16+
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)"></path>
17+
</g>
18+
</defs>
19+
</svg>

‎src/app/shared/components/main/graph/graph.component.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
<div class="app-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col mdl-cell--12-col-tablet">
3+
<svg class="app-graph" fill="currentColor" viewBox="0 0 500 250">
4+
<use xlink:href="#chart"></use>
5+
</svg>
6+
<svg class="app-graph" fill="currentColor" viewBox="0 0 500 250">
7+
<use xlink:href="#chart"></use>
8+
</svg>
9+
</div>
10+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;">
11+
<defs>
12+
<g id="chart">
13+
<g id="GridLines">
14+
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3"></line>
15+
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7"></line>
16+
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3"></line>
17+
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7"></line>
18+
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3"></line>
19+
</g>
20+
<g id="Numbers">
21+
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
22+
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
23+
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
24+
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
25+
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
26+
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
27+
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
28+
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
29+
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
30+
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
31+
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
32+
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
33+
</g>
34+
<g id="Layer_5">
35+
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5 294.5,80.5 380,165.2 437,75.5 469.5,223.3"></polygon>
36+
</g>
37+
<g id="Layer_4">
38+
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7 296.7,128 380.7,184.3 436.7,125"> </polygon>
39+
</g>
40+
</g>
41+
</defs>
42+
</svg>

‎src/app/shared/components/main/green-card/green-card.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
<mdl-card class="app-updates mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" mdl-shadow="2">
3+
<mdl-card-title class="mdl-card--expand mdl-color--teal-300">
4+
<h2 mdl-card-title-text="mdl-card-title-text">Updates</h2>
5+
</mdl-card-title>
6+
<mdl-card-supporting-text class="mdl-color-text--grey-600">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</mdl-card-supporting-text>
7+
<mdl-card-actions class="mdl-card--border">
8+
<button mdl-button="mdl-button" mdl-ripple="mdl-ripple" href="#">Read More</button>
9+
</mdl-card-actions>
10+
</mdl-card>

‎src/app/shared/components/main/purple-card/purple-card.component.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
<mdl-card class="app-options mdl-color--deep-purple-500 mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" mdl-shadow="2">
3+
<mdl-card-supporting-text class="mdl-color-text--blue-grey-50">
4+
<mdl-card-title class="title">View options</mdl-card-title>
5+
<mdl-list>
6+
<mdl-list-item *ngFor="let option of options">
7+
<mdl-list-item-text-body>
8+
<mdl-checkbox [mdl-ripple]="true">{{ option.title }} </mdl-checkbox>
9+
</mdl-list-item-text-body>
10+
</mdl-list-item>
11+
</mdl-list>
12+
</mdl-card-supporting-text>
13+
<mdl-card-actions class="mdl-card--border">
14+
<button class="mdl-color-text--blue-grey-50" mdl-button="mdl-button" mdl-ripple="mdl-ripple" href="#">Change location</button>
15+
<mdl-layout-spacer></mdl-layout-spacer>
16+
<button class="location-btn" mdl-button="mdl-button" mdl-button-type="icon">Change location
17+
<mdl-icon>location_on</mdl-icon>
18+
</button>
19+
</mdl-card-actions>
20+
</mdl-card>

‎src/app/shared/components/navbar/nav-bar.component.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
<mdl-layout-header-row>
3+
<mdl-layout-title>Home</mdl-layout-title>
4+
<mdl-layout-spacer></mdl-layout-spacer>
5+
<mdl-textfield type="text" [(ngModel)]="text6" icon="search"></mdl-textfield>
6+
<button mdl-button="mdl-button" #navbarmenubtn="mdlButton" (click)="navbarmenu.toggle($event, navbarmenubtn)" mdl-button-type="icon" mdl-ripple="mdl-ripple">
7+
<mdl-icon>more_vert</mdl-icon>
8+
</button>
9+
<mdl-menu #navbarmenu="mdlMenu" mdl-menu-position="bottom-right">
10+
<mdl-menu-item *ngFor="let entry of moreBtnEntries" mdl-ripple="mdl-ripple">{{ entry.title }}</mdl-menu-item>
11+
</mdl-menu>
12+
</mdl-layout-header-row>

‎src/app/shared/components/sidebar/side-bar.component.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
<header class="app-drawer-header"><img class="app-avatar" src="https://getmdl.io/templates/dashboard/images/user.jpg"/>
3+
<div class="app-avatar-dropdown"><span>hello@example.com</span>
4+
<mdl-layout-spacer></mdl-layout-spacer>
5+
<button mdl-button="mdl-button" #arrowmenusidebarbtn="mdlButton" (click)="sidebararrowmenu.toggle($event, arrowmenusidebarbtn)" mdl-button-type="icon" mdl-ripple="mdl-ripple">
6+
<mdl-icon>arrow_drop_down</mdl-icon><span class="visuallyhidden">Accounts</span>
7+
</button>
8+
<mdl-menu class="menu-container" #sidebararrowmenu="mdlMenu" mdl-menu-position="bottom-right">
9+
<mdl-menu-item class="menu-item" *ngFor="let entry of profileDropdown" mdl-ripple="mdl-ripple"><i class="mdl-color-text--blue-grey-200 material-icons dropdown-img" role="presentation">{{ entry.image }} </i>{{ entry.title }} </mdl-menu-item>
10+
</mdl-menu>
11+
</div>
12+
</header>
13+
<nav class="app-navigation mdl-navigation mdl-layout-spacer mdl-color--blue-grey-800">
14+
<div *ngFor="let navigationLink of navigationLinks, let last = last"><a class="mdl-navigation__link" *ngIf="!last" href="#"><i class="mdl-color-text--blue-grey-200 material-icons" role="presentation">{{ navigationLink.image }} </i>{{ navigationLink.title }}</a></div>
15+
<mdl-layout-spacer></mdl-layout-spacer><a class="mdl-navigation__link" href="#"><i class="mdl-color-text--blue-grey-200 material-icons" role="presentation">{{ navigationLinks[navigationLinks.length - 1].image }} </i>{{ navigationLinks[navigationLinks.length - 1].title }}</a>
16+
</nav>

0 commit comments

Comments
 (0)