Add css styles

pel-daniel · pel-daniel · commit 60feb86ff455 · 2015-11-19T00:56:46.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 node_modules/
 npm-debug.log
-dist/
-!dist/index.html
+dist/app.js
diff --git a/dist/index.html b/dist/index.html
@@ -1,6 +1,9 @@
 <html>
 	<head>
 		<title>Lambda Blocks</title>
+		<meta charset="UTF-8">
+
+		<link rel="stylesheet" type="text/css" href="styles.css">
 	</head>
 	<body>
 		<div id="main">
diff --git a/dist/styles.css b/dist/styles.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #main {
+  height: 100%;
+}
diff --git a/src/components/Library.js b/src/components/Library.js
@@ -1,12 +1,19 @@
 import React, { PropTypes, Component } from 'react'
 import Module from './Module'
 
+const styles = {
+  float: 'left',
+  height: '100%',
+  width: '250px',
+  overflow: 'auto'
+}
+
 export default class Library extends Component {
   render() {
     const { isFetching, items } = this.props
 
     return (
-      <div>
+      <div style={ styles }>
         <h2>Library</h2>
         { isFetching &&
           <h3>Loading...</h3>
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -3,6 +3,10 @@ import { connect } from 'react-redux'
 import { fetchLibraryIfNeeded, invalidateLibrary } from '../actions'
 import Library from '../components/Library'
 
+const styles = {
+  height: '100%'
+}
+
 class App extends Component {
   constructor(props) {
     super(props)
@@ -16,7 +20,7 @@ class App extends Component {
   render() {
     const { library } = this.props
     return (
-      <div>
+      <div style={ styles }>
         <Library { ...library } />
       </div>
     )
