mdl cleanup.

BerndWessels · Apr 3, 2017 · b77c430 · b77c430
1 parent a5f54af
commit b77c430
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "webpack-dev-server": "^2.0.0"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "history": "^4.0.0",
     "material-design-icons": "^3.0.0",
     "material-design-lite": "^1.0.0",

diff --git a/src/containers/home/component.js b/src/containers/home/component.js
@@ -13,77 +13,90 @@
 import {h, Component} from 'preact';
 import {connect} from 'preact-redux';
 import {FormattedMessage} from 'react-intl';
-import {Button, Icon, Card, CardTitle, CardText, CardActions, CardMenu} from 'preact-mdl';
+import {Button, Icon, Card, CardTitle, CardText, CardActions, CardMenu, Grid, Cell} from 'preact-mdl';
+import classnames from 'classnames';
 
 /**
  * Import local dependencies.
  */
 
+/**
+ * Import styles.
+ */
+import styles from './styles';
+
 /**
  * Create the component.
  */
 class Home extends Component {
   render(props, state) {
+    let rootStyles = classnames(styles.root);
     return (
-      <div style={{padding: '10px'}}>
-        <Card style={{width: '512px', margin: 'auto'}}>
-          <CardTitle style={{
-            color: '#fff',
-            height: '176px',
-            background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
-          }}>Welcome</CardTitle>
-          <CardText>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Mauris sagittis pellentesque lacus eleifend lacinia...
-          </CardText>
-          <CardActions border>
-            <Button colored>Get Started</Button>
-          </CardActions>
-          <CardMenu style={{color: '#fff'}}>
-            <Button name="share">
-              <Icon icon="notifications"/>
-            </Button>
-          </CardMenu>
-        </Card>
-        <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
-          <CardTitle style={{
-            color: '#fff',
-            height: '176px',
-            background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
-          }}>Welcome</CardTitle>
-          <CardText>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Mauris sagittis pellentesque lacus eleifend lacinia...
-          </CardText>
-          <CardActions border>
-            <Button colored>Get Started</Button>
-          </CardActions>
-          <CardMenu style={{color: '#fff'}}>
-            <Button name="share">
-              <Icon icon="notifications"/>
-            </Button>
-          </CardMenu>
-        </Card>
-        <Card shadow={0} style={{width: '512px', margin: 'auto'}}>
-          <CardTitle style={{
-            color: '#fff',
-            height: '176px',
-            background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
-          }}>Welcome</CardTitle>
-          <CardText>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Mauris sagittis pellentesque lacus eleifend lacinia...
-          </CardText>
-          <CardActions border>
-            <Button colored>Get Started</Button>
-          </CardActions>
-          <CardMenu style={{color: '#fff'}}>
-            <Button name="share">
-              <Icon icon="notifications"/>
-            </Button>
-          </CardMenu>
-        </Card>
-      </div>
+      <Grid class={rootStyles}>
+        <Cell class="mdl-cell--4-col">
+          <Card shadow={2}>
+            <CardTitle style={{
+              color: '#fff',
+              height: '176px',
+              background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
+            }}>Welcome</CardTitle>
+            <CardText>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Mauris sagittis pellentesque lacus eleifend lacinia...
+            </CardText>
+            <CardActions border>
+              <Button colored>Get Started</Button>
+            </CardActions>
+            <CardMenu style={{color: '#fff'}}>
+              <Button name="share">
+                <Icon icon="notifications"/>
+              </Button>
+            </CardMenu>
+          </Card>
+        </Cell>
+        <Cell class="mdl-cell--4-col">
+          <Card shadow={2}>
+            <CardTitle style={{
+              color: '#fff',
+              height: '176px',
+              background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
+            }}>Welcome</CardTitle>
+            <CardText>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Mauris sagittis pellentesque lacus eleifend lacinia...
+            </CardText>
+            <CardActions border>
+              <Button colored>Get Started</Button>
+            </CardActions>
+            <CardMenu style={{color: '#fff'}}>
+              <Button name="share">
+                <Icon icon="notifications"/>
+              </Button>
+            </CardMenu>
+          </Card>
+        </Cell>
+        <Cell class="mdl-cell--4-col">
+          <Card shadow={2}>
+            <CardTitle style={{
+              color: '#fff',
+              height: '176px',
+              background: 'url(http://www.getmdl.io/assets/demos/welcome_card.jpg) center / cover'
+            }}>Welcome</CardTitle>
+            <CardText>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Mauris sagittis pellentesque lacus eleifend lacinia...
+            </CardText>
+            <CardActions border>
+              <Button colored>Get Started</Button>
+            </CardActions>
+            <CardMenu style={{color: '#fff'}}>
+              <Button name="share">
+                <Icon icon="notifications"/>
+              </Button>
+            </CardMenu>
+          </Card>
+        </Cell>
+      </Grid>
     );
   }
 }

diff --git a/src/containers/home/styles.scss b/src/containers/home/styles.scss
@@ -0,0 +1,18 @@
+/**
+ * Bernd Wessels (https://github.com/BerndWessels/)
+ *
+ * Copyright © 2016 Bernd Wessels. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+.root {
+  padding: 15px;
+}
+
+:global {
+  .mdl-card {
+    width: auto !important;
+  }
+}