From 8f5ec53ac445647e1e50853e59255cf1fdaa36f0 Mon Sep 17 00:00:00 2001 From: Mike Fitzpatrick Date: Tue, 29 May 2018 00:30:49 -0400 Subject: [PATCH] - UI Revisions --- src/app/app.component.ts | 4 +- src/app/app.module.ts | 27 +++--- src/app/app.scss | 8 +- src/index.html | 4 +- src/pages/chat/chat.html | 7 -- src/pages/chat/chat.scss | 27 +----- src/pages/cruise/cruise.html | 25 ------ src/pages/cruise/cruise.scss | 47 ---------- src/pages/cruise/cruise.ts | 80 ----------------- src/pages/cruises/cruises.html | 9 -- src/pages/cruises/cruises.ts | 38 -------- src/pages/grid/grid.html | 6 ++ src/pages/grid/grid.scss | 87 +++++++++++-------- src/pages/grid/grid.ts | 7 +- src/pages/information/information.html | 20 +++++ src/pages/information/information.scss | 9 ++ src/pages/information/information.ts | 23 +++++ src/pages/lightbox/lightbox.html | 4 +- src/pages/messages/messages.html | 19 ++-- src/pages/messages/messages.scss | 21 ++++- src/pages/profile/profile.html | 74 +++------------- src/pages/profile/profile.scss | 39 +++++++-- src/pages/profile/profile.ts | 19 +++- src/pages/tabs/tabs.html | 3 +- src/pages/tabs/tabs.ts | 6 +- src/pages/tell/tell.html | 12 +++ .../{cruises/cruises.scss => tell/tell.scss} | 2 +- src/pages/tell/tell.ts | 26 ++++++ src/pages/users/users.html | 20 +++++ src/pages/users/users.scss | 78 +++++++++++++++++ src/pages/users/users.ts | 52 +++++++++++ src/services/cruises.ts | 44 ---------- src/services/profiles.ts | 87 ++++++++++++++----- 33 files changed, 487 insertions(+), 447 deletions(-) delete mode 100644 src/pages/cruise/cruise.html delete mode 100644 src/pages/cruise/cruise.scss delete mode 100644 src/pages/cruise/cruise.ts delete mode 100644 src/pages/cruises/cruises.html delete mode 100644 src/pages/cruises/cruises.ts create mode 100644 src/pages/information/information.html create mode 100644 src/pages/information/information.scss create mode 100644 src/pages/information/information.ts create mode 100644 src/pages/tell/tell.html rename src/pages/{cruises/cruises.scss => tell/tell.scss} (95%) create mode 100644 src/pages/tell/tell.ts create mode 100644 src/pages/users/users.html create mode 100644 src/pages/users/users.scss create mode 100644 src/pages/users/users.ts delete mode 100644 src/services/cruises.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b55aba1..bbfda43 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,8 +8,8 @@ import { TabsPage } from '../pages/tabs/tabs'; @Component({ templateUrl: 'app.html' }) -export class Urge { - rootPage:any = TabsPage; +export class Urnings { + rootPage: any = TabsPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7cb6823..e749ff7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,37 +3,39 @@ import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { IonicSwipeAllModule } from 'ionic-swipe-all'; -import { Urge } from './app.component'; +import { Urnings } from './app.component'; import { ChatPage } from '../pages/chat/chat'; -import { CruisePage } from '../pages/cruise/cruise'; -import { CruisesPage } from '../pages/cruises/cruises'; import { GridPage } from '../pages/grid/grid'; +import { InformationPage } from '../pages/information/information'; import { LightboxPage } from '../pages/lightbox/lightbox'; import { MessagesPage } from '../pages/messages/messages'; import { ProfilePage } from '../pages/profile/profile'; import { TabsPage } from '../pages/tabs/tabs'; +import { TellYourStoryPage } from '../pages/tell/tell'; +import { UsersPage } from '../pages/users/users'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({ declarations: [ - Urge, + Urnings, ChatPage, - CruisePage, - CruisesPage, + InformationPage, GridPage, LightboxPage, MessagesPage, ProfilePage, - TabsPage + TabsPage, + TellYourStoryPage, + UsersPage ], imports: [ BrowserModule, HttpModule, IonicSwipeAllModule, - IonicModule.forRoot(Urge, { + IonicModule.forRoot(Urnings, { iconMode: 'ios', modalEnter: 'modal-slide-in', modalLeave: 'modal-slide-out', @@ -43,15 +45,16 @@ import { SplashScreen } from '@ionic-native/splash-screen'; ], bootstrap: [IonicApp], entryComponents: [ - Urge, + Urnings, ChatPage, - CruisePage, - CruisesPage, + InformationPage, GridPage, LightboxPage, MessagesPage, ProfilePage, - TabsPage + TabsPage, + TellYourStoryPage, + UsersPage ], providers: [ StatusBar, diff --git a/src/app/app.scss b/src/app/app.scss index 60cc5c9..4a0c92d 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -15,6 +15,10 @@ // for the .md, .ios, or .wp mode classes. The mode class is // automatically applied to the element in the app. +body { + font-family: 'PT Sans', sans-serif; +} + ion-toolbar { color: #fff; @@ -24,7 +28,7 @@ ion-toolbar { .bar-button, .toolbar-title { - color: #9e9ea8; + color: #ffffff; } } @@ -59,7 +63,7 @@ ion-title { .tab-button { .tab-button-icon { - color: #9e9ea8; + color: #ffffff; } &[aria-selected=true] { diff --git a/src/index.html b/src/index.html index b539afa..ca56b6e 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Urge + Urnings @@ -17,6 +17,7 @@ + @@ -33,6 +34,7 @@ } --> + diff --git a/src/pages/chat/chat.html b/src/pages/chat/chat.html index ff98f78..ec7e420 100644 --- a/src/pages/chat/chat.html +++ b/src/pages/chat/chat.html @@ -5,14 +5,7 @@ - {{this.profile.details.name}} - - diff --git a/src/pages/chat/chat.scss b/src/pages/chat/chat.scss index 9555039..de38e2e 100644 --- a/src/pages/chat/chat.scss +++ b/src/pages/chat/chat.scss @@ -12,40 +12,17 @@ page-chat { .message-bubble { background-color: #fdb315; border-radius: 0.5rem; + font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 1.5; margin: 1rem 1rem 2.5rem auto; max-width: 75%; overflow: visible; padding: 0.75rem; position: relative; - &::after { - border: 0.625em solid transparent; - border-bottom: 0; - border-right: 0; - border-top-color: #fdb315; - bottom: 0; - content: ''; - height: 0; - right: 2rem; - margin-bottom: -0.6em; - margin-left: -0.312em; - position: absolute; - width: 0; - } - &.is-user { background-color: #6fbedf; margin: 1rem auto 2.5rem 1rem; - - &::after { - border: 0.625em solid transparent; - border-bottom: 0; - border-left: 0; - border-top-color: #6fbedf; - right: auto; - margin-right: -0.312em; - left: 2rem; - } } .item-inner { diff --git a/src/pages/cruise/cruise.html b/src/pages/cruise/cruise.html deleted file mode 100644 index 0edd5e2..0000000 --- a/src/pages/cruise/cruise.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - -
- - - -

{{this.cruise.name}}

- - - - Location - - - - - - -
- diff --git a/src/pages/cruise/cruise.scss b/src/pages/cruise/cruise.scss deleted file mode 100644 index 02c9aea..0000000 --- a/src/pages/cruise/cruise.scss +++ /dev/null @@ -1,47 +0,0 @@ -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; - } - } -} diff --git a/src/pages/cruise/cruise.ts b/src/pages/cruise/cruise.ts deleted file mode 100644 index 5918fe8..0000000 --- a/src/pages/cruise/cruise.ts +++ /dev/null @@ -1,80 +0,0 @@ -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) { - return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + images.detail + ')'); - } - - getFormattedCruiseAddress(location) { - var address = ''; - if (location && location.address) { - address += location.address.street1 ? location.address.street1 + '
' : ''; - address += location.address.street2 ? location.address.street2 + '
' : ''; - address += location.address.locality ? location.address.locality + ', ' : ''; - address += location.address.region ? location.address.region + ' ' : ''; - address += location.address.postal ? location.address.postal + '
' : ''; - 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); - } - } -} diff --git a/src/pages/cruises/cruises.html b/src/pages/cruises/cruises.html deleted file mode 100644 index 538ee80..0000000 --- a/src/pages/cruises/cruises.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - {{current.name}} - - - - diff --git a/src/pages/cruises/cruises.ts b/src/pages/cruises/cruises.ts deleted file mode 100644 index 8c8f43f..0000000 --- a/src/pages/cruises/cruises.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; -import { NavController } from 'ionic-angular'; - -import { CruiseService } from '../../services/cruises'; -import { CruisePage } from '../cruise/cruise'; - -@Component({ - selector: 'page-cruises', - templateUrl: 'cruises.html', - providers: [ CruiseService ] -}) -export class CruisesPage { - - cruises: any; - tabNavEl: any; - - constructor(public navCtrl: NavController, public cruiseService: CruiseService, private _sanitizer: DomSanitizer) { - cruiseService.load().then((data) => { - this.cruises = data; - }); - this.tabNavEl = document.querySelector('#tab-nav .tabbar'); - } - - ionViewWillEnter() { - this.tabNavEl.style.display = 'flex'; - } - - getBackgroundThumbnail(images) { - return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + images.thumb + ')'); - } - - profileTapped(event, cruise) { - this.navCtrl.push(CruisePage, { - cruise: cruise - }); - } -} diff --git a/src/pages/grid/grid.html b/src/pages/grid/grid.html index 19c0fcb..1ac687b 100644 --- a/src/pages/grid/grid.html +++ b/src/pages/grid/grid.html @@ -1,3 +1,9 @@ + + + Urnings + + + diff --git a/src/pages/grid/grid.scss b/src/pages/grid/grid.scss index dcf709e..16ce17c 100644 --- a/src/pages/grid/grid.scss +++ b/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; + } + } } } } diff --git a/src/pages/grid/grid.ts b/src/pages/grid/grid.ts index b7fb9a7..037729b 100644 --- a/src/pages/grid/grid.ts +++ b/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, }); } } diff --git a/src/pages/information/information.html b/src/pages/information/information.html new file mode 100644 index 0000000..cc5daf6 --- /dev/null +++ b/src/pages/information/information.html @@ -0,0 +1,20 @@ + + + + + + + + + +
+

About this Project

+
+

The app was designed by Nicholas Pfosi and developed by Michael Fitzpatrick, modeled after the popular gay dating app Grindr.

+

Presenting these stories in this form, which is the conduit through which much participation in dating occurs, served multiple purposes. First, it educated the viewer who may not have used Grindr before, how it functions and how it is different from other apps such as Tinder, whereby matching with a person is a prerequisite for conversation. Second, it makes the scope of the project flexible, allowing for the submission of stories from the audience to be slotted into an expandable presentation.

+

Please direct any questions or concerns to Nicholas Pfosi at npfosi@gmail.com

+
+
+ diff --git a/src/pages/information/information.scss b/src/pages/information/information.scss new file mode 100644 index 0000000..59c8e14 --- /dev/null +++ b/src/pages/information/information.scss @@ -0,0 +1,9 @@ +page-information { + + .content-box { + background-color: #ffffff; + color: #000000; + font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 1.5; + } +} diff --git a/src/pages/information/information.ts b/src/pages/information/information.ts new file mode 100644 index 0000000..451d84a --- /dev/null +++ b/src/pages/information/information.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; + +@Component({ + selector: 'page-information', + templateUrl: 'information.html', +}) +export class InformationPage { + + tabNavEl: any; + + constructor(public navCtrl: NavController) { + this.tabNavEl = document.querySelector('#tab-nav .tabbar'); + } + + ionViewWillEnter() { + this.tabNavEl.style.display = 'none'; + } + + close(event) { + this.navCtrl.pop(); + } +} diff --git a/src/pages/lightbox/lightbox.html b/src/pages/lightbox/lightbox.html index 09ffc66..490b7d4 100644 --- a/src/pages/lightbox/lightbox.html +++ b/src/pages/lightbox/lightbox.html @@ -1,8 +1,8 @@ - + diff --git a/src/pages/messages/messages.html b/src/pages/messages/messages.html index 635119a..ce8d61e 100644 --- a/src/pages/messages/messages.html +++ b/src/pages/messages/messages.html @@ -1,23 +1,14 @@ - - - - - - - + + + Urnings + - + diff --git a/src/pages/messages/messages.scss b/src/pages/messages/messages.scss index 4b875e1..64d86be 100644 --- a/src/pages/messages/messages.scss +++ b/src/pages/messages/messages.scss @@ -1,5 +1,16 @@ page-messages { + ion-toolbar { + + .toolbar-title { + color: #ffffff; + font-size: 2.42em; + font-weight: 700; + line-height: 1.29; + text-decoration: underline; + } + } + ion-header { .button { @@ -8,10 +19,12 @@ page-messages { } .col { - color: #acacac; + color: #ffffff; + font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 1.5; &.username { - font-size: 0.8em; + font-weight: 700; } &.timestamp { @@ -19,6 +32,10 @@ page-messages { font-style: italic; text-align: right; } + + .latest-message { + font-size: 0.8em; + } } .list { diff --git a/src/pages/profile/profile.html b/src/pages/profile/profile.html index 1574e7a..f8958c6 100644 --- a/src/pages/profile/profile.html +++ b/src/pages/profile/profile.html @@ -1,81 +1,27 @@ - - + + - - + {{this.profile.details.name}} + +
- - -

{{this.profile.details.name}}

- - - + + + - - Height - {{this.profile.details.height}} - - - Weight - {{this.profile.details.weight}} - - - Ethnicity - {{this.profile.details.ethnicity}} - - - Body Type - {{this.profile.details.body}} - - - Gender - {{this.profile.details.gender}} - - - Pronouns - {{this.profile.details.pronouns}} - - - Tribes - {{this.profile.details.tribe}} - - - Position - {{this.profile.details.position}} - - - Relationship - {{this.profile.details.relationship}} - - - I'm Looking For - {{this.profile.details.looking}} - - - HIV Status - {{this.profile.details.status}} - - - Last Tested - {{this.profile.details.tested}} -
diff --git a/src/pages/profile/profile.scss b/src/pages/profile/profile.scss index 14e0b00..19461a1 100644 --- a/src/pages/profile/profile.scss +++ b/src/pages/profile/profile.scss @@ -11,18 +11,38 @@ page-profile { } ion-toolbar { + border-bottom: 1px solid #ffffff; + transition: opacity 250ms 125ms ease-in-out; - .toolbar-background { - background-color: transparent; + &.hidden { + opacity: 0; + z-index: -1; } - .bar-button { + .toolbar-background { + background-color: rgba(0, 0, 0, 1); + } + + .bar-button, + .toolbar-title { color: #ffffff; } } + .button-chat { + bottom: 3rem; + color: #fdb315; + position: absolute; + right: 1.5rem; + z-index: 100; + } + + .detail-toggle { + font-size: 2.5em; + z-index: 100; + } + .details { - background: rgba(0, 0, 0, 0.8); bottom: 0; height: 60px; left: 0; @@ -30,14 +50,15 @@ page-profile { right: 0; transition: all 250ms 125ms ease-in-out; - h2 { - margin: 0; - } - &.open { + background: rgba(0, 0, 0, 0.8); height: 100%; overflow-y: scroll; - padding-top: 35px; + } + + .about { + font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif; + line-height: 1.5; } .actions { diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts index a5f7770..ee32bf8 100644 --- a/src/pages/profile/profile.ts +++ b/src/pages/profile/profile.ts @@ -4,18 +4,21 @@ import { NavController, NavParams } from 'ionic-angular'; import { ChatPage } from '../chat/chat'; import { LightboxPage } from '../lightbox/lightbox'; +import { ProfileService } from '../../services/profiles'; @Component({ selector: 'page-profile', - templateUrl: 'profile.html' + templateUrl: 'profile.html', + providers: [ ProfileService ] }) + export class ProfilePage { detailsOpen: boolean = false; profile: any; tabNavEl: any; - constructor(public navCtrl: NavController, public navParams: NavParams, private _sanitizer: DomSanitizer) { + constructor(public navCtrl: NavController, public navParams: NavParams, public profileService: ProfileService, private _sanitizer: DomSanitizer) { this.profile = navParams.get('profile'); this.tabNavEl = document.querySelector('#tab-nav .tabbar'); } @@ -31,6 +34,7 @@ export class ProfilePage { closeProfileDetails(event) { if (this.detailsOpen) { this.detailsOpen = false; + document.querySelector('.profile-toolbar').classList.remove('hidden'); document.getElementById('detail-overlay').classList.remove('open'); } } @@ -43,6 +47,11 @@ export class ProfilePage { console.debug('favorite profile', { event: event, profile: profile }); } + nextProfile(event) { + this.profile = this.profileService.getNextProfile(this.profile._id); + this.navCtrl.setRoot(this.navCtrl.getActive().component); + } + openChat(event, profile) { this.navCtrl.push(ChatPage, { profile: profile @@ -52,10 +61,16 @@ export class ProfilePage { openProfileDetails(event) { if (!this.detailsOpen) { this.detailsOpen = true; + document.querySelector('.profile-toolbar').classList.add('hidden'); document.getElementById('detail-overlay').classList.add('open'); } } + previousProfile(event) { + this.profile = this.profileService.getPreviousProfile(this.profile._id); + this.navCtrl.setRoot(this.navCtrl.getActive().component); + } + showLightbox(event, image) { if (event.target.classList.contains('scroll-content')) { this.navCtrl.push(LightboxPage, { diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html index 21ee817..2b1da52 100644 --- a/src/pages/tabs/tabs.html +++ b/src/pages/tabs/tabs.html @@ -1,5 +1,6 @@ - + + diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts index 22e6048..9614e82 100644 --- a/src/pages/tabs/tabs.ts +++ b/src/pages/tabs/tabs.ts @@ -1,8 +1,9 @@ import { Component } from '@angular/core'; import { GridPage } from '../grid/grid'; -import { CruisesPage } from '../cruises/cruises'; +import { InformationPage } from '../information/information'; import { MessagesPage } from '../messages/messages'; +import { UsersPage } from '../users/users'; @Component({ templateUrl: 'tabs.html' @@ -10,8 +11,9 @@ import { MessagesPage } from '../messages/messages'; export class TabsPage { tab1Root = GridPage; - tab2Root = CruisesPage; + tab2Root = UsersPage; tab3Root = MessagesPage; + tab4Root = InformationPage; constructor() { diff --git a/src/pages/tell/tell.html b/src/pages/tell/tell.html new file mode 100644 index 0000000..1fc4390 --- /dev/null +++ b/src/pages/tell/tell.html @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/src/pages/cruises/cruises.scss b/src/pages/tell/tell.scss similarity index 95% rename from src/pages/cruises/cruises.scss rename to src/pages/tell/tell.scss index b722f7f..e925d2f 100644 --- a/src/pages/cruises/cruises.scss +++ b/src/pages/tell/tell.scss @@ -1,4 +1,4 @@ -page-cruises { +page-tell-your-story { ion-col { diff --git a/src/pages/tell/tell.ts b/src/pages/tell/tell.ts new file mode 100644 index 0000000..39fe021 --- /dev/null +++ b/src/pages/tell/tell.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { NavController } from 'ionic-angular'; + +import { ProfileService } from '../../services/profiles'; + +@Component({ + selector: 'page-tell-your-story', + templateUrl: 'tell.html', + providers: [ ProfileService ] +}) +export class TellYourStoryPage { + + tabNavEl: any; + + constructor(public navCtrl: NavController) { + this.tabNavEl = document.querySelector('#tab-nav .tabbar'); + } + + ionViewWillEnter() { + this.tabNavEl.style.display = 'none'; + } + + close(event) { + this.navCtrl.pop(); + } +} diff --git a/src/pages/users/users.html b/src/pages/users/users.html new file mode 100644 index 0000000..e9aceb3 --- /dev/null +++ b/src/pages/users/users.html @@ -0,0 +1,20 @@ + + + Urnings + + + + + + + + + + + {{current.details.name}} + + + + diff --git a/src/pages/users/users.scss b/src/pages/users/users.scss new file mode 100644 index 0000000..980c8a1 --- /dev/null +++ b/src/pages/users/users.scss @@ -0,0 +1,78 @@ +page-users { + + ion-toolbar { + + .toolbar-title { + color: #ffffff; + font-size: 2.42em; + font-weight: 700; + line-height: 1.29; + text-decoration: underline; + } + } + + .grid { + + .row { + + .col { + + &.profile { + background-size: cover; + border: 1px solid #000000; + box-sizing: border-box; + padding: 0 0 33% !important; + position: relative; + + &.tell-your-story { + position: relative; + + button { + color: #acacac; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + } + } + + .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 { + 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; + } + } + } + } + } + } + } +} diff --git a/src/pages/users/users.ts b/src/pages/users/users.ts new file mode 100644 index 0000000..6c868d4 --- /dev/null +++ b/src/pages/users/users.ts @@ -0,0 +1,52 @@ +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +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-users', + templateUrl: 'users.html', + providers: [ ProfileService ] +}) +export class UsersPage { + + profiles: any; + tabNavEl: any; + + constructor(public navCtrl: NavController, public profileService: ProfileService, private _sanitizer: DomSanitizer) { + profileService.loadSubmitted().then((data) => { + this.profiles = data; + }); + this.tabNavEl = document.querySelector('#tab-nav .tabbar'); + } + + ionViewWillEnter() { + this.tabNavEl.style.display = 'flex'; + } + + doTellStory() { + this.navCtrl.push(TellYourStoryPage); + } + + getBackgroundThumbnail(pics) { + return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + pics.thumb + ')'); + } + + profilePressed(event, profile) { + if (profile.messages && profile.messages.length) { + this.navCtrl.push(ChatPage, { + profile: profile + }); + } + } + + profileTapped(event, profile) { + this.navCtrl.push(ProfilePage, { + profile: profile, + }); + } +} diff --git a/src/services/cruises.ts b/src/services/cruises.ts deleted file mode 100644 index f017d24..0000000 --- a/src/services/cruises.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Http } from '@angular/http'; -import 'rxjs/add/operator/map'; - -@Injectable() -export class CruiseService { - - endpoint: string = 'assets/data/cruises.json'; - //endpoint: string = 'https://api.fitz.guru/urge/cruises'; - idMap: any; - cruises: any; - - constructor(private http: Http) { - this.idMap = {}; - this.cruises = null; - } - - load() { - if (this.cruises) { - return Promise.resolve(this.cruises); - } - - return new Promise(resolve => { - this.http.get(this.endpoint) - .map(res => res.json()) - .subscribe(data => { - this.cruises = data; - this.cruises.reduce((map, cruise, i) => { - map[cruise._id] = i; - return map; - }, this.idMap); - resolve(this.cruises); - }); - }); - } - - getCruises() { - return this.cruises; - } - - getCruiseById(id) { - return this.cruises[this.idMap[id]]; - } -} diff --git a/src/services/profiles.ts b/src/services/profiles.ts index 6106729..572e2b2 100644 --- a/src/services/profiles.ts +++ b/src/services/profiles.ts @@ -5,11 +5,14 @@ import 'rxjs/add/operator/map'; @Injectable() export class ProfileService { - endpoint: string = 'https://api.fitz.guru/urge/profiles'; + endpoint: string = 'https://api.fitz.guru/urnings/profiles'; fallback: string = 'assets/data/profiles.json'; - idMap: any; + epSubmitted: string = '/submitted'; + epVerified: string = '/verified'; + idMap: any = { all: {}, submitted: {}, verified: {} }; profiles: any; + constructor(private http: Http) { this.idMap = {}; this.profiles = null; @@ -21,29 +24,61 @@ export class ProfileService { } return new Promise(resolve => { - this.http.get(this.endpoint) - .map(res => res.json()) - .subscribe( - data => { - this.profiles = data; - this.profiles.reduce((map, profile, i) => { - map[profile._id] = i; - return map; - }, this.idMap); - resolve(this.profiles); - }, - error => { - this.profiles = this.fallback; - this.profiles.reduce((map, profile, i) => { - map[profile._id] = i; - return map; - }, this.idMap); - resolve(this.profiles); - } - ); + this.doGetRequest(this.endpoint, resolve); }); } + loadSubmitted() { + if (this.profiles) { + return Promise.resolve(this.profiles); + } + + return new Promise(resolve => { + this.doGetRequest(this.endpoint + this.epSubmitted, resolve, 'submitted'); + }); + } + + loadVerified() { + if (this.profiles) { + return Promise.resolve(this.profiles); + } + + return new Promise(resolve => { + this.doGetRequest(this.endpoint + this.epVerified, resolve, 'verified'); + }); + } + + doGetRequest(endpoint, resolve, type = 'all') { + this.http.get(endpoint) + .map(res => res.json()) + .subscribe( + data => { + this.profiles = {}; + this.profiles[type] = data; + this.profiles.reduce((map, profile, i) => { + map[profile._id] = i; + return map; + }, this.idMap[type]); + resolve(this.profiles[type]); + }, + error => { + this.doGetRequest(this.fallback, resolve); + } + ) + } + + getNextProfile(id, type) { + var nextIdIndex = this.idMap[id] + 1; + nextIdIndex = nextIdIndex >= this.profiles.length ? 0 : nextIdIndex; + return this.profiles[nextIdIndex]; + } + + getPreviousProfile(id, type) { + var prevIdIndex = this.idMap[id] + 1; + prevIdIndex = prevIdIndex < 0 ? (this.profiles.length - 1) : prevIdIndex; + return this.profiles[prevIdIndex]; + } + getProfiles() { return this.profiles; } @@ -51,4 +86,12 @@ export class ProfileService { getProfileById(id) { return this.profiles[this.idMap[id]]; } + + getSubmittedProfiles() { + + } + + getVerifiedProfiles() { + + } }