More profiles, styling tweaks

src/pages/chat/chat.ts

@@ -14,6 +14,11 @@ export class ChatPage {
 
   constructor(public navCtrl: NavController, private _params: NavParams) {
     this.profile = this._params.get('profile');
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'none';
   }
 
   closeChat(event) {

src/pages/grid/grid.html

@@ -1,7 +1,9 @@
 <ion-content no-padding>
   <ion-grid no-padding>
     <ion-row align-items-stretch>
-      <ion-col col-4 class="profile" *ngFor="let current of profiles" (tap)="profileTapped($event, current)" [style.backgroundImage]="getBackgroundThumbnail(current.details.pic)"></ion-col>
+      <ion-col col-4 class="profile" *ngFor="let current of profiles" (tap)="profileTapped($event, current)" [style.backgroundImage]="getBackgroundThumbnail(current.details.pic)">
+        <span class="username">{{current.details.name}}</span>
+      </ion-col>
     </ion-row>
   </ion-grid>
 </ion-content>

src/pages/grid/grid.scss

@@ -7,6 +7,31 @@ page-grid {
       border: 1px solid #000000;
       box-sizing: border-box;
       padding: 0 0 33% !important;
+      position: relative;
+
+      .username {
+        bottom: 0.25rem;
+        box-sizing: border-box;
+        display: inline-block;
+        left: 0.25rem;
+        overflow: hidden;
+        position: absolute;
+        right: 0.25rem;
+        text-overflow: ellipsis;
+        text-shadow: rgba(0, 0, 0, 0.75);
+
+        &::before {
+          border: 2px solid #acacac;
+          border-radius: 1rem;
+          color: #acacac;
+          content: '';
+          display: inline-block;
+          height: 1rem;
+          margin-right: 0.25rem;
+          vertical-align: top;
+          width: 1rem;
+        }
+      }
     }
   }
 }

src/pages/grid/grid.ts

@@ -18,6 +18,11 @@ export class GridPage {
     profileService.load().then((data) => {
       this.profiles = data;
     });
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'flex';
   }
 
   getBackgroundThumbnail(pics) {

src/pages/lightbox/lightbox.ts

@@ -12,6 +12,11 @@ export class LightboxPage {
 
   constructor(public navCtrl: NavController, private _params: NavParams) {
     this.image = this._params.get('image');
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'none';
   }
 
   close(event) {

src/pages/messages/messages.ts

@@ -20,6 +20,11 @@ export class MessagesPage {
     profileService.load().then((data) => {
       this.profiles = data;
     });
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'flex';
   }
 
   getLatestMessage(messages) {

src/pages/profile/profile.scss

@@ -4,7 +4,10 @@ page-profile {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    overflow: hidden;
+  }
+
+  .scroll-content {
+    overflow-y: hidden;
   }
 
   ion-toolbar {

src/pages/profile/profile.ts

@@ -16,6 +16,11 @@ export class ProfilePage {
 
   constructor(public navCtrl: NavController, public navParams: NavParams, private _sanitizer: DomSanitizer) {
     this.profile = navParams.get('profile');
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'none';
   }
 
   closeProfile(event) {

src/pages/tabs/tabs.html

@@ -1,5 +1,5 @@
-<ion-tabs selectedIndex="0">
-  <!--ion-tab [root]="tab1Root" tabIcon="star"></ion-tab-->
+<ion-tabs id="tab-nav" selectedIndex="0">
   <ion-tab [root]="tab1Root" tabIcon="contacts"></ion-tab>
+  <!--ion-tab [root]="tab1Root" tabIcon="star"></ion-tab-->
   <ion-tab [root]="tab2Root" tabIcon="chatboxes"></ion-tab>
 </ion-tabs>