adding temporary input in reactux comp.

1 files changed, 20 insertions, 13 deletions

diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js
index b503f21f8..6a9599812 100644
--- a/app/assets/javascripts/es6_browserified/components/Todo.js
+++ b/app/assets/javascripts/es6_browserified/components/Todo.js
@@ -1,36 +1,43 @@
 var React = require('react')
 var PropTypes = require('react').PropTypes
 
-const firstBlock = {display: 'inline-block', verticalAlign: 'middle', width: '75%'}
-const secondBlock = {display: 'inline-block', verticalAlign: 'middle', width: '25%', textAlign: 'right'}
+const Container = {display: 'table',  width: '100%'}
+const firstBlock = {display: 'table-cell', verticalAlign: 'middle'}
+const secondBlock = {display: 'table-cell', verticalAlign: 'middle', width: '150px', textAlign: 'right'}
 
 const Todo = (props)  => (
-  <div className="list-group-item">
+  <div className='list-group-item' style={Container}>
     <div style={firstBlock}>
-      <em className="small">{props.id}</em>
+      <div style={{display: 'inline-block', width: '9%'}}>
+        <span className='strong'>Id: {props.id}</span>
+      </div>
+      <div style={{display: 'inline-block', width: '91%'}}>
+        <input type='text' className='form-control' id={'route_stop_points_' + props.id}/>
+      </div>
     </div>
+
     <div style={secondBlock}>
-      <div className="btn-group btn-group-sm">
-        <div className="btn btn-default">
-          <span className="fa fa-times"></span>
+      <div className='btn-group btn-group-sm'>
+        <div className='btn btn-default'>
+          <span className='fa fa-times'></span>
         </div>
         <div
-          className={"btn btn-primary" + (props.first ? " disabled" : "")}
+          className={'btn btn-primary' + (props.first ? ' disabled' : '')}
           onClick={props.onMoveUpClick}
         >
-          <span className="fa fa-arrow-up"></span>
+          <span className='fa fa-arrow-up'></span>
         </div>
         <div
-          className={"btn btn-primary" + (props.last ? " disabled" : "")}
+          className={'btn btn-primary' + (props.last ? ' disabled' : '')}
           onClick={props.onMoveDownClick}
         >
-          <span className="fa fa-arrow-down"></span>
+          <span className='fa fa-arrow-down'></span>
         </div>
         <div
-          className="btn btn-danger"
+          className='btn btn-danger'
           onClick={props.onDeleteClick}
         >
-          <span className="fa fa-trash"></span>
+          <span className='fa fa-trash'></span>
         </div>
       </div>
     </div>