figbertmath

commit b7ad8ca2fce76a46feaac12785e156b447134633
parent 6e3b57f44767b8a58f742da5207934ccdd65dc66
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Fri, 22 Nov 2019 17:55:24 -0800

Add initial basic pad, migrating Tomorrow import into index.css

Diffstat:
M
src/components/App.css
 | 
38
+++++++++++++++++++++++++++++++-------
M
src/components/App.js
 | 
2
++
M
src/components/calcButton.js
 | 
48
++++++++++++++++++++++++++++++++++++++++++++++--
M
src/index.css
 | 
9
++++++++-

4 files changed, 87 insertions(+), 10 deletions(-)
diff --git a/src/components/App.css b/src/components/App.css
@@ -1,8 +1,3 @@
-@font-face {
-    font-family: Tomorrow;
-    src: url("font/Tomorrow-Regular.ttf");
-}
-
 .calc {
     background: #ac1a2d;
     color: rgba(255, 255, 255, .7);
@@ -10,10 +5,39 @@
 }
 
 .calc__out {
+    width: 10vw;
+    height: 5vh;
     font-size: xx-large;
     text-align: right;
-    line-height: 75%;
+    line-height: 50%;
     padding: 3vh 10vw 3vh 10vw;
     border: 1vw solid #1d1d1d;
-    border-radius: 1.5vw;
+    border-top-left-radius: 1.5vw;
+    border-top-right-radius: 1.5vw;
+}
+
+.calc__pad {
+    height: 75vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    border-bottom-left-radius: 1.5vw;
+    border-bottom-right-radius: 1.5vw;
+}
+
+.calc__row {
+    background-color: #1d1d1d;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.calc__button {
+    width: 6vw;
+    height: 12vh;
+    font-size: x-large;
+    text-align: center;
+    border-radius: 25%;
 }
 \ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import { CalcOut } from "./calcOut";
+import { BasicPad } from "./calcButton";
 
 export class App extends React.Component {
   constructor(props) {
@@ -16,6 +17,7 @@ export class App extends React.Component {
     return (
         <div>
           <CalcOut output={this.state.output} input={this.state.input} />
+          <BasicPad />
         </div>
     );
   }
diff --git a/src/components/calcButton.js b/src/components/calcButton.js
@@ -3,18 +3,62 @@ import PropTypes from 'prop-types';
 import './App.css'
 
 export class CalcButton extends React.Component {
+    buttonFlex = {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        fontSize: '3vw'
+    };
+
     render() {
         return (
-            <div className='calc calc__button'>
+            <div style={this.buttonFlex} className='calc calc__button'>
                 {this.props.value}
             </div>
         );
     }
 }
-
 CalcButton.propTypes = {
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number
     ]).isRequired
 };
+
+export class BasicPad extends React.Component {
+    render() {
+        return (
+            <div className='calc calc__pad' style={{background: '#1d1d1d'}}>
+                <div className='calc calc__row'>
+                    <CalcButton value={'AC'} />
+                    <CalcButton value={'±'} />
+                    <CalcButton value={'%'} />
+                    <CalcButton value={'÷'} />
+                </div>
+                <div className='calc calc__row'>
+                    <CalcButton value={'7'} />
+                    <CalcButton value={'8'} />
+                    <CalcButton value={'9'} />
+                    <CalcButton value={'×'} />
+                </div>
+                <div className='calc calc__row'>
+                    <CalcButton value={'4'} />
+                    <CalcButton value={'5'} />
+                    <CalcButton value={'6'} />
+                    <CalcButton value={'–'} />
+                </div>
+                <div className='calc calc__row'>
+                    <CalcButton value={'1'} />
+                    <CalcButton value={'2'} />
+                    <CalcButton value={'3'} />
+                    <CalcButton value={'+'} />
+                </div>
+                <div className='calc calc__row'>
+                    <CalcButton style={{flexGrow: 2}} value={'0'} />
+                    <CalcButton value={'.'} />
+                    <CalcButton value={'='} />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,12 @@
+@font-face {
+    font-family: Tomorrow;
+    src: url("components/font/Tomorrow-Regular.ttf");
+}
+
 body {
-    width: 100%;
+    width: 100vw;
+    height: 100vh;
+    margin: 2vh 0 0;
     background: #7e1221;
     font-family: -apple-system, sans-serif;
     display: flex;