Ver a proveniência

UI enhancement

master
BinHong Lee há 7 anos
ascendente
cometimento
916884ccf8
5 ficheiros alterados com 68 adições e 18 eliminações
  1. +3
    -0
      public/index.html
  2. +31
    -0
      src/App.css
  3. +20
    -13
      src/App.js
  4. +2
    -0
      src/Components/PaymentChain.js
  5. +12
    -5
      src/Components/People.js

+ 3
- 0
public/index.html Ver ficheiro

@@ -14,4 +14,7 @@
</noscript>
<div id="root"></div>
</body>
<footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 80px; color: white;">
<h3>Made by <a href="https://binhonglee.github.io/" style="color:#04B45F">@binhonglee</a>. Fork this on <a href="https://github.com/binhonglee/breakups-webapp" style="color:cyan">GitHub</a>.</h5>
</footer>
</html>

+ 31
- 0
src/App.css Ver ficheiro

@@ -0,0 +1,31 @@
.App {
text-align: center;
}

.App-header {
background-color: #222;
height: 80px;
padding: 10px;
color: white;
}

.App-title {
font-size: 1.5em;
}

.Forms {
align-content: center;
align-items: center;
align-self: center;
text-align: center;
}

.Peoples {
max-width: 250px;
line-height: 1.8em;
margin: 0 auto;
}

.PaymentChain {
margin-bottom: 130px;
}

+ 20
- 13
src/App.js Ver ficheiro

@@ -9,23 +9,29 @@ class App extends Component {
this.state = {
peoples: [],
info: [],
paymentChain: []
paymentChain: [],
actionButtons:[]
}
}

render() {
return (
<div className="App">
<h1>Breakups</h1>
<header className="App-header">
<h1>Breakups</h1>
</header>
<h3>Easy way to split bills among multiple people.</h3>
<form onSubmit={this.populatePeople.bind(this)}>
Number of people: <input type="text" ref="noOfPeople"/> <input type="submit" value="Submit" />
</form>
<br/>
{this.state.peoples}
<br/>
<PaymentChain paymentChain={this.state.paymentChain} />
<br/>
<div className="Forms">
<form className="Main-form" onSubmit={this.populatePeople.bind(this)}>
Number of people: <input type="text" ref="noOfPeople"/> <input type="submit" value="Submit" />
</form>
<br/>
<div className="Peoples">
{this.state.peoples}
</div>
</div>
{this.state.actionButtons}
<PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
</div>
);
}
@@ -65,9 +71,10 @@ class App extends Component {
peoples.push(<People key={i} id={i} people={(i+1)} info={this.updateInfo.bind(this)} />);
}

peoples.push(<input key="paymentChain" type="submit" value="Get Payment Chain" onClick={this.getPaymentChain.bind(this)}/>);
peoples.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
this.setState({peoples:peoples, info:info});
let actionButtons = []
actionButtons.push(<input key="paymentChain" type="submit" value="Get Payment Chain" onClick={this.getPaymentChain.bind(this)}/>);
actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
this.setState({peoples:peoples, info:info, actionButtons:actionButtons});
}
e.preventDefault();


+ 2
- 0
src/Components/PaymentChain.js Ver ficheiro

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

return (
<div className="PaymentChain">
<br/>
{payments}
<br/>
</div>
);
}


+ 12
- 5
src/Components/People.js Ver ficheiro

@@ -1,14 +1,21 @@
import React, { Component } from 'react';

class People extends Component {
constructor() {
super();
this.state = {
space: `\t`
}
}

render() {
return (
<div className="People">
<form className="form">
Person {this.props.people}<br/>
Name: <input type = "text" ref="name" onBlur={this.updateProps.bind(this)}/><br/>
Email: <input type = "text" ref="email" onBlur={this.updateProps.bind(this)}/><br/>
Amount: <input type = "text" ref="amount" onBlur={this.updateProps.bind(this)}/><br/>
Person {this.props.people}<br/>
<form style={{textAlign:'left'}}>
Name:{this.state.space}<input type = "text" ref="name" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
Email:{this.state.space}<input type = "text" ref="email" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
Amount:{this.state.space}<input type = "text" ref="amount" onBlur={this.updateProps.bind(this)} style={{float:'right'}}/><br/>
</form>
<br/>
</div>


Carregando…
Cancelar
Guardar