diff --git a/src/client/app/components/app.component.html b/src/client/app/components/app.component.html
index 95a011d127021f3830bc9e5a132f9817df86fc8f..3be3b054cfbd286a508f09333ade13b7f2450ce1 100755
--- a/src/client/app/components/app.component.html
+++ b/src/client/app/components/app.component.html
@@ -1,5 +1,3 @@
-<div platform>
- <sd-toolbar></sd-toolbar>
- <sd-navbar></sd-navbar>
- <router-outlet></router-outlet>
-</div>
+<sd-toolbar></sd-toolbar>
+<sd-navbar></sd-navbar>
+<router-outlet></router-outlet>
diff --git a/src/client/app/components/home/home.component.html b/src/client/app/components/home/home.component.html
index 1e66db2dd82e1b6c1996323ee906c66ce97fa832..cc948bebc6f998cdd742fe25579f152d529b5c5b 100755
--- a/src/client/app/components/home/home.component.html
+++ b/src/client/app/components/home/home.component.html
@@ -1,23 +1,32 @@
-<h2>
- {{ 'LOVE_TECH' | translate }} <div class="smile"></div>
-</h2>
+<div class="home-card-container">
+ <md-card>
+ <md-card-title>{{ 'LOVE_TECH' | translate }}</md-card-title>
+ <md-card-content>
+ <p>
+ {{'ABOUT_REWARD' | translate}}
+ </p>
+ <p>
+ {{'ABOUT_ADD' | translate}}
+ </p>
-<p>
- {{'ABOUT_REWARD' | translate}}
-</p>
-<p>
- {{'ABOUT_ADD' | translate}}
-</p>
+ <form (submit)="addName()" class="home-form">
+ <div>
+ <md-input [(ngModel)]="newName" name="newName" class="home-input" [placeholder]="'INPUT_HINT' | translate" ngDefaultControl></md-input>
+ <button md-raised-button color="primary" type="submit" class="home-button">{{'ADD_BTN_TEXT' | translate}}</button>
+ </div>
+ </form>
-<form (submit)="addName()">
- <input [(ngModel)]="newName" name="newName" [placeholder]="'INPUT_HINT' | translate">
- <button type="submit">{{'ADD_BTN_TEXT' | translate}}</button>
-</form>
+ <md-list class="home-list">
+ <md-list-item *ngFor="let name of (nameListService.names | async)">
+ <h3 md-line>{{name}}</h3>
+ <p md-line class="demo-secondary-text">secondary text</p>
+ </md-list-item>
+ </md-list>
-<ul>
- <li *ngFor="let name of (nameListService.names | async)">{{name}}</li>
-</ul>
+ <p>
+ <a class="link" (click)="readAbout()">About - RouterExtensions example</a>
+ </p>
-<p>
- <a class="link" (click)="readAbout()">About - RouterExtensions example</a>
-</p>
+ </md-card-content>
+ </md-card>
+</div>
diff --git a/src/client/app/components/home/home.component.scss b/src/client/app/components/home/home.component.scss
index d8addab91c8a37f5b3036b839fb10c25c321afbc..78203250ceb5dbe3e44571ba4026cb0f50655907 100755
--- a/src/client/app/components/home/home.component.scss
+++ b/src/client/app/components/home/home.component.scss
@@ -3,32 +3,26 @@
padding: 0 16px;
}
-input {
- width: 250px;
+.home-card-container {
+ padding-top: 20px;
+ padding-left: 20px;
}
-ul {
- list-style-type: none;
- padding: 0 0 0 8px;
+.home-card {
+ font-size: 14px;
+ width: 400px;
}
-.smile {
- background: url("./assets/svg/smile.svg");
- height: 48px;
- width: 48px;
- display: inline-block;
- transform: scale(0.6);
- margin-top: -25px;
- position: relative;
- top: 16px;
+.home-form {
+ padding: 20px;
}
-a.link {
- color: #00e;
- cursor: pointer;
- text-decoration: underline;
+.home-input {
+ font-size: 14px;
+ width: 250px;
}
-a.link:hover {
- color: #f00;
+.home-button {
+ font-size: 16px;
+ margin: 10px;
}
diff --git a/src/client/app/components/home/home.module.ts b/src/client/app/components/home/home.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..972880cb6e4f31c6464705c39b0d1b140bec8ca9
--- /dev/null
+++ b/src/client/app/components/home/home.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HomeComponent } from './home.component';
+import {NameListService} from "../../frameworks/sample/services/name-list.service";
+import {MdListModule} from '@angular2-material/list';
+import { MdCardModule } from '@angular2-material/card';
+import {MdInputModule} from '@angular2-material/input';
+import {MultilingualModule} from "../../frameworks/i18n/multilingual.module";
+
+@NgModule({
+ imports: [
+ CommonModule,
+ MdCardModule,
+ MdListModule,
+ MultilingualModule,
+ FormsModule,
+ MdInputModule
+ ],
+ declarations: [HomeComponent],
+ exports: [HomeComponent],
+ providers: [NameListService]
+})
+export class HomeModule { }
diff --git a/src/client/web.module.ts b/src/client/web.module.ts
index 180b4edd98c2bb869b6c55010a60af6fc41584fe..0381d9334bb8fbbf077e696a77b250bdab0f7f67 100644
--- a/src/client/web.module.ts
+++ b/src/client/web.module.ts
@@ -6,9 +6,9 @@ import { RouterModule } from '@angular/router';
// app
import { AppComponent } from './app/components/app.component';
-import { HomeComponent } from './app/components/home/home.component';
-import { AboutComponent } from './app/components/about/about.component';
import { routes } from './app/components/app.routes';
+import { AboutModule } from './app/components/about/about.module';
+import { HomeModule } from "./app/components/home/home.module";
// feature modules
import { CoreModule } from './app/frameworks/core/core.module';
@@ -16,8 +16,6 @@ import { AnalyticsModule } from './app/frameworks/analytics/analytics.module';
import { MultilingualModule } from './app/frameworks/i18n/multilingual.module';
import { SampleModule } from './app/frameworks/sample/sample.module';
-import { AboutModule } from './app/components/about/about.module';
-
// config
import { Config, WindowService, ConsoleService } from './app/frameworks/core/index';
Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
@@ -26,6 +24,7 @@ Config.DEBUG.LEVEL_4 = true;
// sample config (extra)
import { AppConfig } from './app/frameworks/sample/services/app-config';
import { MultilingualService } from './app/frameworks/i18n/services/multilingual.service';
+
// custom i18n language support
MultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;
@@ -48,11 +47,11 @@ if (String('<%= TARGET_DESKTOP %>') === 'true') {
AnalyticsModule,
MultilingualModule,
SampleModule,
- AboutModule
+ AboutModule,
+ HomeModule
],
declarations: [
- AppComponent,
- HomeComponent
+ AppComponent
],
providers: [
{