diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js
index 24b33de..a02c15c 100644
--- a/js/components/EditableStringList.js
+++ b/js/components/EditableStringList.js
@@ -1,12 +1,18 @@
import React from 'react';
import {
Alert,
- Button,
+ Button,
+ Card,
+ CardBody,
+ CardTitle,
+ CardText,
Input,
InputGroup,
InputGroupAddon
} from 'reactstrap';
+import '../../static/css/editablestringlist.css';
+
export default class EditableStringList extends React.Component {
constructor(props) {
super(props);
@@ -54,7 +60,7 @@ export default class EditableStringList extends React.Component {
return (
-
+
);
} else {
@@ -95,12 +101,14 @@ class GroupView extends React.Component {
return (
{this.props.groups.map((group, groupindex) => (
-
- Group {groupindex + 1}
- {group.map((team, teamindex) => (
-
{team}
- ))}
-
+
+
+ Group {groupindex + 1}
+ {group.map((team, teamindex) => (
+ -
+ ))}
+
+
))}
);
@@ -159,7 +167,7 @@ class Item extends React.Component {
render() {
return (
-
+
{this.props.text}
);
diff --git a/static/css/editablestringlist.css b/static/css/editablestringlist.css
new file mode 100644
index 0000000..d464abd
--- /dev/null
+++ b/static/css/editablestringlist.css
@@ -0,0 +1,15 @@
+
+.group-card {
+ margin-top: 15px;
+ margin-right: 15px;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.team-item {
+ display: inline-block;
+}
+
+.group-card .team-item {
+ display: block;
+}