Merge branch 'feature/template-variables' of github.com:influxdata/chronograf into feature/template-variables

ui/src/dashboards/components/TemplateVariableRow.js

@@ -16,18 +16,18 @@ const TemplateVariableRow = ({
   selectedTagKey,
   onSelectTagKey,
 }) => (
-  <tr>
-    <td>{label}</td>
-    <td>{code}</td>
-    <td>
+  <div className="tr">
+    <div className="td">{label}</div>
+    <div className="td">{code}</div>
+    <div className="td">
       <Dropdown
         items={TEMPLATE_VARIBALE_TYPES}
         onChoose={onSelectType}
         selected={selectedType}
         className={'template-variable--dropdown'}
       />
-    </td>
-    <td>
+    </div>
+    <div className="td">
       <TemplateQueryBuilder
         onSelectDatabase={onSelectDatabase}
         selectedType={selectedType}
@@ -37,14 +37,14 @@ const TemplateVariableRow = ({
         selectedTagKey={selectedTagKey}
         onSelectTagKey={onSelectTagKey}
       />
-    </td>
-    <td>
+    </div>
+    <div className="td">
       {values.join(', ')}
-    </td>
-    <td>
+    </div>
+    <div className="td">
       <button className="btn btn-sm btn-danger" type="button">Delete</button>
-    </td>
-  </tr>
+    </div>
+  </div>
 )
 
 class RowWrapper extends Component {

ui/src/dashboards/components/TemplateVariableTable.js

@@ -3,21 +3,21 @@ import React, {PropTypes} from 'react'
 import TemplateVariableRow from 'src/dashboards/components/TemplateVariableRow'
 
 const TemplateVariableTable = ({templates}) => (
-  <table className="table v-center">
-    <thead>
-      <tr>
-        <th>Dropdown Label</th>
-        <th>Shortcode</th>
-        <th>Type</th>
-        <th>Queries</th>
-        <th>Values</th>
-        <th />
-      </tr>
-    </thead>
-    <tbody>
+  <div className="table-custom">
+    <div className="thead">
+      <div className="tr">
+        <div className="th">Dropdown Label</div>
+        <div className="th">Shortcode</div>
+        <div className="th">Type</div>
+        <div className="th">Queries</div>
+        <div className="th">Values</div>
+        <div className="th" />
+      </div>
+    </div>
+    <div className="tbody">
       {templates.map(t => <TemplateVariableRow key={t.id} template={t} />)}
-    </tbody>
-  </table>
+    </div>
+  </div>
 )
 
 const {arrayOf, shape, string} = PropTypes

ui/src/style/components/tables.scss

@@ -3,6 +3,45 @@
     ----------------------------------------------
 */
 
+// table-custom class allows us to make a table from divs so we can use
+// forms inside a table
+.table-custom {
+  display: table !important;
+  border-collapse: separate;
+  border-spacing: 2px;
+  width: 100%;
+  padding: 10px;
+  .thead {
+    display: table-header-group;
+    color: white;
+    color: $g17-whisper !important;
+    border-width: 1px;
+  }
+  .th {
+    display: table-cell;
+    font-weight: 700;
+    color: $g14-chromium !important;
+    border: 0 !important;
+    padding: 6px 8px !important;
+  }
+  .tbody {
+    display: table-row-group;
+  }
+  .tr {
+    display: table-row;
+  }
+  .td {
+    display: table-cell;
+    font-weight: 500;
+    color: $g14-chromium !important;
+    border: 0 !important;
+    padding: 6px 8px !important;
+  }
+  .tr.editing .td INPUT {
+    background-color: $g5-pepper;
+    color: $g19-ghost !important;
+  }
+}
 
 table {
   thead th {