Add some styling to make layout sane

diff --git a/package.json b/package.json
index 47dd2fa3427505a1b1332d4efa408b6a2f905762..b960db7a80c7e9c1fdae47f8a01b64bd618a7a16 100644 (file)
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "babel-core": "^5.4.7",
     "babel-eslint": "^3.1.9",
     "babel-loader": "^5.1.2",
+    "css-loader": "^0.15.6",
     "eslint-plugin-react": "^2.3.0",
     "expect": "^1.8.0",
     "gulp": "^3.9.0",
@@ -35,6 +36,7 @@
     "mocha": "^2.2.5",
     "react-hot-loader": "^1.2.7",
     "sinon": "^1.15.4",
+    "style-loader": "^0.12.3",
     "webpack": "^1.9.6",
     "webpack-dev-server": "^1.8.2"
   },

diff --git a/src/App.css b/src/App.css
new file mode 100644 (file)
index 0000000..c5cca08
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,22 @@
+body {
+  font-family: 'Courier New';
+}
+
+.hextrapolate-input {
+  flex-grow: 5;
+  font-family: monaco;
+  font-size: 12px;
+}
+
+.hextrapolate-label {
+  display: flex;
+  padding: 8px;
+}
+
+.hextrapolate-label-text {
+  flex-basis: 0;
+  flex-grow: 1;
+  font-size: 12px;
+  padding-right: 12px;
+  text-align: right;
+}

diff --git a/src/App.js b/src/App.js
index 87ca53fc3b4cc2421a447dd151400c7a9c3695b6..259457f986d7c317263f054c4d5e9976e01d290b 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,9 @@
 
 import React from 'react';
 import Field from './Field.react';
+import Label from './Label.react';
+
+require('./App.css');
 
 export default class App extends React.Component {
   constructor(props) {
@@ -24,39 +27,35 @@ export default class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="hextrapolate">
         <h1>Hextrapolate</h1>
-        <label>
-          Hexadecimal
+        <Label text="Hexadecimal">
           <Field
             base={16}
             onValueChange={this._onValueChange}
             value={this.state.value}
           />
-        </label>
-        <label>
-          Decimal
+        </Label>
+        <Label text="Decimal">
           <Field
             onValueChange={this._onValueChange}
             value={this.state.value}
           />
-        </label>
-        <label>
-          Octal
+        </Label>
+        <Label text="Octal">
           <Field
             base={8}
             onValueChange={this._onValueChange}
             value={this.state.value}
           />
-        </label>
-        <label>
-          Binary
+        </Label>
+        <Label text="Binary">
           <Field
             base={2}
             onValueChange={this._onValueChange}
             value={this.state.value}
           />
-        </label>
+        </Label>
       </div>
     );
   }

diff --git a/src/Field.react.js b/src/Field.react.js
index 4dab605085aa8ef4b348bebf245bc1c7525b94c9..4cd7d470daceadb0e0ffb0b118f8fcc3ffcbf51f 100644 (file)
--- a/src/Field.react.js
+++ b/src/Field.react.js
@@ -74,6 +74,7 @@ export default class Field extends React.Component {
   render() {
     return (
       <input
+        className="hextrapolate-input"
         onChange={this._onChange}
         type="text"
         value={fromValue(this.props.value, this.props.base)}

diff --git a/src/Label.react.js b/src/Label.react.js
new file mode 100644 (file)
index 0000000..a2abcaa
--- /dev/null
+++ b/src/Label.react.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2015-present Greg Hurrell. All rights reserved.
+ * Licensed under the terms of the MIT license.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import React from 'react';
+
+export default class Label extends React.Component {
+  static propTypes = {
+    text: React.PropTypes.string.required,
+  };
+
+  render() {
+    return (
+      <label className="hextrapolate-label">
+        <span className="hextrapolate-label-text">
+          {this.props.text}
+        </span>
+        {this.props.children}
+      </label>
+    );
+  }
+}

diff --git a/webpack.config.js b/webpack.config.js
index b3bf729799a949325d1b9d999ebd8ca2ecc9e649..e3e500943f87b7105f5d6ef53ffdd8f811bf33c7 100644 (file)
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,6 +32,8 @@ module.exports = {
       test: /\.jsx?$/,
       loaders: ['react-hot', 'babel'],
       include: path.join(__dirname, 'src')
-    }]
+    }, {
+      test: /\.css$/, loader: 'style-loader!css-loader',
+    }],
   }
 };