Fixed non-webkit UI

преди 6 години · c4c10b5087
--- a/public/index.html
+++ b/public/index.html
@@ -10,8 +10,8 @@
    <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="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>
  <body>
    <noscript>
@@ -20,7 +20,7 @@
    <div id="root"></div>
  </body>
  <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>
 </html>
--- a/src/App.css
+++ b/src/App.css
@@ -23,3 +23,18 @@
 .PaymentChain {
    margin-bottom: 80px;
 }

 .personInput {
    float: right;
    width: 100px;
    height: 0.9em;
 }

 p {
    margin: 0px;
 }

 .personNum {
    line-height: 0.5em;
    margin: 10px;
 }
--- a/src/Components/People.js
+++ b/src/Components/People.js
@@ -4,11 +4,11 @@ class People extends Component {
    render() {
        return (
            <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'}}>
                    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>
            </div>
        );