mifi/looking-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making it match the real thing... Well, more so than before...

Browse Source
This commit is contained in:
Mike Fitzpatrick
2018-03-07 00:05:54 -05:00
parent 6e756e0792
commit 7d5bf0f7ee
15 changed files with 175 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -20,9 +20,9 @@
"@angular/http": "5.0.3", "@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3", "@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0", "@ionic-native/core": "4.5.3",
"@ionic-native/splash-screen": "4.4.0", "@ionic-native/splash-screen": "4.5.3",
"@ionic-native/status-bar": "4.4.0", "@ionic-native/status-bar": "4.5.3",
"@ionic/storage": "2.1.3", "@ionic/storage": "2.1.3",
"ionic-angular": "3.9.2", "ionic-angular": "3.9.2",
"ionic-swipe-all": "^1.2.0", "ionic-swipe-all": "^1.2.0",

15
src/app/app.scss
View File

@@ -65,3 +65,18 @@ ion-title {
} }
} }
} }
@media screen and (min-width: 769px) {
body {
background-color: #000000;
}
ion-app.app-root {
height: 0;
margin: 50% auto auto 50%;
max-width: 320px;
padding-bottom: 66.666%;
position: relative;
transform: translate3d(-50%, -50%, 0);
}
}

49
src/desktop.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Urge</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Groundr</title> <title>Urge</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">

4
src/pages/chat/chat.html
View File

@@ -6,7 +6,7 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title><img [src]="this.profile.details.pic.thumb" height="24" width="24"> {{this.profile.details.name}}</ion-title> <ion-title><img class="title-profile-avatar" [src]="'https://appsby.fitz.guru/urge/' + this.profile.details.pic.thumb" height="24" width="24"> {{this.profile.details.name}}</ion-title>
<!--ion-buttons right> <!--ion-buttons right>
<button ion-button icon-only> <button ion-button icon-only>
@@ -19,7 +19,7 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-item class="message-bubble" *ngFor="let message of this.profile.messages" [ngClass]="{ 'is-user': (message.isUser == true) }"> <ion-item class="message-bubble" *ngFor="let message of this.profile.messages" [ngClass]="{ 'is-user': (message.isUser == true) }">
<img *ngIf="message.image" [src]="message.image" (press)="showLightbox($event, message.image)"> <img *ngIf="message.image" [src]="'https://appsby.fitz.guru/urge/' + message.image" (press)="showLightbox($event, message.image)">
<p *ngIf="message.text != ''">{{message.text}}</p> <p *ngIf="message.text != ''">{{message.text}}</p>
</ion-item> </ion-item>
</ion-list> </ion-list>

76
src/pages/chat/chat.scss
View File

@@ -1,14 +1,72 @@
page-chat { page-chat {
.message-bubble { .toolbar-title {
background-color: #000fff;
color: #000000; .title-profile-avatar {
max-width: 75%; vertical-align: bottom;
padding: 0.75rem; }
}
&.is-user {
background-color: #fff000; .list {
margin: 1rem 0 1rem auto;
.message-bubble {
background-color: #6fbedf;
border-radius: 0.5rem;
margin: 1rem auto 2.5rem 1rem;
max-width: 75%;
overflow: visible;
padding: 0.75rem;
position: relative;
&::after {
border: 0.625em solid transparent;
border-bottom: 0;
border-left: 0;
border-top-color: #6fbedf;
bottom: 0;
content: '';
height: 0;
left: 2rem;
margin-bottom: -0.625em;
margin-left: -0.312em;
position: absolute;
width: 0;
}
&.is-user {
background-color: #fdb315;
margin: 1rem 1rem 2.5rem auto;
&::after {
border: 0.625em solid transparent;
border-bottom: 0;
border-right: 0;
border-top-color: #fdb315;
left: auto;
margin-bottom: -0.625em;
margin-right: -0.312em;
right: 2rem;
}
}
.item-inner {
border-bottom: none;
}
ion-label {
overflow: visible;
text-overflow: unset;
margin: 0 0.75rem;
}
p {
color: #1d1e1f;
white-space: normal;
&.timestamp {
color: #acacac;
}
}
} }
} }
} }

2
src/pages/grid/grid.html
View File

@@ -1,5 +1,5 @@
<ion-content no-padding> <ion-content no-padding>
<ion-grid> <ion-grid no-padding>
<ion-row align-items-stretch> <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)"></ion-col>
</ion-row> </ion-row>

2
src/pages/grid/grid.scss
View File

@@ -6,7 +6,7 @@ page-grid {
background-size: cover; background-size: cover;
border: 1px solid #000000; border: 1px solid #000000;
box-sizing: border-box; box-sizing: border-box;
padding: 0 0 33%; padding: 0 0 33% !important;
} }
} }
} }

2
src/pages/lightbox/lightbox.html
View File

@@ -9,5 +9,5 @@
</ion-header> </ion-header>
<ion-content (click)="close($event)"> <ion-content (click)="close($event)">
<img [src]="this.image"> <img class="image-detail" [src]="'https://appsby.fitz.guru/urge/' + this.image">
</ion-content> </ion-content>

8
src/pages/lightbox/lightbox.scss
View File

@@ -1,3 +1,11 @@
page-lightbox { page-lightbox {
.image-detail {
display: block;
height: auto;
position: relative;
top: 50%;
transform: translate3d(0, -50%, 0);
width: 100%;
}
} }

8
src/pages/messages/messages.html
View File

@@ -17,16 +17,16 @@
<ion-list> <ion-list>
<ion-item no-padding *ngFor="let profile of profiles"> <ion-item no-padding *ngFor="let profile of profiles">
<ion-thumbnail item-start (tap)="profilePictureTapped($event, profile)"> <ion-thumbnail item-start (tap)="profilePictureTapped($event, profile)">
<img [src]="profile.details.pic.thumb"> <img [src]="'https://appsby.fitz.guru/urge/' + profile.details.pic.thumb">
</ion-thumbnail> </ion-thumbnail>
<ion-grid (tap)="interviewTapped($event, profile)"> <ion-grid (tap)="interviewTapped($event, profile)">
<ion-row nowrap justify-content-between> <ion-row nowrap justify-content-between>
<ion-col> <ion-col class="username">
{{profile.details.name}} {{profile.details.name}}
</ion-col> </ion-col>
<ion-col [innerHTML]="getLatestMessageTimestamp(profile.messages)"></ion-col> <ion-col class="timestamp" [innerHTML]="getLatestMessageTimestamp(profile.messages)"></ion-col>
</ion-row> </ion-row>
<ion-row nowrap> <ion-row class="latest-message" nowrap>
<ion-col [innerHTML]="getLatestMessage(profile.messages)"></ion-col> <ion-col [innerHTML]="getLatestMessage(profile.messages)"></ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

13
src/pages/messages/messages.scss
View File

@@ -1,3 +1,16 @@
page-messages { page-messages {
.col {
color: #acacac;
&.username {
font-size: 0.8em;
}
&.timestamp {
font-size: 0.7em;
font-style: italic;
text-align: right;
}
}
} }

2
src/pages/profile/profile.html
View File

@@ -13,7 +13,7 @@
</ion-buttons--> </ion-buttons-->
</ion-toolbar> </ion-toolbar>
<div id="detail-overlay" class="details" swipeAll (swipedown)="closeProfileDetails($event)" (swipeup)="openProfileDetails($event)"> <div id="detail-overlay" class="details" swipeAll (swipedown)="closeProfileDetails($event)" (swipeup)="openProfileDetails($event)" (click)="toggleProfileDetails($event)">
<ion-grid> <ion-grid>
<ion-row nowrap align-items-center justify-content-between> <ion-row nowrap align-items-center justify-content-between>
<ion-col col-8> <ion-col col-8>

2
src/pages/profile/profile.scss
View File

@@ -20,7 +20,7 @@ page-profile {
.details { .details {
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
bottom: 0; bottom: 0;
height: 75px; height: 60px;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;

8
src/pages/profile/profile.ts
View File

@@ -57,4 +57,12 @@ export class ProfilePage {
}); });
} }
} }
toggleProfileDetails(event) {
if (!this.detailsOpen) {
this.openProfileDetails(event);
} else {
this.closeProfileDetails(event);
}
}
} }