More profiles, styling tweaks

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) {