- UI Revisions

src/pages/grid/grid.html

@@ -1,3 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Urnings</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content no-padding>
   <ion-grid no-padding>
     <ion-row align-items-stretch>

src/pages/grid/grid.scss

@@ -1,46 +1,63 @@
 page-grid {
 
-  ion-col {
+  ion-toolbar {
 
-    &.profile {
-      background-size: cover;
-      border: 1px solid #000000;
-      box-sizing: border-box;
-      padding: 0 0 33% !important;
-      position: relative;
+    .toolbar-title {
+      color: #ffffff;
+      font-size: 2.42em;
+      font-weight: 700;
+      line-height: 1.29;
+      text-decoration: underline;
+    }
+  }
 
-      .username {
-        background-size: cover;
-        bottom: 0.25rem;
-        box-sizing: border-box;
-        color: #acacac;
-        display: inline-block;
-        left: 0.5rem;
-        overflow: hidden;
-        position: absolute;
-        right: 0.25rem;
-        text-overflow: ellipsis;
-        text-shadow: rgba(0, 0, 0, 1);
-        white-space: nowrap;
+  .grid {
 
-        &::before {
-          border: 0.125rem solid #acacac;
-          border-radius: 1rem;
-          bottom: 0.125rem;
-          content: '';
-          display: inline-block;
-          height: 0.8rem;
-          margin-right: 0.5rem;
+    .row {
+
+      .col {
+
+        &.profile {
+          background-size: cover;
+          border: 1px solid #000000;
+          box-sizing: border-box;
+          padding: 0 0 33% !important;
           position: relative;
-          vertical-align: middle;
-          width: 0.8rem;
-        }
 
-        &.online {
+          .username {
+            background-size: cover;
+            bottom: 0.25rem;
+            box-sizing: border-box;
+            color: #ffffff;
+            display: inline-block;
+            left: 0.5rem;
+            overflow: hidden;
+            position: absolute;
+            right: 0.25rem;
+            text-overflow: ellipsis;
+            text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+            white-space: nowrap;
 
-          &::before {
-            background-color: #00FF00;
-            border-color: #00FF00;
+            &::before {
+              border: 0.125rem solid #acacac;
+              border-radius: 1rem;
+              bottom: 0.125rem;
+              content: '';
+              display: inline-block;
+              height: 0.8rem;
+              margin-right: 0.5rem;
+              position: relative;
+              vertical-align: middle;
+              width: 0.8rem;
+            }
+
+            &.online {
+
+              &::before {
+                background-color: #00ff00;
+                border-color: #00ff00;
+              }
+            }
           }
         }
       }

src/pages/grid/grid.ts

@@ -5,6 +5,7 @@ import { NavController } from 'ionic-angular';
 import { ChatPage } from '../chat/chat';
 import { ProfileService } from '../../services/profiles';
 import { ProfilePage } from '../profile/profile';
+import { TellYourStoryPage } from '../tell/tell';
 
 @Component({
   selector: 'page-grid',
@@ -27,6 +28,10 @@ export class GridPage {
     this.tabNavEl.style.display = 'flex';
   }
 
+  doTellStory() {
+    this.navCtrl.push(TellYourStoryPage);
+  }
+
   getBackgroundThumbnail(pics) {
     return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + pics.thumb + ')');
   }
@@ -41,7 +46,7 @@ export class GridPage {
 
   profileTapped(event, profile) {
     this.navCtrl.push(ProfilePage, {
-      profile: profile
+      profile: profile,
     });
   }
 }