Aesthetic fix

před 6 roky · 1a2614b4e4
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/src/App.css
+++ b/src/App.css
@@ -21,7 +21,6 @@
 }

 .PaymentChain {
    margin-bottom: 80px;
 }

 .personInput {
--- a/src/App.js
+++ b/src/App.js
@@ -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: {
--- a/src/Components/Message.js
+++ b/src/Components/Message.js
@@ -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;
--- a/src/Components/PaymentChain.js
+++ b/src/Components/PaymentChain.js
@@ -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;