Fix decorator list styling

Fixes #2598
Graylog2 · Aug 10, 2016 · 062291c · 062291c
1 parent 1bf5600
commit 062291c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/graylog2-web-interface/src/components/common/SortableListItem.css b/graylog2-web-interface/src/components/common/SortableListItem.css
@@ -1,11 +1,9 @@
-:local(.fullWidth) {
+:local(.listGroupItem) {
+    display: inline-block;
     width: 100%;
 }
 
-:local(.inlineFlex) {
-    display: inline-flex;
-}
-
 :local(.itemHandle) {
+    float: left;
     margin-right: 10px;
 }
diff --git a/graylog2-web-interface/src/components/common/SortableListItem.jsx b/graylog2-web-interface/src/components/common/SortableListItem.jsx
@@ -92,7 +92,7 @@ const SortableListItem = React.createClass({
   },
   render() {
     const { text, isDragging, isOver, connectDragSource, connectDropTarget } = this.props;
-    const classes = [SortableListItemStyle.inlineFlex, SortableListItemStyle.fullWidth];
+    const classes = [SortableListItemStyle.listGroupItem];
     if (isDragging) {
       classes.push('dragging');
     }
@@ -103,7 +103,10 @@ const SortableListItem = React.createClass({
     return connectDragSource(connectDropTarget(
       <div className="sortable-list-item">
         <ListGroupItem className={classes.join(' ')}>
-          <div><i className={`fa fa-sort ${SortableListItemStyle.itemHandle}`}/> {text}</div>
+          <div>
+            <span className={SortableListItemStyle.itemHandle}><i className="fa fa-sort" /></span>
+            {text}
+          </div>
         </ListGroupItem>
       </div>
     ));

diff --git a/graylog2-web-interface/src/components/search/Decorator.jsx b/graylog2-web-interface/src/components/search/Decorator.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Reflux from 'reflux';
 
-import { Button, Col, Row } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
 import { Spinner } from 'components/common';
 import { ConfigurationForm, ConfigurationWell } from 'components/configurationforms';
@@ -48,14 +48,14 @@ const Decorator = React.createClass({
     const decoratorType = this.state.types[decorator.type] || this._decoratorTypeNotPresent();
     return (
       <span className={DecoratorStyles.fullWidth}>
-        <span className={DecoratorStyles.decoratorBox}>
+        <div className={DecoratorStyles.decoratorBox}>
           <strong>{decoratorType.name}</strong>
           <span>
             <Button bsStyle="primary" bsSize="xsmall" onClick={this._handleDeleteClick}>Delete</Button>
             {' '}
             <Button bsStyle="info" bsSize="xsmall" onClick={this._handleEditClick}>Edit</Button>
           </span>
-        </span>
+        </div>
         <ConfigurationWell key={`configuration-well-decorator-${decorator._id}`}
                            id={decorator._id}
                            configuration={decorator.config}