From 8b03422d5cf4b6d6052c5c10edbbc76db990d9ac Mon Sep 17 00:00:00 2001
From: Gard Rimestad <gardleopard@gmail.com>
Date: Thu, 13 Nov 2014 10:46:45 +0100
Subject: [PATCH] admin - convert feature list into table

---
 public/js/components/feature/Feature.jsx     | 37 +++++++++++---------
 public/js/components/feature/FeatureList.jsx | 18 +++++++++-
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/public/js/components/feature/Feature.jsx b/public/js/components/feature/Feature.jsx
index 26b5e7cee8..7bc568c9b0 100644
--- a/public/js/components/feature/Feature.jsx
+++ b/public/js/components/feature/Feature.jsx
@@ -22,36 +22,41 @@ var Feature = React.createClass({
     },
 
     render: function() {
-        return (<div className='line mal'>
-                {this.state.editMode ? this.renderEditMode() : this.renderViewMode()}
-                </div>);
+        return this.state.editMode ? this.renderEditMode() : this.renderViewMode();
     },
 
     renderEditMode: function() {
-        return (<FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />);
+        return (
+            <tr>
+                <td colSpan="4">
+                    <FeatureForm feature={this.props.feature} onSubmit={this.saveFeature} onCancel={this.toggleEditMode} />
+                </td>
+            </tr>
+            );
 
     },
 
     renderViewMode: function() {
         var strikeThrough = this.props.feature.enabled ? '' : 'strikethrough';
+
         return (
-            <div>
-                <div className={'unit r-size1of5 ' + strikeThrough}>
-                  {this.props.feature.name}
-                </div>
+            <tr>
+                <td className={strikeThrough}>
+                    {this.props.feature.name}
+                </td>
 
-                <div className='unit r-size2of5 opaque smalltext truncate'>
-                  {this.props.feature.description || '\u00a0'}
-                </div>
+                <td className='opaque smalltext truncate'>
+                    {this.props.feature.description || '\u00a0'}
+                </td>
 
-                <div className='unit r-size1of5'>
+                <td>
                     {this.props.feature.strategy}
-                </div>
+                </td>
 
-                <div className='unit r-size1of5'>
+                <td>
                     <input type='button' value='Edit' onClick={this.toggleEditMode}/>
-                </div>
-            </div>
+                </td>
+            </tr>
         );
     }
 });
diff --git a/public/js/components/feature/FeatureList.jsx b/public/js/components/feature/FeatureList.jsx
index ccda9aa0a9..7fbf6c7bf1 100644
--- a/public/js/components/feature/FeatureList.jsx
+++ b/public/js/components/feature/FeatureList.jsx
@@ -12,7 +12,23 @@ var FeatureList = React.createClass({
             );
         }.bind(this));
 
-        return <div>{featureNodes}</div>;
+        return (
+          <div className='r-margin'>
+            <table className='outerborder'>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Description</th>
+                  <th>Strategy</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {featureNodes}
+              </tbody>
+            </table>
+          </div>
+          );
     }
 });