Login page styling

app/src/app/app.module.ts

@@ -33,6 +33,7 @@ import { SearchResultsUsersPage } from "../pages/search-results-users/search-res
 import { SearchResultsTweetsPopularPage } from "../pages/search-results-tweets-popular/search-results-tweets-popular";
 import { SearchResultsTweetsRecentPage } from "../pages/search-results-tweets-recent/search-results-tweets-recent";
 import { SearchResultsTweetsTabsPage } from "../pages/search-results-tweets-tabs/search-results-tweets-tabs";
+import { AboutPage } from "../pages/about/about";
 
 @NgModule({
   declarations: [
@@ -47,6 +48,7 @@ import { SearchResultsTweetsTabsPage } from "../pages/search-results-tweets-tabs
     SearchResultsTweetsRecentPage,
     SearchResultsTweetsPopularPage,
     SearchResultsUsersPage,
+    AboutPage,
     FeedComponent,
     TweetComponent,
     TweetHeaderComponent,
@@ -76,7 +78,8 @@ import { SearchResultsTweetsTabsPage } from "../pages/search-results-tweets-tabs
     SearchResultsTweetsTabsPage,
     SearchResultsTweetsRecentPage,
     SearchResultsTweetsPopularPage,
-    SearchResultsUsersPage
+    SearchResultsUsersPage,
+    AboutPage
   ],
   providers: [
     StatusBar,

app/src/pages/about/about.html

@@ -0,0 +1,11 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>About HybridOSN</ion-title>
+  </ion-navbar>
+</ion-header>
+
+
+<ion-content padding>
+  <p>TU Logo...</p>
+  <p>Content tbd with Aidmar+Jörg</p>
+</ion-content>

app/src/pages/about/about.module.ts

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

app/src/pages/about/about.scss

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

app/src/pages/about/about.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { IonicPage, NavController, NavParams } from "ionic-angular";
+
+@IonicPage()
+@Component({
+  selector: "page-about",
+  templateUrl: "about.html"
+})
+export class AboutPage {
+  constructor(public navCtrl: NavController, public navParams: NavParams) {}
+}

app/src/pages/login/login.html

@@ -1,9 +1,12 @@
-<ion-header>
-  <ion-navbar>
-    <ion-title>Login</ion-title>
-  </ion-navbar>
-</ion-header>
-
-<ion-content padding>
-  <button ion-button outline block (click)="login()">Login</button>
+<ion-content>
+  <div class="header"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+      x="0px" y="0px" viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
+      <polygon points="0,99  0,100 300,100 300,75" fill="#FFFFFF" /></svg>
+    <div class="logo"></div>
+  </div>
+  <div class="content">
+    <h1>Hybrid OSN</h1>
+    <button ion-button outline block (click)="login()">Login</button>
+    <a href="#" (click)="showAbout()">Learn more</a>
+  </div>
 </ion-content>

app/src/pages/login/login.scss

@@ -1,3 +1,33 @@
 page-login {
+  .header {
+    background: url("../assets/imgs/background-login-sm.png") repeat #5ec0f9;
+    width: 100%;
+    height: 40vh;
+    position: relative;
+    margin-bottom: 50px;
+    .logo {
+      border-radius: 50%;
+      border: 5px solid #fff;
+      background-color: #ccc;
+      width: 140px;
+      height: 140px;
+      position: absolute;
+      bottom: -60px;
+      left: calc(50% - 70px);
+    }
+    .svg-triangle {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
 
+    button {
+      margin: 16px 0 32px 0;
+    }
+  }
 }

app/src/pages/login/login.ts

@@ -4,10 +4,12 @@ import {
   NavController,
   NavParams,
   MenuController,
-  AlertController
+  AlertController,
+  ModalController
 } from "ionic-angular";
 import { AuthProvider } from "../../providers/auth/auth";
 import { HomePage } from "../home/home";
+import { AboutPage } from "../about/about";
 
 @IonicPage()
 @Component({
@@ -20,7 +22,8 @@ export class LoginPage {
     public navParams: NavParams,
     private menuCtrl: MenuController,
     private alertCtrl: AlertController,
-    private authProvider: AuthProvider
+    private authProvider: AuthProvider,
+    private modalCtrl: ModalController
   ) {}
 
   ionViewDidLoad() {
@@ -40,4 +43,8 @@ export class LoginPage {
       .then(() => this.navCtrl.setRoot(HomePage))
       .catch(err => this.alertCtrl.create(alertText).present());
   }
+
+  showAbout() {
+    this.modalCtrl.create(AboutPage).present();
+  }
 }