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

Updated some fonts and formatting. Also added an icon.

master
BinHong Lee 7 years ago
parent
87c7ed18f4
commit
e620291d9c
5 changed files with 26 additions and 24 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/favicon.png
  2. +8
    -5
      public/index.html
  3. +8
    -4
      src/App.css
  4. +5
    -6
      src/App.js
  5. +5
    -9
      src/Components/People.js

BIN
public/favicon.png View File

Before After
Width: 512  |  Height: 512  |  Size: 14 KiB

+ 8
- 5
public/index.html View File

@@ -1,15 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<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: 80px; left: 0px; top: 0px; right: 0px; color: white;">
<h1>Breakups</h1>
<header style="position: fixed; width: 100%; text-align: center; background-color: #222; height: 90px; left: 0px; top: 0px; right: 0px; color: white;">
<h1 style="-webkit-margin-before: 10px; -webkit-margin-after: 0px; font-family: 'PT Sans'">Breakups</h1>
<h4 style="-webkit-margin-before: 5px; font-family: 'PT Sans'">Split bills among multiple people.</h3>
</header> </header>
<body> <body>
<noscript> <noscript>
@@ -17,7 +19,8 @@
</noscript> </noscript>
<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: 60px; 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 style="position: fixed; bottom: 0px; left: 0px; text-align: center; width:100%; background-color: #222; height: 85px; color: white;">
<h3 style="-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="-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>

+ 8
- 4
src/App.css View File

@@ -1,9 +1,13 @@
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

.App { .App {
font-family: 'Titillium Web';
margin-top: 100px; margin-top: 100px;
text-align: center; text-align: center;
} }


.Forms { .Forms {
font-family: 'Titillium Web';
align-content: center; align-content: center;
align-items: center; align-items: center;
align-self: center; align-self: center;
@@ -11,11 +15,11 @@
} }


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


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

+ 5
- 6
src/App.js View File

@@ -17,16 +17,15 @@ class App extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<h3>Easy way to split bills among multiple people.</h3>
<div className="Forms"> <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 className="Main-form" onSubmit={this.populatePeople.bind(this)} style={{height: '30px'}}>
Number of people: <input type="text" ref="noOfPeople" style={{width: 30}}/> <input type="submit" value="Submit"/>
</form> </form>
<br/>
<div className="Peoples"> <div className="Peoples">
{this.state.peoples} {this.state.peoples}
</div> </div>
</div> </div>
<br/>
{this.state.actionButtons} {this.state.actionButtons}
<PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} /> <PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
</div> </div>
@@ -73,7 +72,7 @@ class App extends Component {
actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>); actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
this.setState({peoples:peoples, info:info, actionButtons:actionButtons}); this.setState({peoples:peoples, info:info, actionButtons:actionButtons});
} }
e.preventDefault(); e.preventDefault();
} }


@@ -93,7 +92,7 @@ class App extends Component {
'Content-Length': Buffer.byteLength(JSON.stringify(data)) 'Content-Length': Buffer.byteLength(JSON.stringify(data))
} }
}; };
var post_req = https.request(post_options, res => { var post_req = https.request(post_options, res => {
res.setEncoding('utf8'); res.setEncoding('utf8');
var returnData = ""; var returnData = "";


+ 5
- 9
src/Components/People.js View File

@@ -3,21 +3,17 @@ import React, { Component } from 'react';
class People extends Component { class People extends Component {
constructor() { constructor() {
super(); super();
this.state = {
space: `\t`
}
} }


render() { render() {
return ( return (
<div className="People"> <div className="People">
Person {this.props.people}<br/>
<p style={{'line-height': '0.5em'}}>Person {this.props.people} <br/></p>
<form style={{textAlign:'left'}}> <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/>
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/>
</form> </form>
<br/>
</div> </div>
); );
} }
@@ -36,4 +32,4 @@ class People extends Component {
} }
} }


export default People;
export default People;

Write Preview
Loading…
Cancel
Save