fixed home page

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AboutPage } from '../pages/about/about';
 import { ContactPage } from '../pages/contact/contact';
@@ -10,6 +11,7 @@ import { TopicPage } from '../pages/topic/topic';
 import { CreateTopicPage } from '../pages/create-topic/create-topic';
 import { CreateAccountPage } from '../pages/create-account/create-account';
 import { InboxPage } from '../pages/inbox/inbox';
+import { ForumPage } from '../pages/forum/forum';
 import { TabsPage } from '../pages/tabs/tabs';
 
 import { StatusBar } from '@ionic-native/status-bar';
@@ -25,11 +27,13 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     CreateTopicPage,
     CreateAccountPage,
     InboxPage,
+    ForumPage,
     TabsPage
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp),
+    HttpClientModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -41,6 +45,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     CreateTopicPage,
     CreateAccountPage,
     InboxPage,
+    ForumPage,
     TabsPage
   ],
   providers: [

src/app/users/user.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Generated class for the UsersDirective directive.
+ *
+ * See https://angular.io/api/core/Directive for more info on Angular
+ * Directives.
+ */
+@Directive({
+  selector: '[users]' // Attribute selector
+})
+export class UsersDirective {
+
+  constructor() {
+    console.log('Hello UsersDirective Directive');
+  }
+
+}

src/pages/create-account/create-account.html

@@ -24,7 +24,7 @@
           <input type="text" placeholder="Password">
         </label>
       </ion-list>
-      <button id="createAnAccount-button3" class="button button-dark button-block">Sign up</button>
+      <button ion-button block id="createAnAccount-button3" a (click)= "motivateMe()">Sign up</button>
     </form>
 
 </ion-content>

src/pages/create-account/create-account.ts

@@ -27,4 +27,9 @@ export class CreateAccountPage {
     this.navCtrl.push(HomePage);
   }
 
+  motivateMe(){
+    
+    this.navCtrl.push(HomePage);
+  }
+
 }

src/pages/create-topic/create-topic.html

@@ -25,5 +25,5 @@
     <label class="item item-input" id="createATopic-textarea4" name="Advice and Strategies">
       <span class="input-label"></span><textarea placeholder="Advice and Strategies"></textarea></label>
   </form>
-  <!-- <a (click)="topics()" id="createATopic-button11" class="button button-calm button-block">Save Topic</a> -->
+  <a (click)="topics()" id="createATopic-button11" class="button button-calm button-block">Save Topic</a>
 </ion-content>

src/pages/forum/forum.html

@@ -0,0 +1,51 @@
+<!--
+  Generated template for the ForumPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>forum</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding="true" class="has-header">
+  <form id="forum-form7" class="list">
+    <label class="item item-input" id="forum-textarea5">
+      <span class="input-label"></span><textarea placeholder="Leave a message here"></textarea></label>
+  </form>
+  <ion-list id="forum-list3">
+    <ion-item class="item-avatar" id="forum-list-item6">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item7">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item8">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item9">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item10">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item11">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+    <ion-item class="item-avatar" id="forum-list-item12">
+      <h2>Username</h2>
+      <p>Comment</p>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/pages/forum/forum.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ForumPage } from './forum';
+
+@NgModule({
+  declarations: [
+    ForumPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ForumPage),
+  ],
+})
+export class ForumPageModule {}

src/pages/forum/forum.scss

@@ -0,0 +1,3 @@
+page-forum {
+
+}

src/pages/forum/forum.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the ForumPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-forum',
+  templateUrl: 'forum.html',
+})
+export class ForumPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad ForumPage');
+  }
+
+  forum(){
+    
+  }
+
+}

src/pages/home/home.html

@@ -3,17 +3,19 @@
   <ion-navbar>
     <ion-title>MotivateMe</ion-title>
   </ion-navbar>
-
 </ion-header>
+
 <ion-content padding="true" class="page-home has-header">
-  <form id="motivateMe-form2" class="list">
-    <label class="item item-input" id="motivateMe-input3" name="Email">
-      <input type="email" placeholder="Email">
-    </label>
-    <label class="item item-input" id="motivateMe-input4" name="Password">
-      <input type="password" placeholder="Password">
-    </label>
-  </form>
-  <a (click)="topics()" id="motivateMe-button1" class="button">Login</a>
-  <a (click)="createAnAccount()" id="motivateMe-button2" class="button">Or create an account</a>
-</ion-content>
+  <div class="home-wrapper">
+    <form id="motivateMe-form2" class="list">
+      <label class="item item-input" id="motivateMe-input3" name="Email">
+        <input type="email" placeholder="Email" class="field">
+      </label>
+      <label class="item item-input" id="motivateMe-input4" name="Password">
+        <input type="password" placeholder="Password" class="field">
+      </label>
+    </form>
+    <button ion-button block id="motivateMe-button1" a (click)="topics()">Login</button>
+    <button ion-button block id="motivateMe-button2" a (click)="createAnAccount()">Or create an account</button>
+  </div>
+</ion-content>

src/pages/home/home.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { HomePage } from './home';
+
+@NgModule({
+  declarations: [
+    HomePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(HomePage),
+  ],
+})
+export class HomePageModule {}

src/pages/home/home.scss

@@ -1,12 +1,21 @@
 .page-home {
-
-  display: block;
-
-  * {
-    display: block;
+  .home-wrapper {
+    max-width: 500px;
+    margin: auto;
+  }
+  .field {
+    width:100%;
+    margin-bottom: 10px;
+    padding: 5px;
   }
+  
+  // .button {
+  //   color: #FFF;
+  // }
 
-  .button {
-    color: #FFF;
+  .button-calm{
+    background-color: #FFF;
   }
 }
+
+

src/pages/home/home.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
-import { TopicPage } from './../topic/topic'
+import { TopicPage } from './../topic/topic';
+import { CreateAccountPage } from './../create-account/create-account';
+// import { ApiProvider } from './../../providers/api/api';
+// import { User } from './../../app/users/user';
 
 @Component({
   selector: 'page-home',
@@ -8,16 +11,30 @@ import { TopicPage } from './../topic/topic'
 })
 export class HomePage {
 
-  constructor(public navCtrl: NavController) {
+  constructor(public navCtrl: NavController,) {
 
   }
 
+  // public apiProvider: ApiProvider
+
+//   ngOnInit() {
+//   this.loadUsers();
+// }
+
+// loadUsers() {
+//   this.apiProvider.getUsers().subscribe(
+//     data => this.users = data["_embedded"]["users"],
+//     err => {
+//         console.log(err);
+//     });
+// }
+
   topics(){
     this.navCtrl.push(TopicPage);
   }
 
   createAnAccount(){
-
+    this.navCtrl.push(CreateAccountPage);
   }
 
 }

src/pages/topic/topic.html

@@ -13,7 +13,7 @@
 </ion-header>
 
 <ion-content padding="true" class="has-header">
-  <a (click)="createTopic()" class="button">Create Topic</a>
+  <a (click)="createTopic()" class="button ion-button block">Create Topic</a>
 
   <form id="topics-form5" class="list">
     <label class="item item-input" id="topics-search1">

src/pages/topic/topic.scss

@@ -1,3 +1,5 @@
 page-topic {
-
+.button-calm{
+  background-color: #FFF;
+}
 }

src/providers/api/api.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+/*
+  Generated class for the ApiProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class ApiProvider {
+
+  constructor(public http: HttpClient) {
+    console.log('Hello ApiProvider Provider');
+  }
+
+}