Added cruising pages support

src/pages/cruise/cruise.html

@@ -0,0 +1,26 @@
+<ion-content no-padding [style.backgroundImage]="getBackground(this.cruise.pic)" (press)="showLightbox($event, this.cruise.pic.detail)">
+  <ion-toolbar>
+    <ion-buttons left>
+      <button ion-button icon-only (tap)="closeCruise($event)">
+        <ion-icon name="arrow-back"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <div id="detail-overlay" class="details" swipeAll (swipedown)="closeCruiseDetails($event)" (swipeup)="openCruiseDetails($event)" (click)="toggleCruiseDetails($event)">
+    <ion-grid>
+      <ion-row nowrap align-items-center justify-content-between>
+        <ion-col col-8>
+          <h2 class="placename">{{this.cruise.name}}</h2>
+        </ion-col>
+      </ion-row>
+      <ion-row class="location" *ngIf="this.cruise.location">
+        <ion-col col-4>Location</ion-col>
+        <ion-col col-8 [innerHTML]="getFormattedCruiseAddress(this.cruise.location)"></ion-col>
+      </ion-row>
+      <ion-row class="text" *ngIf="this.cruise.text">
+        <ion-col col-12>{{this.cruise.text}}</ion-col>
+      </ion-row>
+    </ion-grid>
+  </div>
+</ion-content>

src/pages/cruise/cruise.scss

@@ -0,0 +1,47 @@
+page-cruise {
+
+  ion-content {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  .scroll-content {
+    overflow-y: hidden;
+  }
+
+  ion-toolbar {
+
+    .toolbar-background {
+      background-color: transparent;
+    }
+
+    .bar-button {
+      color: #ffffff;
+    }
+  }
+
+  .details {
+    background: rgba(0, 0, 0, 0.8);
+    bottom: 0;
+    height: 60px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transition: all 250ms 125ms ease-in-out;
+
+    h2 {
+      margin: 0;
+    }
+
+    .location {
+      margin-top: 1.5rem;
+    }
+
+    &.open {
+      height: 100%;
+      overflow-y: scroll;
+      padding-top: 35px;
+    }
+  }
+}

src/pages/cruise/cruise.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NavController, NavParams } from 'ionic-angular';
+
+import { LightboxPage } from '../lightbox/lightbox';
+
+@Component({
+  selector: 'page-cruise',
+  templateUrl: 'cruise.html'
+})
+export class CruisePage {
+
+  detailsOpen: boolean = false;
+  cruise: any;
+  tabNavEl: any;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private _sanitizer: DomSanitizer) {
+    this.cruise = navParams.get('cruise');
+    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  }
+
+  ionViewWillEnter() {
+    this.tabNavEl.style.display = 'none';
+  }
+
+  closeCruise(event) {
+    this.navCtrl.pop();
+  }
+
+  closeCruiseDetails(event) {
+    if (this.detailsOpen) {
+      this.detailsOpen = false;
+      document.getElementById('detail-overlay').classList.remove('open');
+    }
+  }
+
+  getBackground(images) {
+    // PROD: return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + images.detail + ')');
+    return this._sanitizer.bypassSecurityTrustStyle('url(' + images.detail + ')');
+  }
+
+  getFormattedCruiseAddress(location) {
+    var address = '';
+    if (location && location.address) {
+      address += location.address.street1 ? location.address.street1 + '<br>' : '';
+      address += location.address.street2 ? location.address.street2 + '<br>' : '';
+      address += location.address.locality ? location.address.locality + ', ' : '';
+      address += location.address.region ? location.address.region + ' ' : '';
+      address += location.address.postal ? location.address.postal + '<br>' : '';
+      address += location.address.country ? location.address.country : '';
+    }
+    return address;
+  }
+
+  markFavorite(event, cruise) {
+    console.debug('favorite cruise', { event: event, profile: cruise });
+  }
+
+  openCruiseDetails(event) {
+    if (!this.detailsOpen) {
+      this.detailsOpen = true;
+      document.getElementById('detail-overlay').classList.add('open');
+    }
+  }
+
+  showLightbox(event, image) {
+    if (event.target.classList.contains('scroll-content')) {
+      this.navCtrl.push(LightboxPage, {
+        image: image
+      });
+    }
+  }
+
+  toggleCruiseDetails(event) {
+    if (!this.detailsOpen) {
+      this.openCruiseDetails(event);
+    } else {
+      this.closeCruiseDetails(event);
+    }
+  }
+}