binhong
/
breakups-webapp
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Aesthetic fix

master
BinHong Lee 6 years ago
parent
c4c10b5087
commit
1a2614b4e4
Signed by: binhong <binhong@binhong.me> GPG Key ID: 6B4C5608EC620D19
5 changed files with 42 additions and 20 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -14
      public/index.html
  2. +0
    -1
      src/App.css
  3. +10
    -3
      src/App.js
  4. +15
    -0
      src/Components/Message.js
  5. +1
    -2
      src/Components/PaymentChain.js

+ 16
- 14
public/index.html View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<html lang="en" style="margin: 0; height: 100%;">
<head> <head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
@@ -9,18 +9,20 @@
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<title>Breakups</title> <title>Breakups</title>
</head> </head>
<header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;">
<h1 style="margin-top: 10px; margin-bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
<h4 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
</header>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<body style="margin: 0; height: 100%;">
<header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;">
<h1 style="margin-top: 10px; margin-bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
<h4 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
</header>
<main style="min-height: 100%; margin-top: -90px; padding-top: 90px; box-sizing: border-box;">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</main>
<footer style="padding-top: 3px; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;">
<h3 style="margin-bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3>
<h5 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik" style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5>
</footer>
</body> </body>
<footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;">
<h3 style="margin-bottom: 0px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a></h3>
<h5 style="margin-top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Icons made by <a href="http://www.freepik.com" title="Freepik" style="color:cyan">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon" style="color:cyan">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank" style="color:cyan">CC 3.0 BY</a></h5>
</footer>
</html> </html>

+ 0
- 1
src/App.css View File

@@ -21,7 +21,6 @@
} }


.PaymentChain { .PaymentChain {
margin-bottom: 80px;
} }


.personInput { .personInput {


+ 10
- 3
src/App.js View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import People from './Components/People'; import People from './Components/People';
import PaymentChain from './Components/PaymentChain'; import PaymentChain from './Components/PaymentChain';
import Message from './Components/Message';
import './App.css'; import './App.css';
var https = require('https'); var https = require('https');
class App extends Component { class App extends Component {
@@ -10,7 +11,8 @@ class App extends Component {
peoples: [], peoples: [],
info: [], info: [],
paymentChain: [], paymentChain: [],
actionButtons:[]
actionButtons:[],
showResults:false
} }
} }


@@ -27,7 +29,8 @@ class App extends Component {
</div> </div>
<br/> <br/>
{this.state.actionButtons} {this.state.actionButtons}
<PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
{this.state.showResults ? <Message /> : <PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} /> }
<br/>
</div> </div>
); );
} }
@@ -47,10 +50,14 @@ class App extends Component {
users.push(user); users.push(user);
} }
request.users = users; request.users = users;
let existingState = this.state;
existingState.showResults = true;
this.setState(existingState);


this.httpsPost(request, result => { this.httpsPost(request, result => {
let existingState = this.state; let existingState = this.state;
existingState.paymentChain = JSON.parse("[" + result + "]")[0]; existingState.paymentChain = JSON.parse("[" + result + "]")[0];
existingState.showResults = false;
this.setState(existingState); this.setState(existingState);
}) })
} }
@@ -84,7 +91,7 @@ class App extends Component {


httpsPost(data, callback) { httpsPost(data, callback) {
var post_options = { var post_options = {
host: 'breakups.herokuapp.com',
host: 'api.breakups.life',
path: '/paymentChain', path: '/paymentChain',
method: 'POST', method: 'POST',
headers: { headers: {


+ 15
- 0
src/Components/Message.js View File

@@ -0,0 +1,15 @@
import React, { Component } from 'react';

class Message extends Component {
render() {
return (
<div className="Message">
<br/>
Calculating...
<br/>
</div>
)
}
}

export default Message;

+ 1
- 2
src/Components/PaymentChain.js View File

@@ -14,7 +14,6 @@ class PaymentChain extends Component {


return ( return (
<div className="PaymentChain"> <div className="PaymentChain">
<br/>
{payments} {payments}
<br/> <br/>
</div> </div>
@@ -22,4 +21,4 @@ class PaymentChain extends Component {
} }
} }


export default PaymentChain;
export default PaymentChain;

Write Preview
Loading…
Cancel
Save