Style card nav buttons

nolan-m · Jan 15, 2016 · 683a6bb · 683a6bb
1 parent b8544c3
commit 683a6bb
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -9,4 +9,5 @@ There are a few dependencies. Please run the following commands in the project f
 Then run it using:
 * npm start
 
-Navigate to http://localhost:3333 to view the app
+Navigate to http://localhost:3333 to view the app
+
diff --git a/components/Card.js b/components/Card.js
@@ -21,18 +21,18 @@ var Card = React.createClass({
       <div style={this.styles.card}>
         { this.state.editMode ? 
           <div>
-            <input ref='taskInput' value={this.props.task} onChange={this.changeTaskValue}></input>
+            <input style={this.styles.taskInput} ref='taskInput' value={this.props.task} onChange={this.changeTaskValue}></input>
             <div>
-              <button onClick={this.toggleEdit}>Done</button>
+              <button style={this.styles.editButton} onClick={this.toggleEdit}>Done</button>
             </div>
           </div>
           :
           <div>
-            <p style={this.styles.task}>{this.props.task}</p>
-            <div>
-              <button onClick={this.moveToColumn.bind(this, this.props.columnIndex - 1)}>Move to Previous</button>
-              <button onClick={this.moveToColumn.bind(this, this.props.columnIndex + 1)}>Move to Next</button>
-              <button onClick={this.toggleEdit}>Edit</button>
+            <div style={this.styles.task}><span style={this.styles.click} onClick={this.toggleEdit}>{this.props.task}</span></div>
+
+            <div style={this.styles.navContainer}>
+              <button style={this.styles.navPrevButton} onClick={this.moveToColumn.bind(this, this.props.columnIndex - 1)}>Move to Previous</button>
+              <button style={this.styles.navNextButton} onClick={this.moveToColumn.bind(this, this.props.columnIndex + 1)}>Move to Next</button>
             </div>
           </div>
         }
@@ -73,12 +73,44 @@ var Card = React.createClass({
       width: 250,
       padding: 15,
       marginBottom: 10,
-      background: '#F2F2F2'
+      background: '#F2F2F2',
+      display: 'inline-block'
     },
     task: {
       fontWeight: 700,
       margin: 5,
       fontSize: 18
+    },
+    taskInput: {
+      width: '100%',
+      marginBottom: 10
+    },
+    click: {
+      cursor: 'pointer'
+    },
+    editButton: {
+      float: 'right',
+      height: 24,
+      fontSize: 12,
+      padding: 5,
+      cursor: 'pointer'
+    },
+    navContainer: {
+      marginTop: 20
+    },
+    navPrevButton: {
+      float: 'left',
+      height: 24,
+      fontSize: 12,
+      padding: 5,
+      cursor: 'pointer'
+    },
+    navNextButton: {
+      float: 'right',
+      height: 24,
+      fontSize: 12,
+      padding: 5,
+      cursor: 'pointer'
     }
   }