Переглянути джерело

Updated some fonts and formatting. Also added an icon.

master
BinHong Lee 6 роки тому
джерело
коміт
e620291d9c
5 змінених файлів з 26 додано та 24 видалено
  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 Переглянути файл

Перед Після
Ширина: 512  |  Висота: 512  |  Розмір: 14 KiB

+ 8
- 5
public/index.html Переглянути файл

@@ -1,15 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<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>
</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>
<body>
<noscript>
@@ -17,7 +19,8 @@
</noscript>
<div id="root"></div>
</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>
</html>

+ 8
- 4
src/App.css Переглянути файл

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

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

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

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

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

+ 5
- 6
src/App.js Переглянути файл

@@ -17,16 +17,15 @@ class App extends Component {
render() {
return (
<div className="App">
<h3>Easy way to split bills among multiple people.</h3>
<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>
<br/>
<div className="Peoples">
{this.state.peoples}
</div>
</div>
<br/>
{this.state.actionButtons}
<PaymentChain className="PaymentChain" paymentChain={this.state.paymentChain} />
</div>
@@ -73,7 +72,7 @@ class App extends Component {
actionButtons.push(<input key="email" type="submit" value="Send email reminder (non-functional yet)"/>);
this.setState({peoples:peoples, info:info, actionButtons:actionButtons});
}
e.preventDefault();
}

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


+ 5
- 9
src/Components/People.js Переглянути файл

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

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

export default People;
export default People;

Завантаження…
Відмінити
Зберегти