diff --git a/ui/src/dashboards/components/TemplateVariableRow.js b/ui/src/dashboards/components/TemplateVariableRow.js index 395e1198be..36a5d291cd 100644 --- a/ui/src/dashboards/components/TemplateVariableRow.js +++ b/ui/src/dashboards/components/TemplateVariableRow.js @@ -16,18 +16,18 @@ const TemplateVariableRow = ({ selectedTagKey, onSelectTagKey, }) => ( - - {label} - {code} - +
+
{label}
+
{code}
+
- - +
+
- - +
+
{values.join(', ')} - - +
+
- - +
+
) class RowWrapper extends Component { diff --git a/ui/src/dashboards/components/TemplateVariableTable.js b/ui/src/dashboards/components/TemplateVariableTable.js index 469e549271..d79a3d63fa 100644 --- a/ui/src/dashboards/components/TemplateVariableTable.js +++ b/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}) => ( - - - - - - - - - - - +
+
+
+
Dropdown Label
+
Shortcode
+
Type
+
Queries
+
Values
+
+
+
+
{templates.map(t => )} -
-
Dropdown LabelShortcodeTypeQueriesValues -
+ + ) const {arrayOf, shape, string} = PropTypes diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 2d99e41abe..538025bd3f 100644 --- a/ui/src/style/components/tables.scss +++ b/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 {