Skip to content

Commit 510101f

Browse files
somussomus
committed
feat(webpack): add loaders for images and css with modules support
1 parent cfc175e commit 510101f

File tree

22 files changed

+359
-57
lines changed

22 files changed

+359
-57
lines changed

‎client/App.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { Provider } from 'react-redux';
33
import { Router, browserHistory } from 'react-router';
44
import routes from './routes';
55

6+
// Base stylesheet
7+
require('./main.css');
8+
69
const history = browserHistory;
710

811
export default function App(props) {

‎client/main.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box;
7+
line-height: normal;
8+
}
9+
10+
::-webkit-input-placeholder {
11+
color:#aaa;
12+
font-weight: 300;
13+
}
14+
::-moz-placeholder {
15+
color:#aaa;
16+
font-weight: 300;
17+
}
18+
:-ms-input-placeholder {
19+
color:#aaa;
20+
font-weight: 300;
21+
}
22+
input:-moz-placeholder {
23+
color:#aaa;
24+
font-weight: 300;
25+
}
26+
27+
body {
28+
background: #FFF;
29+
font-family: 'Lato', sans-serif;
30+
font-size: 16px;
31+
}

‎client/modules/App/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.container {
2+
max-width: 980px;
3+
width: 100%;
4+
padding: 15px;
5+
margin: 0 auto;
6+
}

‎client/modules/App/App.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import React, { Component, PropTypes } from 'react';
22
import { connect } from 'react-redux';
33

4+
// Import Style
5+
import styles from './App.css';
6+
47
// Import Components
58
import Helmet from 'react-helmet';
69
import DevTools from './components/DevTools';
7-
import Header from './components/Header';
8-
import Footer from './components/Footer';
10+
import Header from './components/Header/Header';
11+
import Footer from './components/Footer/Footer';
912

1013
// Import Actions
1114
import { toggleAddPost } from './AppActions';
@@ -45,7 +48,7 @@ class App extends Component {
4548
]}
4649
/>
4750
<Header toggleAddPost={this.toggleAddPostSection} />
48-
<div className="container">
51+
<div className={styles.container}>
4952
{this.props.children}
5053
</div>
5154
<Footer />

‎client/modules/App/components/Footer/Footer.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.footer{
2+
text-align: center;
3+
padding: 56px 0;
4+
background: #FFF url('/img/header-bk.png') center;
5+
background-size: cover;
6+
}
7+
8+
.footer p{
9+
margin: 0 0 8px 0;
10+
font-size: 14px;
11+
color: #FFF;
12+
}
13+
14+
.footer a{
15+
color: #FFF;
16+
text-decoration: none;
17+
font-weight: 700;
18+
}

‎client/modules/App/components/Footer.js renamed to ‎client/modules/App/components/Footer/Footer.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from 'react';
22

3+
// Import Style
4+
import styles from './Footer.css';
5+
36
function Footer() {
47
return (
5-
<div className="footer">
8+
<div className={styles.footer}>
69
<p>&copy; 2016 &middot; Hashnode &middot; LinearBytes Inc.</p>
710
<p>We are on Twitter : <a href="https://twitter.com/@mern_io" target="_Blank">@mern_io</a></p>
811
</div>

‎client/modules/App/components/Header/Header.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.header {
2+
background: #eee url('/img/header-bk.png') center;
3+
background-size: cover;
4+
border-bottom: 1px solid #ccc;
5+
}
6+
7+
.content {
8+
width: 100%;
9+
max-width: 980px;
10+
margin: auto;
11+
padding: 64px 16px;
12+
overflow: auto;
13+
}
14+
15+
.site-title {
16+
font-weight: 300;
17+
font-size: 42px;
18+
float: left;
19+
}
20+
21+
.site-title a {
22+
text-decoration: none;
23+
color: #FFF;
24+
}
25+
26+
.add-post-button {
27+
display: inline-block;
28+
color: #FFF;
29+
background: #03A9F4;
30+
padding: 8px 16px;
31+
text-decoration: none;
32+
border-radius: 1000px;
33+
float: right;
34+
}
35+
36+
@media (max-width: 767px){
37+
.add-post-button{
38+
float: left;
39+
margin-top: 16px;
40+
}
41+
}

‎client/modules/App/components/Header.js renamed to ‎client/modules/App/components/Header/Header.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
import React, { PropTypes } from 'react';
22
import { Link } from 'react-router';
33

4+
// Import Style
5+
import styles from './Header.css';
6+
47
function Header(props, context) {
58
return (
6-
<div className="header">
7-
<div className="header-content">
8-
<h1 className="site-title">
9+
<div className={styles.header}>
10+
<div className={styles.content}>
11+
<h1 className={styles['site-title']}>
912
<Link to="/" >MERN Starter Blog</Link>
1013
</h1>
1114
{
1215
context.router.isActive('/', true)
13-
? <a className="add-post-button" href="#" onClick={props.toggleAddPost}>Add Post</a>
16+
? <a className={styles['add-post-button']} href="#" onClick={props.toggleAddPost}>Add Post</a>
1417
: null
1518
}
1619
</div>

‎client/modules/Post/components/PostCreateWidget/PostCreateWidget.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.form {
2+
display: none;
3+
background: #FAFAFA;
4+
padding: 32px 0;
5+
border: 1px solid #eee;
6+
border-radius: 4px;
7+
}
8+
9+
.form-content{
10+
width: 100%;
11+
max-width: 600px;
12+
margin: auto;
13+
font-size: 14px;
14+
}
15+
16+
.form-title{
17+
font-size: 16px;
18+
font-weight: 700;
19+
margin-bottom: 16px;
20+
color: #757575;
21+
}
22+
23+
.form-field{
24+
width: 100%;
25+
margin-bottom: 16px;
26+
font-family: 'Lato', sans-serif;
27+
font-size: 16px;
28+
line-height: normal;
29+
padding: 12px 16px;
30+
border-radius: 4px;
31+
border: 1px solid #ddd;
32+
outline: none;
33+
color: #212121;
34+
}
35+
36+
textarea {
37+
min-height: 200px;
38+
}
39+
40+
.post-submit-button {
41+
display: inline-block;
42+
padding: 8px 16px;
43+
font-size: 18px;
44+
color: #FFF;
45+
background: #03A9F4;
46+
text-decoration: none;
47+
border-radius: 4px;
48+
}
49+
50+
.appear {
51+
display: block;
52+
}

‎client/modules/Post/components/PostCreateWidget.js renamed to ‎client/modules/Post/components/PostCreateWidget/PostCreateWidget.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React, { Component, PropTypes } from 'react';
22

3+
// Import Style
4+
import styles from './PostCreateWidget.css';
5+
36
class PostCreateWidget extends Component {
47
addPost = () => {
58
const nameRef = this.refs.name;
@@ -12,15 +15,15 @@ class PostCreateWidget extends Component {
1215
};
1316

1417
render() {
15-
const cls = `form ${(this.props.showAddPost ? 'appear' : '')}`;
18+
const cls = `${styles.form} ${(this.props.showAddPost ? styles.appear : '')}`;
1619
return (
1720
<div className={cls}>
18-
<div className="form-content">
19-
<h2 className="form-title">Create new post</h2>
20-
<input placeholder="Author's Name" className="form-field" ref="name" />
21-
<input placeholder="Post Title" className="form-field" ref="title" />
22-
<textarea placeholder="Post Content" className="form-field" ref="content" />
23-
<a className="post-submit-button align-right" href="#" onClick={this.addPost}>Submit</a>
21+
<div className={styles['form-content']}>
22+
<h2 className={styles['form-title']}>Create new post</h2>
23+
<input placeholder="Author's Name" className={styles['form-field']} ref="name" />
24+
<input placeholder="Post Title" className={styles['form-field']} ref="title" />
25+
<textarea placeholder="Post Content" className={styles['form-field']} ref="content" />
26+
<a className={styles['post-submit-button']} href="#" onClick={this.addPost}>Submit</a>
2427
</div>
2528
</div>
2629
);

‎client/modules/Post/components/PostList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PropTypes } from 'react';
2-
import PostListItem from './PostListItem';
2+
import PostListItem from './PostListItem/PostListItem';
33

44
function PostList(props) {
55
return (

‎client/modules/Post/components/PostListItem/PostListItem.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.single-post {
2+
margin: 20px 0;
3+
padding: 15px;
4+
border-radius: 2px;
5+
}
6+
7+
.post-title{
8+
font-size: 28px;
9+
margin-bottom: 16px;
10+
font-weight: 400;
11+
color: #616161;
12+
}
13+
14+
.post-title a{
15+
text-decoration: none;
16+
color: #616161;
17+
}
18+
19+
.author-name{
20+
font-size: 16px;
21+
margin-bottom: 16px;
22+
color: #757575;
23+
}
24+
25+
.post-desc{
26+
font-size: 14px;
27+
color: #888;
28+
margin-bottom: 8px;
29+
}
30+
31+
.post-action a{
32+
color: #555;
33+
text-decoration: none;
34+
font-size: 14px;
35+
font-style: italic;
36+
}
37+
38+
.post-action a:hover{
39+
color: #EF5350;
40+
}
41+
42+
.divider{
43+
border: 0;
44+
height: 1px;
45+
background: #ccc;
46+
width: 250px;
47+
margin: 32px auto 0;
48+
}
49+
50+
.post-detail .post-title{
51+
font-size: 42px;
52+
color: #454545;
53+
}
54+
55+
.post-detail .post-desc{
56+
font-size: 16px;
57+
color: #555;
58+
}

‎client/modules/Post/components/PostListItem.js renamed to ‎client/modules/Post/components/PostListItem/PostListItem.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import React, { PropTypes } from 'react';
22
import { Link } from 'react-router';
33

4+
// Import Style
5+
import styles from './PostListItem.css';
6+
47
function PostListItem(props) {
58
return (
6-
<div className="single-post">
7-
<h3 className="post-title ">
9+
<div className={styles['single-post']}>
10+
<h3 className={styles['post-title']}>
811
<Link to={`/post/${props.post.slug}-${props.post.cuid}`} onClick={props.onClick}>
912
{props.post.title}
1013
</Link>
1114
</h3>
12-
<p className="author-name">By {props.post.name}</p>
13-
<p className="post-desc">{props.post.content}</p>
14-
<p className="post-action"><a href="#" onClick={props.onDelete}>Delete Post</a></p>
15-
<hr className="divider" />
15+
<p className={styles['author-name']}>By {props.post.name}</p>
16+
<p className={styles['post-desc']}>{props.post.content}</p>
17+
<p className={styles['post-action']}><a href="#" onClick={props.onDelete}>Delete Post</a></p>
18+
<hr className={styles.divider} />
1619
</div>
1720
);
1821
}

‎client/modules/Post/pages/PostDetailPage/PostDetailPage.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { connect } from 'react-redux';
33
import { getPostRequest } from '../../PostActions';
44
import Helmet from 'react-helmet';
55

6+
// Import Style
7+
import styles from '../../components/PostListItem/PostListItem.css';
8+
69
function PostDetailPage(props) {
710
return (
811
<div>
912
<Helmet title={props.post.title} />
10-
<div className="single-post post-detail">
11-
<h3 className="post-title">{props.post.title}</h3>
12-
<p className="author-name">By {props.post.name}</p>
13-
<p className="post-desc">{props.post.content}</p>
13+
<div className={`${styles['single-post']} ${styles['post-detail']}`}>
14+
<h3 className={styles['post-title']}>{props.post.title}</h3>
15+
<p className={styles['author-name']}>By {props.post.name}</p>
16+
<p className={styles['post-desc']}>{props.post.content}</p>
1417
</div>
1518
</div>
1619
);

‎client/modules/Post/pages/PostListPage/PostListPage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PropTypes, Component } from 'react';
22
import PostListView from '../../components/PostList';
3-
import PostCreateView from '../../components/PostCreateWidget';
3+
import PostCreateView from '../../components/PostCreateWidget/PostCreateWidget';
44
import { connect } from 'react-redux';
55
import { addPostRequest, fetchPosts, addSelectedPost, deletePostRequest } from '../../PostActions';
66
import { toggleAddPost } from '../../../App/AppActions';

0 commit comments

Comments
 (0)