Rebuild admin UI using Material UI (#114)

* Rebuild admin UI using Material UI * Remove react-burger-menu * Fix tests
jsdrupal · Jun 5, 2018 · c345e4a · c345e4a
1 parent 69f9e25
commit c345e4a
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 398 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "prop-types": "^15.6.1",
     "qs": "^6.5.1",
     "react": "^16.4.0",
-    "react-burger-menu": "^2.4.0",
     "react-dom": "^16.4.0",
     "react-jss": "^8.4.0",
     "react-redux": "^5.0.7",
@@ -22,7 +21,6 @@
     "react-router-redux": "^5.0.0-alpha.9",
     "react-sticky": "^6.0.2",
     "redux": "^3.7.2",
-    "redux-burger-menu": "^0.2.4",
     "redux-devtools-extension": "^2.13.2",
     "redux-saga": "^0.16.0"
   },

diff --git a/src/components/05_pages/Content/Content.js b/src/components/05_pages/Content/Content.js
@@ -53,7 +53,7 @@ const styles = {
     margin: 0.5rem;
   `,
   filters: css`
-    min-height: 7rem;
+    padding: 0 1.5rem;
   `,
 };
 
@@ -82,75 +82,76 @@ class Content extends Component {
   }
   render = () => (
     <Fragment>
-      <div className={styles.filters}>
-        <TextField
-          label="Title"
-          placeholder="Title"
-          onChange={e => {
-            this.setState({ title: e.target.value }, () => {
-              this.props.requestContent(this.state);
-            });
-          }}
-          margin="normal"
-        />
-
-        <FormControl className={styles.formControl}>
-          <InputLabel htmlFor="select-multiple-checkbox">
-            Content Type
-          </InputLabel>
-          <Select
-            multiple
-            value={this.state.contentTypes}
+      <Paper>
+        <div className={styles.filters}>
+          <TextField
+            label="Title"
+            placeholder="Title"
             onChange={e => {
-              this.setState({ contentTypes: e.target.value }, () => {
+              this.setState({ title: e.target.value }, () => {
                 this.props.requestContent(this.state);
               });
             }}
-            input={<Input id="select-multiple-checkbox" />}
-            renderValue={selected => (
-              <div className={styles.chips}>
-                {selected.map(value => (
-                  <Chip
-                    key={value}
-                    label={this.props.contentTypes[value].name}
-                    className={styles.chip}
+            margin="normal"
+          />
+
+          <FormControl className={styles.formControl}>
+            <InputLabel htmlFor="select-multiple-checkbox">
+              Content Type
+            </InputLabel>
+            <Select
+              multiple
+              value={this.state.contentTypes}
+              onChange={e => {
+                this.setState({ contentTypes: e.target.value }, () => {
+                  this.props.requestContent(this.state);
+                });
+              }}
+              input={<Input id="select-multiple-checkbox" />}
+              renderValue={selected => (
+                <div className={styles.chips}>
+                  {selected.map(value => (
+                    <Chip
+                      key={value}
+                      label={this.props.contentTypes[value].name}
+                      className={styles.chip}
+                    />
+                  ))}
+                </div>
+              )}
+            >
+              {Object.keys(this.props.contentTypes).map(type => (
+                <MenuItem key={type} value={type}>
+                  <Checkbox
+                    checked={this.state.contentTypes.indexOf(type) > -1}
                   />
-                ))}
-              </div>
-            )}
-          >
-            {Object.keys(this.props.contentTypes).map(type => (
-              <MenuItem key={type} value={type}>
-                <Checkbox
-                  checked={this.state.contentTypes.indexOf(type) > -1}
-                />
-                <ListItemText primary={this.props.contentTypes[type].name} />
+                  <ListItemText primary={this.props.contentTypes[type].name} />
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl className={styles.formControl}>
+            <InputLabel htmlFor="status">Status</InputLabel>
+            <Select
+              value={this.state.status || ''}
+              onChange={e => {
+                this.setState({ status: e.target.value }, () => {
+                  this.props.requestContent(this.state);
+                });
+              }}
+              input={<Input name="status" id="status" />}
+              autoWidth
+            >
+              <MenuItem value="">
+                <em>Any</em>
               </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+              <MenuItem value="published">Published</MenuItem>
+              <MenuItem value="unpublished">Unpublished</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
 
-        <FormControl className={styles.formControl}>
-          <InputLabel htmlFor="status">Status</InputLabel>
-          <Select
-            value={this.state.status || ''}
-            onChange={e => {
-              this.setState({ status: e.target.value }, () => {
-                this.props.requestContent(this.state);
-              });
-            }}
-            input={<Input name="status" id="status" />}
-            autoWidth
-          >
-            <MenuItem value="">
-              <em>Any</em>
-            </MenuItem>
-            <MenuItem value="published">Published</MenuItem>
-            <MenuItem value="unpublished">Unpublished</MenuItem>
-          </Select>
-        </FormControl>
-      </div>
-      <Paper>
         <Table>
           <TableHead>
             <TableRow>