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; +}