3 changed files with 23 additions and 8 deletions
Unified View
Diff Options
-
+4 -4public/index.html
-
+15 -0src/App.css
-
+4 -4src/Components/People.js
+ 4
- 4
public/index.html
View File
| @@ -10,8 +10,8 @@ | |||||
| <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;"> | <header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;"> | ||||
| <h1 style="top: 10px; bottom: 0px; -webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1> | |||||
| <h4 style="top: 5px; -webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3> | |||||
| <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> | </header> | ||||
| <body> | <body> | ||||
| <noscript> | <noscript> | ||||
| @@ -20,7 +20,7 @@ | |||||
| <div id="root"></div> | <div id="root"></div> | ||||
| </body> | </body> | ||||
| <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;"> | <footer style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;"> | ||||
| <h3 style="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="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> | |||||
| <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> | </footer> | ||||
| </html> | </html> | ||||
+ 15
- 0
src/App.css
View File
| @@ -23,3 +23,18 @@ | |||||
| .PaymentChain { | .PaymentChain { | ||||
| margin-bottom: 80px; | margin-bottom: 80px; | ||||
| } | } | ||||
| .personInput { | |||||
| float: right; | |||||
| width: 100px; | |||||
| height: 0.9em; | |||||
| } | |||||
| p { | |||||
| margin: 0px; | |||||
| } | |||||
| .personNum { | |||||
| line-height: 0.5em; | |||||
| margin: 10px; | |||||
| } | |||||
+ 4
- 4
src/Components/People.js
View File
| @@ -4,11 +4,11 @@ class People extends Component { | |||||
| render() { | render() { | ||||
| return ( | return ( | ||||
| <div className="People"> | <div className="People"> | ||||
| <p style={{'line-height': '0.5em'}}>Person {this.props.people} <br/></p> | |||||
| <p className="personNum">Person {this.props.people} <br/></p> | |||||
| <form style={{textAlign:'left'}}> | <form style={{textAlign:'left'}}> | ||||
| Name: <input type = "text" ref="name" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/> | |||||
| Email: <input type = "text" ref="email" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/> | |||||
| Amount: <input type = "text" ref="amount" onBlur={this.updateProps.bind(this)} style={{float:'right', width: 100}}/><br/> | |||||
| <p>Name: <input className="personInput" type = "text" ref="name" onBlur={this.updateProps.bind(this)}/><br/></p> | |||||
| <p>Email: <input className="personInput" type = "text" ref="email" onBlur={this.updateProps.bind(this)}/><br/></p> | |||||
| <p>Amount: <input className="personInput" type = "text" ref="amount" onBlur={this.updateProps.bind(this)}/><br/></p> | |||||
| </form> | </form> | ||||
| </div> | </div> | ||||
| ); | ); | ||||