Commit fe08b768 authored by Martin Fahl's avatar Martin Fahl

add responsiveness

parent 175cbcac
......@@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>codecentric Inventory</title>
</head>
<body>
<noscript>
......
......@@ -2,7 +2,7 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { Filter } from "../../presentational/Filter/Filter";
import { Item } from "../Item/Item";
import { Card, CardBody, ListGroup } from "mdbreact";
import { Container, Row, Col, Card, CardBody, ListGroup } from "mdbreact";
export class InventoryList extends Component {
constructor(props) {
......@@ -19,21 +19,29 @@ export class InventoryList extends Component {
render() {
return (
<Card className="mt-4 mb-4">
<CardBody>
<Filter
updateFilter={this.updateFilter}
filterTerm={this.state.filterTerm}
/>
<ListGroup>
{this.state.items
.filter(items => items.includes(this.state.filterTerm))
.map((name, index) => (
<Item key={index} name={name} />
))}
</ListGroup>
</CardBody>
</Card>
<Container>
<Row className="justify-content-md-center justify-content-center mx-auto">
<Col sm="12" md="8" lg="6">
<Card className="mt-4 mb-4 mx-auto">
<CardBody>
<Filter
updateFilter={this.updateFilter}
filterTerm={this.state.filterTerm}
/>
<ListGroup>
{this.state.items
.filter(items => items.includes(this.state.filterTerm))
.map((name, index) => (
<Item key={index} name={name} />
))}
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment