Browse Source

Aesthetic fix

master
BinHong Lee 6 years ago
parent
commit
1a2614b4e4
Signed by: binhong <binhong@binhong.me> GPG Key ID: 6B4C5608EC620D19
5 changed files with 42 additions and 20 deletions
  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>
<html lang="en">
<html lang="en" style="margin: 0; height: 100%;">
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta charset="utf-8">
@@ -9,18 +9,20 @@
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
<title>Breakups</title>
</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>
<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>

+ 0
- 1
src/App.css View File

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

.PaymentChain {
margin-bottom: 80px;
}

.personInput {


+ 10
- 3
src/App.js View File

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

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

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

httpsPost(data, callback) {
var post_options = {
host: 'breakups.herokuapp.com',
host: 'api.breakups.life',
path: '/paymentChain',
method: 'POST',
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 (
<div className="PaymentChain">
<br/>
{payments}
<br/>
</div>
@@ -22,4 +21,4 @@ class PaymentChain extends Component {
}
}

export default PaymentChain;
export default PaymentChain;

Loading…
Cancel
Save