From 3f745fe93af36bb42c5a352471bc91f761d075e2 Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Fri, 1 Jun 2018 13:58:54 -0400 Subject: [PATCH] Initial commit --- package-lock.json | 21 ++++++++++++ package.json | 5 ++- src/app/app-material.module.ts | 32 +++++++++++++++++++ src/app/app.component.css | 37 ++++++++++++++++++++++ src/app/app.component.html | 58 +++++++++++++++++++++++----------- src/app/app.module.ts | 6 +++- src/index.html | 1 + src/main.ts | 1 + src/styles.css | 9 ++++++ 9 files changed, 150 insertions(+), 20 deletions(-) create mode 100644 src/app/app-material.module.ts diff --git a/package-lock.json b/package-lock.json index 8c31be1..68f52dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -115,6 +115,14 @@ "tslib": "1.9.1" } }, + "@angular/cdk": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.0.tgz", + "integrity": "sha512-K5GMMxsIJOETwX9lE9rDz/Fg7EiacZnJP3/nN1cElZ9fmf1eKna/gxICMpKL3uy/VDik8DvH98J8DUKgj6CoNA==", + "requires": { + "tslib": "1.9.1" + } + }, "@angular/cli": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.5.tgz", @@ -343,6 +351,14 @@ "integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==", "dev": true }, + "@angular/material": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.0.tgz", + "integrity": "sha512-4vC2Ycrf1ORP6iGIy9qExVpbjqHJ/ObEQd72pVDQyK127O8cxhGhEiX8QvxdeAGREVxqwfhUGEK/vjH3o110fQ==", + "requires": { + "tslib": "1.9.1" + } + }, "@angular/platform-browser": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz", @@ -4305,6 +4321,11 @@ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", diff --git a/package.json b/package.json index 1104b10..7ad5702 100644 --- a/package.json +++ b/package.json @@ -11,16 +11,19 @@ }, "private": true, "dependencies": { - "@angular/animations": "^6.0.0", + "@angular/animations": "^6.0.3", + "@angular/cdk": "^6.2.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", + "@angular/material": "^6.2.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "core-js": "^2.5.4", + "hammerjs": "^2.0.8", "rxjs": "^6.0.0", "zone.js": "^0.8.26" }, diff --git a/src/app/app-material.module.ts b/src/app/app-material.module.ts new file mode 100644 index 0000000..a63f6c9 --- /dev/null +++ b/src/app/app-material.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatTableModule } from '@angular/material/table'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatTabsModule } from '@angular/material/tabs'; + +@NgModule({ + imports: [ + CommonModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatCardModule, + MatTableModule, + MatFormFieldModule + ], + exports: [ + MatToolbarModule, + MatFormFieldModule, + MatTableModule, + MatIconModule, + MatButtonModule, + MatTabsModule, + MatCardModule + ] +}) +export class AppMaterialModule { } diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..730f1c8 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,37 @@ +.logo { + font-style: oblique; + letter-spacing: 1px; +} + +nav { + margin-left: 26px; +} + +.nav_header { + list-style-type: none; + overflow: hidden; + /* padding: 0; */ +} + +.nav_header li { + float: left; +} + +li a { + display: block; + padding: 8px 14px; + color: white; + text-decoration: none; +} + +li a:hover { + background: #424242; +} +.demo-tab-content { + color: white; + padding: 16px; +} +.container { + margin: 2em auto; + width: 70%; +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..ea5f359 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,42 @@ -
-

- Welcome to {{ title }}! -

- Angular Logo + + + + + + +
+ + + +
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen + book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially + unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, + and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
+ + +
+ Content 2 +
+ + +
-

Here are some links to help you start:

- - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..311c9aa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { AppMaterialModule } from './app-material.module'; import { AppComponent } from './app.component'; @@ -8,7 +10,9 @@ import { AppComponent } from './app.component'; AppComponent ], imports: [ - BrowserModule + BrowserModule, + BrowserAnimationsModule, + AppMaterialModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/index.html b/src/index.html index e7887ee..8cfbcd0 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,7 @@ + diff --git a/src/main.ts b/src/main.ts index 91ec6da..9c74aef 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; +import 'hammerjs'; if (environment.production) { enableProdMode(); diff --git a/src/styles.css b/src/styles.css index 90d4ee0..2289ffb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,10 @@ /* You can add global styles to this file, and also import other style files */ + +@import "~@angular/material/prebuilt-themes/pink-bluegrey.css"; +* { + margin: 0; +} +body { + background: #212121; + box-sizing: border-box; +} \ No newline at end of file