Grid profile

app/pages/gallery/gallery.html

@@ -1,18 +1,40 @@
 <ion-header>
   <ion-navbar ionic>
     <ion-title text-center>
-      Your Super Gallery
+      Your Super Profile
     </ion-title>
   </ion-navbar>
 </ion-header>
 
 
 <ion-content>
-	<ion-grid>
-	  <ion-row *ngFor="let row of grid">
-	    <ion-col width-50 *ngFor="let file_uri of row">
-	    <img src="{{file_uri}}" />
-	    </ion-col>
-	  </ion-row>
-	</ion-grid>
+  <ion-grid>
+    <ion-row>     
+      <ion-col center>
+        <p>Alex Muramoto</p>
+        <p>Dev Advocate</p>
+        <p>alex.m@ionic.io</p>        
+      </ion-col>      
+      <ion-col width-50 offset-10>
+        <img src="img/profile.jpg">
+      </ion-col>      
+    </ion-row>
+    <ion-row>
+      <ion-col width-90>                
+        <h4>About Me</h4>
+        <p>I enjoy long walks on the beach and taking humiliating pictures of my dog (pictured above)</p>
+      </ion-col>
+    </ion-row>
+    <ion-row class="pictureRow">
+      <ion-col offset-67>
+        <h4>My Pictures</h4>
+      </ion-col>
+    </ion-row>
+
+    <ion-row wrap>
+      <ion-col width-33 *ngFor="let file_uri of images">
+      <img [src]="file_uri" />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

app/pages/gallery/gallery.scss

@@ -1,3 +1,12 @@
 .gallery {
 
 }
+
+p {
+  font-size: 16px;
+  color: #FFFFFF;
+}
+
+.pictureRow {
+  border-top: #EEEEEE 1px solid;
+}

app/pages/gallery/gallery.ts

@@ -6,32 +6,10 @@ import { NavController, NavParams } from 'ionic-angular';
 })
 export class GalleryPage {
 
-	private images: Array<string>;	
-	private grid: Array<Array<string>>;
+  images: Array<string>;  
 
-  constructor(private _navCtrl: NavController, private _navParams: NavParams) {
-  	this.images = this._navParams.get('images');
-  	this.grid = Array(Math.ceil(this.images.length/2));
-  }
-
-  ionViewLoaded() {
-
-  	let rowNum = 0;
-
-  	for (let i = 0; i < this.images.length; i+=2) {
-
-      this.grid[rowNum] = Array(2);
-
-  		if (this.images[i]) {
-  			this.grid[rowNum][0] = this.images[i]
-  		}
-  		if (this.images[i+1]) {
-  			this.grid[rowNum][1] = this.images[i+1]
-  		}
-
-  		rowNum++;
-  	}
-
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+    this.images = this.navParams.get('images');
   }
 
 }

app/pages/home/home.html

@@ -7,7 +7,7 @@
 </ion-header>
 
 <ion-content>
-  <div class="gallery-button" text-center>  	
+  <div class="gallery-button" text-center>    
     <ion-icon name="images" on-tap="openGallery()"></ion-icon>
     <p>Select Photos</p>  
   </div>  

app/pages/home/home.scss

@@ -6,15 +6,15 @@
     width:100%;
 }
 
-ion-icon[name="images"] {	
+ion-icon[name="images"] {   
     border: #FFFFFF 2px solid;    
     border-radius: 50%;
     background-color: #2155AA;    
     font-size: 35px;
-	padding: 15px;	
+    padding: 15px;  
 }
 
 p {
-	font-size: 20px;
+    font-size: 20px;
 }
 

app/pages/home/home.ts

@@ -9,23 +9,23 @@ import {GalleryPage} from '../gallery/gallery';
 
 export class HomePage {
 
-  constructor(private _navCtrl: NavController) {
+  constructor(public navCtrl: NavController) {
 
   }
 
-  private openGallery (): void {
+  public openGallery (): void {
     let options = {
-      maximumImagesCount: 8,
+      maximumImagesCount: 15,
       width: 500,
       height: 500,
       quality: 75
     }
 
     ImagePicker.getPictures(options).then(
-      file_uris => this._navCtrl.push(GalleryPage, {images: file_uris}),
+      file_uris => this.navCtrl.push(GalleryPage, {images: file_uris}),
       err => console.log('uh oh')
     );
-	}
+  }
 
 }